Tutos

Vidéos

Wiki

Papasti Karaté Club

Mes Blogs

Chaque élément de menu est constitué d'une boite BoxMenu, laquelle contient deux boites: La boite contenu et la boite txt.Dans contenu, vous placerez l'icone, le lien ou le texte voulu. Dans la boite txt, vous mettrez le texte correspondant à celui écrit en vertical.

Hormis le contenu que vous choisissez, il faut régler la valeur de top pour chaque BoxMenu. Dans mon exemple, la valeur de top augmente de 76px à chaque nouvelle boite. C'est la valeur correspondant à la hauteur de la boite + la bordure. Ici la boite fait 70px et la bordure 3px. Donc 70 + 3 (bordure supérieure) + 3 (bordure inférieure)=76

Le CSS

Pour une meilleure compréhension, j'ai annoté les différentes lignes du CSS. Ainsi vous pourrez voir d'où proviennent certaines valeurs.

Dans la structure HTML, la boite txt (en vert sur l'image) vient se placer sous la boite contenu (en rose). Pour l'amener à sa position après rotation, il faut ajuster les propriétés left et top. En effet, la rotation de l'élément txt se fait en son centre et il faut donc décaler l'objet d'un vecteur correspondant au décalage des centres de l'objet. (Cliquez sur l'image pour l'agrandir)

/* menu lateral gauche */ .BoxMenu{ color:black; /* Couleur du texte */ background-color:#6b9ed1; /* Couleur du fond. Il est possible de changer la couleur de fond par une image dans ce cas, vous ajouterez la ligne suivante background-image: url('url de votre image'); */ overflow:hidden; /* empêche que le contenu des boites ne dépasse de celles-ci */ width:104px;height:76px; /* Largeur et hauteur de la boite principale Largeur (width)= largeur de contenu (70) + hauteur txt(22) + bordures (4x3) = 104 px Hauteur (height)=hauteur de contenu (70) + bordures (2x3)=76 px */ position:fixed; /* Positionnement par rapport à la fenêtre du navigateur */ left:-76px; /* On décale vers la gauche de 76 px de manière à ne laisser voir que la boite txt */ -webkit-transition-duration: 0.5s;/* Durée de transition pour un effet de slide */ -moz-transition-duration: 0.5s; transition-duration: 0.5s; border-radius:0px 8px 8px 0px; /* arrondi des coins à droite de la boite de 8 px */ } .contenu { border:3px ridge lightblue; /* Bordure de type ridge de 3px d'epaisseur et de couleur lightblue */ height:70px; /* hauteur de 70px */ width:70px; /* largeur de 70px */ } .contenu img /* Optionnel */ { width:70px; /* redimensionne les images de contenu à 70 x 70 px */ height:70px; } .txt{ text-shadow: 1px 1px 2px black; /* Effet d'ombre sur le texte décalage de 1 px, flou de 2px couleur noire */ border:3px lightblue ridge; /* Bordure de type ridge de 3px d'epaisseur et de couleur lightblue */ font-size:14px; /* Taille de la police */ color:white; /* Couleur de la police */ text-align:center; /* Centrage de la police */ position:relative; /* Positionnement relatif par rapport à la boite BoxMenu */ left:52px; /* Décalage pour un bon positionnement de la boite */ top:-52px; /* Voir l'image pour l'explication des valeurs */ width:70px; /* Largeur de txt */ height:22px; /* Hauteur de txt */ border-radius:0px 0px 8px 8px; /* arrondi des coins inférieurs de la boite de 8 px */ transform: rotate(270deg); /* angle de rotation de la boite de 270° */ -ms-transform: rotate(270deg); -webkit-transform: rotate(270deg); -o-transform: rotate(270deg); -moz-transform: rotate(270deg); } .BoxMenu:hover { left:0px; /* affiche toute la boite BoxMenu au survol de la souris */ }

Voilà, je pense que vous avez maintenant toutes les explications pour réaliser ce menu sur votre blog.