Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Créer un menu horizontal déroulant en CSS Par Antoine Estève (Toinouz) www.open

Créer un menu horizontal déroulant en CSS Par Antoine Estève (Toinouz) www.openclassrooms.com Licence Creative Commons 6 2.0 Dernière mise à jour le 14/08/2009 Sommaire 2 Sommaire ........................................................................................................................................... 3 Créer un menu horizontal déroulant en CSS ..................................................................................... 3 Le xHTML .......................................................................................................................................................................... 3 Rappel ......................................................................................................................................................................................................................... 6 Le CSS .............................................................................................................................................................................. 8 Code CSS complet ...................................................................................................................................................................................................... 9 CSS + JavaScript .............................................................................................................................................................. 11 Adapter ............................................................................................................................................................................ 11 Largeur ...................................................................................................................................................................................................................... 12 Couleur ...................................................................................................................................................................................................................... 12 Images et transparence ............................................................................................................................................................................................ 12 Optimisation .............................................................................................................................................................................................................. 13 Flash .......................................................................................................................................................................................................................... 14 Partager ..................................................................................................................................................................................................................... 2/15 www.openclassrooms.com Créer un menu horizontal déroulant en CSS Par Antoine Estève (Toinouz) Mise à jour : 14/08/2009 Difficulté : Facile Salut les zéros. Je vais aujourd'hui essayer de vous aider à créer un menu déroulant pour votre site ! Ce menu déroulant est réalisé en xHTML/CSS, et utilise un brin de Javascript pour permettre une compatibilité avec les anciennes versions d'Internet Explorer. Il a été testé sous Internet Explorer 6, Internet Explorer 7, Internet Explorer 8, Mozilla Firefox 2, Mozilla Firefox 3, Google Chrome ou encore Opéra et Safari ! De plus, il est valide xHTML strict ! Pour pouvoir réaliser ce menu déroulant, vous devez avoir lu le tutoriel de M@teo21 : Site Web ! Le niveau bac + 4 est aussi demandé ! Une fois ce tutoriel terminé, vous serez capables de réaliser un menu comme celui-ci, ou un beaucoup plus beau. Bonne chance à vous... Sommaire du tutoriel : Le xHTML Le CSS CSS + JavaScript Adapter Le xHTML V oilà, nous sommes partis ! Pour commencer ce tutoriel, nous allons étudier la structure xHTML à mettre en place. Pour réaliser le menu déroulant, nous allons utiliser les balises de listes et non les tableaux. Rappel V oici comment se compose une liste en xHTML : <ul></ul> liste à puces non numérotée ; <ol></ol> liste à puces numérotée ; <li></li> élément de liste. (Je ne parle pas des listes de définitions intentionnellement pour ne pas créer de confusion, mais vous pouvez retrouver la liste de ces balises avec des exemples dans la partie annexe du tuto Site Web sur les balises xHTML.) Sommaire 3/15 www.openclassrooms.com Nous n'utiliserons pas les listes à puces numérotées pour une question d'esthétique. Nous nous retrouvons donc avec les balises <ul></ul> et <li></li>. Utilisées de cette manière : Code : HTML <ul> <li>Un premier élément de la liste</li> <li>Un deuxième élément de la liste</li> </ul> Imaginez que l'on désire un menu déroulant en plusieurs parties : accueil ; membres ; images ; téléchargements ; plus. V oilà alors le code xHTML que l'on doit utiliser : Code : HTML <ul> <li> <a href="#">accueil</a> </li> <li> <a href="#">membres</a> </li> <li> <a href="#">images</a> </li> <li> <a href="#">téléchargements</a> </li> <li> <a href="#">plus</a> </li> </ul> Imaginez maintenant transformer cette liste, en liste contenant des listes. 1, 2, 3, Code : HTML <ul id="menu"> <li> <a href="#">accueil</a> </li> <li> <a href="#">membres</a> Créer un menu horizontal déroulant en CSS 4/15 www.openclassrooms.com <ul> <li><a href="#">connexion</a></li> <li><a href="#">inscription</a></li> </ul> </li> <li> <a href="#">images</a> <ul> <li> <a href="#">photos</a> </li> <li> <a href="#">vidéos</a> </li> </ul> </li> <li> <a href="#">téléchargements</a> <ul> <li><a href="#">vidéos</a></li> <li><a href="#">musiques</a></li> </ul> </li> <li> <a href="#">plus</a> <ul> <li><a href="#">forum</a></li> <li><a href="#">liens</a></li> <li><a href="#">nous contacter</a></li> <li><a href="#">team</a></li> <li><a href="#">recherche</a></li> </ul> </li> </ul> Mais si on veut encore plus développer le menu déroulant : Code : HTML <ul id="menu"> <li> <a href="#">accueil</a> </li> <li> <a href="#">membres</a> <ul> <li><a href="#">connexion</a></li> <li><a href="#">inscription</a></li> </ul> </li> <li> <a href="#">images</a> <ul> <li> <a href="#">photos</a> <ul> <li><a href="#">catégorie 1</a></li> <li><a href="#">catégorie Créer un menu horizontal déroulant en CSS 5/15 www.openclassrooms.com 2</a></li> </ul> </li> <li> <a href="#">vidéos</a> </li> </ul> </li> <li> <a href="#">téléchargements</a> <ul> <li><a href="#">vidéos</a></li> <li><a href="#">musiques</a></li> </ul> </li> <li> <a href="#">plus</a> <ul> <li><a href="#">forum</a></li> <li><a href="#">liens</a></li> <li><a href="#">nous contacter</a></li> <li><a href="#">team</a></li> <li><a href="#">recherche</a></li> </ul> </li> </ul> Nous allons donc créer un fichier CSS afin que la liste de base soit horizontale, et qu'au passage de la souris sur l'un des éléments de cette liste, la liste contenue dans cet élément soit à son tour affichée... Et ainsi de suite. (J'ai mis id="menu" afin de travailler uniquement sur cette liste et donc ne pas déformer les autres listes de votre site. De plus ce sera utile pour le CSS.) En avant, le plus dur facile est derrière nous. Le CSS Bon : si vous avez essayé le code xHTML précédent, vous avez alors tout de suite vu que ce n'était qu'une liste qui contient des listes dans ses éléments. C'est pour cela que les CSS doivent intervenir afin de mettre en forme l'ensemble. (Je vous conseille de revoir vos connaissances en CSS si vous avez des doutes.) Commençons doucement ... Adaptons la forme des listes (balises <ul></ul>) ... Code : CSS #menu, #menu ul /* Liste */ { padding : 0; /* pas de marge intérieure */ margin : 0; /* ni extérieure */ list-style : none; /* on supprime le style par défaut de la liste */ line-height : 21px; /* on définit une hauteur pour chaque élément */ text-align : center; /* on centre le texte qui se trouve dans la liste */ } Créer un menu horizontal déroulant en CSS 6/15 www.openclassrooms.com #menu /* Ensemble du menu */ { font-weight : bold; /* on met le texte en gras */ font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */ font-size : 12px; /* hauteur du texte : 12 pixels */ } ... le contenu des listes (balises de liens) ... Code : CSS #menu a /* Contenu des listes */ { display : block; /* on change le type d'élément, les liens deviennent des balises de type block */ padding : 0; /* aucune marge intérieure */ background : #000; /* couleur de fond */ color : #fff; /* couleur du texte */ text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */ width : 144px; /* largeur */ } ... et les éléments des listes (balises <li></li>) et les listes (balises <ul></ul>). Code : CSS #menu li /* Éléments des listes */ { float : left; /* pour IE qui ne reconnaît pas "transparent" */ border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */ } /* IE ne reconnaissant pas le sélecteur ">" */ html>body #menu li { border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */ } #menu li ul /* Sous-listes */ { position: absolute; /* Position absolue */ width: 144px; /* Largeur des sous-listes */ left: -999em; /* Hop, on envoie loin du champ de vision */ } #menu li ul li /* Eléments de sous-listes */ { /* pour ie qui ne reconnaît pas "transparent" (comme précédemment) */ border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous-liste */ } /* IE ne reconnaissant pas le sélecteur ">" */ html>body #menu li ul li Créer un menu horizontal déroulant en CSS 7/15 www.openclassrooms.com { border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */ } #menu li ul ul { margin : -22px 0 0 144px ; /* On décale les sous-sous- listes pour qu'elles ne soient pas au dessus des sous-listes */ /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */ border-left : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */ } /* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */ html>body #menu li ul ul { border-left : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */ } IE : Internet Explorer Aidez-vous des commentaires pour comprendre ! Code CSS complet Code : CSS #menu, #menu ul /* Liste */ { padding : 0; /* pas de marge intérieure */ margin : 0; /* ni extérieure */ list-style : none; /* on supprime le style par défaut de la liste */ line-height : 21px; /* on définit une hauteur pour chaque élément */ text-align : center; /* on centre le texte qui se trouve dans la liste */ } #menu /* Ensemble du menu */ { font-weight : bold; /* on met le texte en gras */ font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */ font-size : 12px; /* hauteur du texte : 12 pixels */ } #menu a /* Contenu des listes */ { display : block; /* on change le type d'élément, les liens deviennent des balises de type block */ padding : 0; /* aucune marge intérieure */ background : #000; /* couleur de fond */ color : #fff; /* couleur du texte */ text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */ width : 144px; /* largeur */ } Créer un menu horizontal déroulant en CSS 8/15 www.openclassrooms.com #menu li /* Elements des listes */ { float : left; /* pour IE qui uploads/S4/ creer-un-menu-horizontal-deroulant-en-css.pdf