Profil

  • Christelle
  • retrouvez-moi sur : http://www.awerpi.fr
  • retrouvez-moi sur : http://www.awerpi.fr

Photo.Graph

Catégories

15 septembre 2009 2 15 /09 /septembre /2009 05:38
Devant le succès d'un précédent article qui explique comment installer un menu déroulant horizontal sans javascript et en utilisant uniquement le html et le CSS (article consultable ici : Un menu déroulant horizontal (html CSS) sans javascript), voici le même menu pour un affichage vertical.

Voici un exemple :









Alors voici un code un peu long, mais simple d'utilisation et facilement modifiable à placer dans son entête en mode html. Pour celà il faut aller dans son administartion de blog comme pour insérer une bannière , mais choisir les options suivantes :



Tout ce qui est en orange est à personnaliser (voir explications en bas)


<ul id="menuDeroulant1">
<li><a href="http://liencategorie1.html">Catégorie1</a>
<ul class="sousMenu1">
<li><a href="http://liensousmenu1-cat1.html">Lien 1 de la catégorie 1</a> </li>
<li><a href="http://liensousmenu2-cat1.html">Lien 2 de la catégorie 1</a> </li>
<li><a href="http://liensousmenu3-cat1.html">Lien 3 de la catégorie 1</a> </li>
</ul>
</li>
</ul>
<br /><br />
<ul id="menuDeroulant2">
<li><a href="http://liencategorie2.html">Catégorie2</a>
<ul class="sousMenu2">
<li><a href="http://liensousmenu1-cat2.html">Lien 1 de la catégorie 2</a> </li>
<li><a href="http://liensousmenu2-cat2.html">Lien 2 de la catégorie 2</a> </li>
<li><a href="http://liensousmenu3-cat2.html">Lien 3 de la catégorie 2</a> </li>
</ul>
</li>
</ul>
<br /><br />
<ul id="menuDeroulant3">
<li><a href="http://liencategorie3.html">Catégorie3</a>
<ul class="sousMenu3">
<li><a href="http://liensousmenu1-cat3.html">Lien 1 de la catégorie 3</a> </li>
<li><a href="http://liensousmenu2-cat3.html">Lien 2 de la catégorie 3</a> </li>
<li><a href="http://liensousmenu3-cat3.html">Lien 3 de la catégorie 3</a> </li>
</ul>
</li>
</ul>
<br /><br />
<ul id="menuDeroulant4">
<li><a href="http://liencategorie4.html">Catégorie4</a>
<ul class="sousMenu4">
<li><a href="http://liensousmenu1-cat4.html">Lien 1 de la catégorie 4</a> </li>
<li><a href="http://liensousmenu2-cat4.html">Lien 2 de la catégorie 4</a> </li>
<li><a href="http://liensousmenu3-cat4.html">Lien 3 de la catégorie 4</a> </li>
</ul>
</li>
</ul>







<style type="text/css"><!--
#menuDeroulant1{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant1 li{ float: left; margin: 0px; padding: 0; border: 0;}

#menuDeroulant1 li:hover > .sousMenu1 { display: block; }

#menuDeroulant1 .sousMenu1{ list-style-type: none; margin: 0; padding: 0; border: 0;}
#menuDeroulant1 .sousMenu1{ display: none; list-style-type: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant1 .sousMenu1 li{ float: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant1 li{ float: left; width: 200px; margin: 0; padding: 0; border: 0; font-size:11px;}

#menuDeroulant1{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0; position: absolute; top: 100; z-index:1000;}

#menuDeroulant1 li a:link, #menuDeroulant1 li a:visited{ display: block; height: 1%; color: #FFFFFF; background: #3B4E77; margin: 0; padding: 4px 8px; border-bottom: 1px solid #FFFFFF; text-decoration: none;}
#menuDeroulant1 li a:hover { background-color: #99CCFF; }
#menuDeroulant1 li a:active { background-color: #FF3300; }
#menuDeroulant1 .sousMenu1 li a:link,#menuDeroulant1 .sousMenu1 li a:visited{ display: block; color: #FFFFFF; margin: 0; border: 0; text-decoration: none; background-color:#CCCCCC;}
#menuDeroulant1 .sousMenu1 li a:hover{ background-image: none; background-color: #FF3300;}
--></style>



<style type="text/css"><!--
#menuDeroulant2{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant2 li{ float: left; margin: 0; padding: 0; border: 0;}

#menuDeroulant2 li:hover > .sousMenu2 { display: block; }

#menuDeroulant2 .sousMenu2{ list-style-type: none; margin: 0; padding: 0; border: 0;}
#menuDeroulant2 .sousMenu2{ display: none; list-style-type: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant2 .sousMenu2 li{ float: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant2 li{ float: left; width: 200px; margin: 0; padding: 0; border: 0; font-size:11px;}

#menuDeroulant2{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0;position: absolute; top: 100;z-index:999;}

#menuDeroulant2 li a:link, #menuDeroulant2 li a:visited{ display: block; height: 1%; color: #FFFFFF; background: #3B4E77; margin: 0; padding: 4px 8px; border-bottom: 1px solid #FFFFFF; text-decoration: none;}
#menuDeroulant2 li a:hover { background-color: #99CCFF; }
#menuDeroulant2 li a:active { background-color: #FF3300; }
#menuDeroulant2 .sousMenu2 li a:link,#menuDeroulant2 .sousMenu2 li a:visited{ display: block; color: #FFFFFF; margin: 0; border: 0; text-decoration: none; background-color:#CCCCCC;}
#menuDeroulant2 .sousMenu2 li a:hover{ background-image: none; background-color: #FF3300;}
--></style>



<style type="text/css"><!--
#menuDeroulant3{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0;position: absolute; top: 100;z-index:998;}

#menuDeroulant3 li{ float: left; margin: 0px; padding: 0; border: 0;}

#menuDeroulant3 li:hover > .sousMenu3 { display: block; }

#menuDeroulant3 .sousMenu3{ list-style-type: none; margin: 0; padding: 0; border: 0;}
#menuDeroulant3 .sousMenu3{ display: none; list-style-type: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant3 .sousMenu3 li{ float: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant3 li{ float: left; width: 200px; margin: 0; padding: 0; border: 0; font-size:11px;}

#menuDeroulant3{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0; }

#menuDeroulant3 li a:link, #menuDeroulant3 li a:visited{ display: block; height: 1%; color: #FFFFFF; background: #3B4E77; margin: 0; padding: 4px 8px; border-bottom: 1px solid #FFFFFF; text-decoration: none;}
#menuDeroulant3 li a:hover { background-color: #99CCFF; }
#menuDeroulant3 li a:active { background-color: #FF3300; }
#menuDeroulant3 .sousMenu3 li a:link,#menuDeroulant3 .sousMenu3 li a:visited{ display: block; color: #FFFFFF; margin: 0; border: 0; text-decoration: none; background-color:#CCCCCC;}
#menuDeroulant3 .sousMenu3 li a:hover{ background-image: none; background-color: #FF3300;}
--></style>



<style type="text/css"><!--
#menuDeroulant4{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant4 li{ float: left; margin: 0px; padding: 0; border: 0;}

#menuDeroulant4 li:hover > .sousMenu4 { display: block; }

#menuDeroulant4 .sousMenu4{ list-style-type: none; margin: 0; padding: 0; border: 0;}
#menuDeroulant4 .sousMenu4{ display: none; list-style-type: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant4 .sousMenu4 li{ float: none; margin: 0; padding: 0; border: 0;}

#menuDeroulant4 li{ float: left; width: 200px; margin: 0; padding: 0; border: 0; font-size:11px;}

#menuDeroulant4{ width: 100%; list-style-type: none; margin: 0; padding: 0; border: 0; position: absolute; top: 100;z-index:997;}

#menuDeroulant4 li a:link, #menuDeroulant4 li a:visited{ display: block; height: 1%; color: #FFFFFF; background: #3B4E77; margin: 0; padding: 4px 8px; border-bottom: 1px solid #FFFFFF; text-decoration: none;}
#menuDeroulant4 li a:hover { background-color: #99CCFF; }
#menuDeroulant4 li a:active { background-color: #FF3300; }
#menuDeroulant4 .sousMenu4 li a:link,#menuDeroulant1 .sousMenu4 li a:visited{ display: block; color: #FFFFFF; margin: 0; border: 0; text-decoration: none; background-color:#CCCCCC;}
#menuDeroulant4 .sousMenu4 li a:hover{ background-image: none; background-color: #FF3300;}
--></style>


Première partie du code :
Il suffit de remplacer les noms des catégories (le titre des cases du menu sans dérouler), ensuite de modifier le titre des liens de la catégorie (ce qui s'affiche en se déroulant lors du passage sur le titre de la catégorie) puis de modifier les liens correspondants.

La dernière partie du code se compose de 4 paragraphes c'est pour la personnalisation, il faut alors modifier les couleurs, les dimensions pour que ça s'adapte harmonieusement à votre blog. Et ce pour chaque paragraphe, soit 4 fois.
Tout d'abord les dimensions. Ici la case de menu sera de 200px de large à vous de mettre ce qui vous convient. 11px c'est la taille de la police.
Premiere ligne : FFFFFF c'est blanc et c'est la couleur du texte - 3B4E77 c'est bleur et c'est la couleur de fond des catégories sans survol de la souris - FFFFFF c'est blanc et c'est le petit trait horizontal qui sépare les catégories.
Deuxième ligne : 99CCFF c'est bleu clair et c'est la couleur de fond de la catégorie au survol de la souris.
Troisième ligne : FF3300 c'est orange et c'est la couleur de fond lorsqu'un lien du menu est cliqué.
Quatrième ligne: FFFFFF c'est blanc et c'est la couleur du texte des sous-menus - CCCCCC c'est gris et c'est la couleur de fond des sous-menus lorsqu'ils se déroulent et qu'ils ne sont pas survolés par la souris.
Cinquième ligne : FF3300 c'est orange et c'est la couleur des sous-menus lorsqu'ils sont survolé par la souris.


Il est aussi possible de modifier ce menu dans le blog ou la page avec la même précision que le code pour le menu horizontal : Menu déroulant en css et html (2)

Pour plus de facilité, vous pouvez télécharger le code en fichier zip ici.

Partager cet article

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article

commentaires

lecteur1 25/12/2009 18:35


Question réglée en définissant le module texte libre par un code xhtml et en fixant la hauteur dans le fichier CSS
Autre question : j'ai voulu "simplifier" les couleurs caractères noirs, survol rouge et fon blanc. Conséquence : les sous catégories d'une catégorie sont recouvertes par le titre des catégories en
dessous. Est ce normal avec ce code . Est on obligé de prendre des couleurs ad hoc pour jouer sur la superposition


Christelle Vinsonneau 27/12/2009 14:57



Et oui.... c'est la solution.


Il n'est pas normal qu'en modifiant les couleurs, la mise en place du menu soit modifiée.


Tu devrais retenter avec le code de base, puis tu devrais tenter en le modifiant sans l'interface d'over-blog, car parfois ça "grignotte" des bouts de code et ça modifie des trucs qui ne
devraient pas bouger.


Le menu est tout à fait personnalisable.



lecteur1 21/12/2009 22:33


Merci pour ce tutorial efficace. Un dernier problème en suspens : j'ai mis le code dans un module texte libre d'over blog. Je ne parviens pas à modifier la taille en hauteur de ce module. Aussi le
menu déroulant "mord" sur la fenêtre du module. Comment faire pour que la hauteur du module s'adapte au menu déroulant avec des catégories et sous catégories qui augmenteront.
Merci


VANESSA 28/11/2009 15:59


merci bcp pour avoir pris le temps de me ré expliquer.
on va essayer.... mais je ne peux pas faire copier alors ? !


Christelle Vinsonneau 06/12/2009 12:05


Bien sur que si...
Pour copier (si tu a IE) tu sélectionnes avec ta souris (ou ton pad), ensuite tu tapes simultanément Ctrl et C ensuite tu vas sur ton éditeur et tu colles normalement.
Tu modifies ensuite les mots, les couleurs et les liens qui correspondent à ton blog et au menu que tu veux créer.


VANESSA 25/11/2009 15:56


Merci de m'avoir répondu mais je ne suis pas plus avancée désolée, dans par exemple le premier menu déroulant1 tu as 4 lignes en orange ?? et à chaque ligne tu as http ........ et ensuite d'autres
choses en orange
je voulais faire un copie collé mais je n'ai pas pu pour voir chez toi à quoi ça peut correspondre ? où est ce que je vais chercher ce que je dois mettre en orange, si c'est une photo je ne peux
pas
bon je lache l'affaire je ne suis pas une pro du langage internet.Dommage car ça m'aurait bien plu mais je ne comprends rien du tout snif !


Christelle Vinsonneau 25/11/2009 16:05


C'est pourtant pas compliqué :
 
Catégorie1  (ici tu remplaces http://... par la page,
ou l'article, ou le blog, ou le siute que tu veux mettre en lien sur le prmier bouton - Tu remplaces catégorie 1 par le nom que tu désires afficher sur le même premier bouton- Sur l'exemple de cet
article le bouton 1 s'appelle catégorie 1)

Lien 1 de la catégorie 1 (ici tu remplaces
http://... par le lien de ton premier sous-menu (le sous-menu c'est ce qui s'affiche quand tu passes avec ta souris sur le bouton) de ton premier bouton (celui qu'on a vu précédemment) - tu
remplaces le texte "lien 1 de la catégorie" par le texte que tu veux pour ton premier sous-menu- Sur l'exemple de cet article, le sous-menu 1 s'appelle lien 1 de la catégorie 1)
Lien 2 de la catégorie 1 (ici tu remplaces
http://... par le lien de ton deuxième sous-menu (le sous-menu c'est ce qui s'affiche quand tu passes avec ta souris sur le bouton) de ton premier bouton - tu remplaces le texte
"lien 2 de la catégorie 1" par le texte que tu veux pour ton deuxième sous-menu- Sur l'exemple de cet article, le sous-menu 2 s'appelle lien 2 de la catégorie 1)

Lien 3 de la catégorie 1 (ici tu remplaces
http://... par le lien de ton troisième sous-menu (le sous-menu c'est ce qui s'affiche quand tu passes avec ta souris sur le bouton) de ton premier bouton - tu remplaces le texte
"lien 3 de la catégorie 1" par le texte que tu veux pour ton troisième sous-menu- Sur l'exemple de cet article, le sous-menu 3 s'appelle lien 3 de la catégorie 1)




Et tu refais pareil pour chaque paragraphe. Chaque paragraphe correspond à un bouton (le premier bouton 1, le deuxième bouton 2...)


enrico 17/11/2009 19:11


Bonjour et merci pour ce tutos qui nous offre un menu extremement agréable.

Cependant ce menu vertical s'ouvre vers le bas (et chevauche donc les menus d'en dessous), et je souhaite donc pour plusieurs raisons (dont celle évoqué juste avant) qu'il s'ouvre sur la droite ...
j'ai beau trifouillé , impossible de trouver la solution, aidez moi s'il vous plait c'est capital :(

Une petite question annexe (sans importance comparée a l'autre) : j'ai beau cherché dans le css ou dans l'html je ne vois rien qui défini la couleur du bouton. Comment se fait il que les boutons de
ce menu soient bleu si cete couleur n'est definie nul part ?? lol

Merciii


Christelle Vinsonneau 25/11/2009 15:53


Il suffit juste de modifier le code au niveau des indications margin au niveau des sous-menus. "margin-left:100px"
Quant à la couleur du bouton, elle est bien indiquée dans le code (c'est #3B4E77 pour le bleu foncé et #99CCFF pour le bleu
clair).