La révolution CSS 2 !

Accueil :: Contact :: Liens
Menu Accueil
::: Introduction ::: Syntaxe ::: Flux ::: Propriétés ::: Menu déroulant ::: Exemples ::: Divers
Faire des beaux menus avec css

Le plus simple est de cliquer sur le premier lien et de se laisser guider.

Menu déroulant vertical à position fixe

Voir le style en menu déroulant (ouvrir avec différents browsers).

Télécharger le fichier css

Cela demande un peu d'explication :

    /*-----------------*/
    /* Le bloc du menu */
    /*-----------------*/

    div#nav {
    	position: absolute;	/* Le menu échappe au flux normal et se positionne par defaut en haut
    à gauche de son conteneur */
    	width: 150px;		/* On définit ici la largeur du menu */
    	margin-top: 5px;	/* La marge supérieure correspond à l'espacement par rapport au haut
    du conteneur */
    	border: 1px solid #000000;
    }

    #conteneur > div#nav {
    	position: fixed;	/* Pour tous les navigateurs sauf IE : le menu restera fixe par rapport à
    l'écran, cette propriété remplace la position: absolute; */
    }

    /*--------------------------------------*/
    /* La liste des liens composant le menu */
    /*--------------------------------------*/

    div#nav ul {
    	margin: 0;
    	padding: 0;
    	width: 150px;
    	background-image: url("images/img04.jpg");
    	background: #adb0b9;
    }

    /*--------------------------------------------*/
    /* Chaque bloc contenant un lien dans le menu */
    /*--------------------------------------------*/

    div#nav li {
    	position: relative;	/* Toute entité définie dans un de ces blocs se positionnera par rapport
    à celui-ci */
    	list-style: none;	/* Aucune puce devant les liens */
    	margin: 0;
    	border-bottom: 1px solid transparent;
    }

    /*------------------------*/
    /* Au survol de ces blocs */
    /*------------------------*/

    div#nav li:hover {
    	background: #adb0b9;	/* On change l'arrière-plan, pour signifier que le survol est reconnu */
    }

    /*-----------------------*/
    /* Les liens en eux-même */
    /*-----------------------*/

    div#nav li a {
    	display: block;		/* Ils seront affichés en colonne */
    	padding-top: 0.25em;	/* La marge intérieure permet d'agrandir les cases, ici en hauteur, et de
    positionner les liens avec precision dedans */
    	padding-bottom: 0.25em;
    	text-decoration: none;	/* Les liens n'ont plus de marque distinctive */
    	font-weight: bold;
    	color: #000000;
    	width: 100%;
    }

    div#nav ul a {
    	width: auto;
    }

    /*------------------*/
    /* Chaque sous-menu */
    /*------------------*/

    div#nav ul ul {
    	position: absolute;
    	top: 0;
    	left: 150px;		/* Décalage de 150 pixels vers la droite, pour que le sous-menu ne recouvre
    pas le reste du menu */
    	display: none;		/* Par défaut, aucun sous-menu n'est visible */
    	border: 1px solid #000000;
    }

    /*----------------------------------------*/
    /* Au survol d'un lien ayant un sous-menu */
    /*----------------------------------------*/

    div#nav ul.level1 li.submenu:hover ul.level2,
    div#nav ul.level2 li.submenu:hover ul.level3
    {
    	display: block;		/* Fait apparaître le menu de niveau supérieur, dont les liens seront
    en colonne */
    }

Variantes du menu déroulant vertical à position fixe avec des puces cette fois-ci

Cette version n'est pas comptatible avec IE

Voir l'exemple avec des puces

Télécharger le fichier css

Le même menu déroulant vertical mais en modifiant les arrières plans.

Voir l'exemple avec les arrières plans

Télécharger le fichier css

Autre variante du menu déroulant.

Voir l'exemple avec les arrières plans

Télécharger le fichier css

Autre variante du menu déroulant mais à l'hozizontal cette-fois.

Voir l'exemple horizontal

Télécharger le fichier css