Tutoriels ⇒ HTML5 CSS3 facebook twitter youtube

Menu en HTML5 | Menu en HTML5


Pour accéder aux différentes pages qui composent un site Web, le plus simple consiste à utiliser un menu. On va vous montrer comment créer un menu vertical flottant,
un menu horizontal, et comment réagir aux actions de l’utilisateur dans le menu via du code CSS et jQuery.

Menu vertical flottant en HTML5

La balise <menu> est apparue dans le langage HTML5. Cette balise fait exactement ce que son nom suggère, c’est-à-dire définir un menu dans une page Web, mais elle n’est pour l’instant pas implémentée par les navigateurs actuels. Nous nous orienterons donc vers une solution alternative composée de code HTML et CSS.

Pour créer un menu vertical, nous utiliserons une liste à puces <ul>, légèrement modifiée par un style CSS.

Menu horizontal en HTML5

Pour créer un menu horizontal, le plus simple consiste à utiliser une liste ul et à affecter la  valeur inline-block à la propriété display des éléments li de cette liste. Ainsi, ces derniers ne seront pas affichés verticalement, en tant que blocs, mais horizontalement, sur une même ligne

Menu déroulant

Pour créer un menu déroulant, il suffit d’imbriquer deux listes <ul>, la première contenant les entrées principales du menu et la seconde, les entrées secondaires



Pour créer un menu vertical, nous utiliserons une liste à puces
    , légèrement modifiée par un style CSS. Voir Plus
Pour créer un menu horizontal, le plus simple consiste à utiliser une liste ul et à affecter la valeur inline-block à la propriété display des éléments li de cette liste. Ainsi, ces derniers ne seront pas affichés verticalement, en tant que blocs, mais h Voir Plus
Voyons en quelques lignes de CSS comment faire fonctionner un centrage de liens dans un menu horizontal sur tous les navigateurs. Voir Plus



>
Changer le fond
Oregionale Skin
7astuces
Sélectionnez un Fond (11)
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces
Fond de contenu
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces