Hum, dans le code que tu m'as donné, tout à la fin tu as une div qui ne se ferme pas o_o
- Code:
-
<div style="position: fixed; top: 150px; left: 5px; ">
</body>
</html>
Sinon, le code que tu as est un peu brouillon, on peut le rendre plus simple
(SI SI SI je te jure, c'est pas si compliqué que ça xD !).
En effet dans ton code tu as pour plusieurs div avec ceci :
- Code:
-
<div style="width: 150px; text-align: center;" class="boxmenu">
Il serait plus simple mettre toute la partie style dans ton css
Ca permettrait d'alléger ton code, de le rendre plus lisible et aussi de tout modifier d'un coup ! Car là si tu veux changer la largeur (width) il faudrait la changer autant de fois qu'elle apparait dans ton code HTML. Grâce à la modification, tu le changes une fois et c'est bon
- Code:
-
.boxmenu {
background-color: #333333;
border-radius: 20px;
font-size:12px;
margin:0px; padding: 3px 10px 3px 10px;
color:#ABABAB;
width: 150px;
text-align: center;
}
Dans ton CSS, je peux voir une partie box, boxtoproundtitle, img.sidebar:hover , img.sidebar. Dans le HTML qui correspond, tu n'utilises pas ces classes... Si tu ne les utilises pas, tu peux supprimer toute cette partie là
- Code:
-
img.sidebar {
padding:1px; -moz-opacity: 0.6; margin:2px; -moz-border-radius: 4px; border: 1px solid #6e8d90;
background-color:#B2C8CF
}
img.sidebar:hover {
padding:2px; -moz-opacity: 1; margin:2px; -moz-border-radius: 4px; border: 1px solid #a63f43;
}
.boxtoproundtitle {
background-color: #ada49f;
color:#FFFFA8;
font-weight:bold;
text-decoration:none;
-moz-border-radius:5px;
font-size:11px;
margin:0px 0px 5px 0px; padding: 3px 10px 3px 10px;
display:block;
text-transform : uppercase;
text-align : center;
}
.box {
background-color: #333333;
-moz-border-radius:5px;
font-size:11px;
margin:0px; padding: 3px 10px 3px 10px;
color:#ABABAB;
}
Donc, maintenant on peut enfin s'attaquer à notre code !
Pour cela, on va repérer la div qui englobe tout notre graaaand cadre :
- Code:
-
<div style="position: fixed; top: 200px; left: 5px; ">
Bien donc, comme on a vu, c'est mieux de mettre une class, plutôt que de mettre le css dans la partie style. Allez, on crée une class... Bon, en nom je vais mettre box_side. Ca devient donc
- Code:
-
<div class="box_side">
Le principe d'un menu déroulant, ça serait :
NORMAL : la box est décalée sur la gauche, de XX pixels (XX sera une valeur à adapter selon tes besoins)
SURVOL : la box reprends sa place normale
Au niveau du CSS on aurait donc :
- Code:
-
.box_side {
position: fixed;
top: 200px;
left: -150px; /* A l'état normal, on décale de 150px pour cacher*/
-webkit-transition: all 1s ; /*code pour la transition*/
-moz-transition: all 1s ; /*code pour la transition */
-ms-transition: all 1s ; /*code pour la transition */
-o-transition: all 1s ; /*code pour la transition */
transition: all 1s ; /*code pour la transition */
}
.box_side:hover {
left: 5px; /* Au survol on place au bon endroit */
}
Toute la partie depuis le "-webkit-transition" jusqu'au "transition", en fait c'est la même propriété, sauf que pour l'instant, les différents navigateurs ont besoin de mettre un préfixe devant pour que ça fonctionne
Normalement ça devrait marcher