Menu déroulant en CSS.

Je vous propose aujourd’hui un petit menu déroulant ayant recours au :

  • HTML
  • CSS
  • JAVASCRIPT

Le design de ce menu déroulant est très inspiré de la barre facebook.


Le code proposé a été repris du site du zéro pour être modifié😀 . J’ai laissé les commentaires originaux tout en mettant les miens. Si vous souhaitez plus de détails ou explications n’hésitez pas à nous contacter. Tout en vous rappelant que VOUS pouvez changer le design de ce menu très facilement, je vous suggère de vous exercer à changer le style par exemple, en rajoutant des dégradés.

Remarque : Les # sont à remplacer par des liens😉

Page HTML :

<pre><ul id="menu">

        <li>
                <a href="menu.html">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>

                        </li>
                        <li>
                                <a href="#">vidéos</a>
								<ul>
                                        <li><a href="#">catégorie 1</a></li>
                                        <li><a href="#">catégorie 2</a></li>
                                </ul>
                        </li>
                </ul>
        </li>

        <li>
                <a href="#">médias</a>
                <ul>
                        <li><a href="http://www.youtube.com">vidéos</a></li>
                        <li><a href="http://www.deezer.com">musiques</a></li>
                </ul>
        </li>

        <li>
                <a href="#">plus</a>
                <ul>
                        <li><a href="https://nerdycode.wordpress.com">site</a></li>
                        <li><a href="#">nous contacter</a></li>
                        <li><a href="#">team</a></li>
                        <li><a href="http://www.google.com">recherche</a></li>
                </ul>
        </li>

</ul>

Feuille de style 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 : #3b5998 ; /* couleur de fond */
		background:-moz-linear-gradient(top,#344E84,#3b5998);/*dégradé du bouton*/
    	background:-webkit-gradient(linear, left top, left bottom, from(#344E84), to(#3b5998));
        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 */
		}
#menu a:hover{
    color:#fff;
    background:#587FD4;
}

#menu li /* Elements 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 /* Élé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
		  {
        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 ... */
		}
#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
         {
        left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
         }

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
        {
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
        }
/* 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 */
		}

Code javascript  :

	<script type="text/javascript">
<!--
sfHover = function() {
        var sfEls = document.getElementById("menu").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                        this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
        }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
-->

Petite précision : ce code JS est nécessaire pour les menus déroulants. Donc réutilisable à chaque fois que vous ferez des menus déroulants !😀

Petit bonus :

Page HTML :

<!--Beginning of top bar-->
<div>
                <a>
                    JEU
                </a>
                <span>
					<a href="#" style="text-decoration: none;">contact</a>

                </span>
                <div></div>
            </div>
<!-- End of top bar-->

Code CSS :

.topbar{
	line-height: 36px;
	font-size: 11px;
	background: #3B5998;
	text-transform: uppercase;
	z-index: 9999;
	position: relative;
	box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
}
.topbar a{
	padding: 0px 10px;/*espace les mots*/
	letter-spacing: 1px;
	color:#FFFFFF;/*fond quand on passe la souris dessus*/
}
.topbar a:hover{
	/*background: #F2EBC7;*/
}
.topbar span.right{
	float: right;
}
.topbar span.right a{
	float: left;
	display: block;
}

Couleur utilisée : #3B5998

Pour utiliser la typographie exacte de facebook, je vous invite à télécharger cette typographie et de placer dans .topar {…} (dans votre feuille de style CSS) ceci :

font-family:Facebook Letter Faces,Arial;

Important de mettre Arial, car le navigateur chargera alors la typo Arial si vous ne possédez pas la typographie.
En dernier recours je vous suggère de faire une image (et oui le logo de facebook est une image et non du texte)

2 réflexions sur “Menu déroulant en CSS.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s