Cours CSS

Cours création de Menu en CSS


Télécharger Cours création de Menu en CSS

★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :


Créer un menu horizontal déroulant en CSS

Par Antoine Estève (Toinouz)

Licence Creative Commons 6 2.0

Dernière mise à  jour le 14/08/2009

Sommaire

Sommaire ........................................................................................................................................... 2

 Créer un menu horizontal déroulant en CSS ..................................................................................... 3

Le xHTML .......................................................................................................................................................................... 3

Rappel ......................................................................................................................................................................................................................... 3

Le CSS .............................................................................................................................................................................. 6

Code CSS complet ...................................................................................................................................................................................................... 8 CSS + JavaScript .............................................................................................................................................................. 9

Adapter ............................................................................................................................................................................ 11

Largeur ...................................................................................................................................................................................................................... 11

Couleur ...................................................................................................................................................................................................................... 12

Images et transparence ............................................................................................................................................................................................ 12

Optimisation .............................................................................................................................................................................................................. 12

Flash .......................................................................................................................................................................................................................... 13

Partager ..................................................................................................................................................................................................................... 14

Sommaire

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 7Internet Explorer 8Mozilla Firefox 2Mozilla Firefox 3Google ChromeOpéraet! De plus, il est valide xHTML strict !

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

Voilà , 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

Voici 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.)

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

Imaginez que l'on désire un menu déroulant en plusieurs parties :

accueil ; membres ; images ; téléchargements ; plus.

       

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

   

... 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

   

IE : Internet Explorer

Aidez-vous des commentaires pour comprendre !  

Code CSS complet

Code : CSS

   

Il ne reste donc plus qu'à  faire réagir tout à§a au passage de la souris !

CSS + JavaScript

Bon : c'est bien beau, mais ce que nous avons fait avant n'a rien de déroulant. Il faut faire réagir le menu au passage de la souris !

Hop ! Au passage de la souris sur l'un des contenus des listes (balises de liens), inversons les couleurs : Code : CSS

Oui et non, car les anciennes versions d'Internet Explorer n'acceptent la pseudo-classe :hover que sur les liens ...

Or, un menu déroulant interdit aux anciennes versions d'Internet Explorer... ce n'est pas le mieux que l'on puisse faire.

Nous allons donc devoir utiliser une pincée de Javascript (astuce trouvée dans ce tutoriel).

Code : JavaScript

Importez le code ci-dessus sur chaque page o๠sera installé le menu déroulant. Pour cela, deux solutions :

Code : HTML</p>

Ce code écrit en Javascript va mettre automatiquement une classe (sfHover) aux éléments de nos listes.

Au passage de la souris, cette classe est alors retirée. Cela nous permet donc de faire réagir facilement le menu.

Voilà  comment nous allons procéder :

Adapter

 Ce menu ne marche pas bien avec mon site !

Que puis-je faire pour l'adapter à  mon cas ?

Nous allons voir ensemble comment adapter ce menu à  vos différents designs...  

Largeur

Effectivement, ce menu mesure 725 pixels de large... ce n'est pas bien pratique pour les designs extensibles !

De simples modifications permettent de résoudre ce problème...

Code : CSS

Il suffit de remplacer cette largeur en pixels par un pourcentage.

N'oubliez pas de prendre en compte la bordure d'un pixel !

Pour la hauteur, c'est la màªme chose.

Couleur

Images et transparence

Encore plus fort, il est très facile de mettre des images comme fond dans le menu.

De plus, pour donner un effet de transparence, vous pouvez mettre une image en partie transparente et rajouter : Code : CSS

Optimisation

Vos pages sont déjà  très lourdes ? Vous avez peur de ralentir la navigation de vos visiteurs ?

Astuce : utilisez les commentaires conditionnels !

Vous ne connaissez pas ?

Ce tutoriel pourra vous aider : cliquez ici.

Utilisez-les de manière à  ce que le Javascript ne soit là  que pour les utilisateurs d'Internet Explorer.



Exemple :

Code : HTML

Ce commentaire conditionnel n'affiche le javascript que pour les versions d'Internet Explorer inférieures ou égales à  6.

Flash

Lorsque le menu se déroule à  hauteur d'une application flash, les sous menus passent sous l'application et ne sont pas visibles. Ainsi le menu ne peut pas se dérouler s'il est trop près d'une application Flash.

Pour les dernières versions de Mozilla Firefox, d'Internet Explorer, de Google Chrome etc, il existe une solution qui consiste à  rajouter un paramètre à  l'application. Il faut utiliser le paramètre wmode avec l'attribut soit transparent : wmode="transparent", soit en opaque en appliquant un z-index à  l'object.

Voici un exemple concret avec une vidéo YouTube : Citation : Code

<object width="560" height="340">

<param name="movie" value="http://www.youtube.com/v/7H7OoKI5-yg&hl=fr&fs=1&"></param>

<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param> <embed wmode="transparent" src="http://www.youtube.com/v/7H7OoKI5-yg&hl=fr&fs=1&" type="application/xshockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed> </object>

Si vous ne trouvez pas o๠mettre wmode="transparent", vous pouvez rajouter entre les balises <object></object> : Code : HTML

   

D'autres problèmes avec le menu déroulant ? Demandez des conseils sur le Forum, lisez les commentaires de ce tutoriel et documentez vous...

Voilà , c'est déjà  la fin !

J'espère que ce tuto vous aura aidés à  réaliser un menu déroulant pour votre site, cela fait toujours très pro. 

Ps : Vous avez apprécié ce tutoriel et vous avez trouvé des astuces d'adaptation, des soucis de compatibilité, des améliorations possibles ... ? N'hésitez pas à  me prévenir pour les partager.

Je suis également en recherche de traducteurs pour faire profiter de ce tutoriel à  un maximum de personnes. Merci

Partager

Ce tutoriel a été corrigé par les .


959