Comment faire Submenus en HTML

October 10

Les menus HTML simples sont construites sur des listes à puces. Les listes sont ensuite transformées en menus plus complexes en utilisant le CSS (Cascading Style Sheets) code. Les sous-menus sont ajoutés par les listes à puces de nidification à l'intérieur des éléments de liste. Même si un menu de base sidebar-style peut montrer un sous-menu comme une liste en retrait de liens, vous pouvez également les faire travailler comme déroulantes pour les barres de menus horizontaux. La technique de sous-menus déroulant est complexe mais peut être fait entièrement en CSS.

Instructions

1 Ouvrez votre page Web dans un éditeur comme Notepad et trouver le code de menu:

<Ul id = "menu">
<Li> <a href="page1.html"> Page One </a> </ li>
<Li> <a href="page2.html"> Page deux </a> </ li>
<Li> <a href="page3.html"> Page trois </a> </ li>
<Li> <a href="page4.html"> Page Quatre </a> </ li>
</ Ul>

Les menus sont généralement codés sous forme de listes à puces, comme indiqué dans l'exemple précédent.

2 Nest une nouvelle liste à puces dans les "<li>" tags pour son élément de niveau supérieur:

<Ul id = "menu">
<Li> <a href="page1.html"> Page One </a> </ li>
<Li> <a href="page2.html"> Page deux </a>

&lt;ul>
&lt;li>&lt;a href=”page2a.html”>Page Two-A&lt;/a>&lt;/li>
&lt;li>&lt;a href=”page2b.html”>Page Two-B&lt;/a>&lt;/li>
&lt;/ul>

</ Li>
<Li> <a href="page3.html"> Page trois </a> </ li>
<Li> <a href="page4.html"> Page Quatre </a> </ li>
</ Ul>

3 Ouvrez la feuille de style de votre site Web et d'écrire une nouvelle règle de style pour les imbriqués "<ul>" tags. Réglez la position du sous-menu "absolue":

Menu ul {

position: absolute;
}

Cela permet de maintenir un sous-menu déroulant de pousser d'autres contenus vers le bas sur la page. Le sous-menu à la place flotter au-dessus du contenu de la page.

4 Ecrire une nouvelle règle de style pour les éléments de liste dans le sous-menu. Décochez la gauche flottante qui fait une barre horizontale afin que vos éléments de sous-menu sera plutôt empiler verticalement vers le bas:

Menu ul li {

clarifier les deux;
largeur: 200px;
}

Ajouter une largeur, comme le montre, si vous voulez. Sinon, le sous-menu étirer pour adapter ses articles.

5 Créer une règle de style qui affecte le sous-menu lorsqu'un utilisateur passe sa souris sur son élément de menu parent. Réglez l'affichage de «bloquer» de sorte que le sous-menu affichera sur un vol stationnaire:

Menu li: hover ul {

bloc de visualisation;
}

6 Retour à la règle de style pour le sous-menu et de le rendre caché par défaut:

Menu ul {

position: absolute;
display: none;
}

Maintenant, un visiteur du site doit planer sur l'élément parent du sous-menu pour faire apparaître le sous-menu. Planant loin fait disparaître à nouveau.

Conseils et avertissements

  • Si vous créez un menu simple barre latérale de style, y compris des listes de liens, alors vous ne devez pas aller au-delà de la deuxième étape. Nest la liste à puces pour le sous-menu et le style avec une indentation: #menu ul {padding-left: 20px; }

          

Post a comment: