Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

 

Comment créer des sous-menu

Les sous-menu permettent la navigation optimale dans un menu du site comme ils permettent l'optimisation de l'espace. Ainsi, sans être amené à afficher tous lles éléments d'un menu per souci d'esthétique ou par souci de gain d'espace, nous pouvons créer des sous-menu relatifs à un menu. Ce sont des menus parents à un autre menu.

Pour créer un sous menu, on procède de cette façon:

Supposons que vous avez un élément de votre menu

<li> <a href="produits.html">Produits</a></li> 

Et que vous voulez lui ajouter un sous-menu avec 1 lien, alors ce sera:

<li> <a href="nature-animaux.html">Nature et Animaux</a>
<ul>
<li> <a href="animaux.html">Animaux</a> </li>

Vous pouvez ajouter autant de sous-menu de la même façon. Remarquez que le lien du menu commence par <li>, c'est on veut le terminer sans sous-menu, on ferme par </li> et si on veut ajouter un sous menu à l'élément parent (ici "Nature et Animaux"), on commence par <ul> puis <li> et on termine par la fermeture </li>

Si on assimile le principe, on peut ajouter plusieurs sous-menu et on peut aussi ajouter des sous-menu aux sous-menu (Child item)!

Comme ça:

On veut ajouter un Child item à "Animaux"

Donc on a "Nature et Animaux" comme élément parent et "Animaux" comme sous menu. On ajoute des Child item à "Animaux"

<li> <a href="nature-animaux.html">Nature et Animaux</a>
<ul>
<li> <a href="animaux.html">Animaux</a><ul>
<li><a href="mammiferes.html">Mammifères</a></li>

Voilà, on a ceci: Nature et Animaux > Animaux > Mammifères

Le même procédé pour ajouter un Child menu à "Nature" et la même façon pour ajouter d'autres éléments aux Child item "Mammifères"

Le résulat final:

<li> <a href="nature-animaux.html">Nature et Animaux</a>
<ul>
<li> <a href="nature.html">Nature</a> </li>
<li class="current"> <a href="animaux.html">Animaux</a>
<ul>
<li><a href="mammiferes.html">Mammifères</a>
<ul>
<li class="current"><a href="marins.html">Marins</a></li>
<li><a href="terrestres.html">Terrestres</a></li>
<li><a href="autres.html">Autres</a></li>
</ul>
</ul>
</li>
</ul>
</li>

L'élément 1er du menu:

menu

Lors du passage du pointeur:

sous-menu

Lores du passage du pointeur sur "Animaux:

Créer des sous-menu

Remarquez que les sous-menu n'apparaîssent que lors du passage du pointeur de la souris.

L'apparence des menus dépend de la feuille de style utilisée.

   

 

Voir ce tutoriel sur la façon de créer des menus déroulants et des sous-menu en utilisant les objets Spry dans Dreamweaver

Dreamweaver® est une marque déposée d'Adobe® Systems Incorporated. Les logos et les noms de marques cités dans ce site sont les propriétés respectives de leurs développeurs.

 

Création de sites web

hit counter