[HTML/CSS] Le menu horizontal déroulant.

Users who viewed this discussion (Total:0)

Des faux middlemans contactent les vendeurs et acheteurs. Veuillez rester vigilent pendant vos échanges. le Tag#0123 ne permet pas de confirmer l'identité d'un middleman. Utilisez la methode suivante: Confirmer l'identité d'une personne sur Discord

Les middlemans ne sécurisent PAS par message privé. Merci d'utiliser Market-Maker pour vos transactions avec Middleman: Utilisation de Market-Market

Le Discord officiel de Cheat-Gam3 est disponible ici: Invitation au serveur Discord (UID: 193050136392237066)


Synioa

Membre reconnu
Inscrit
3 Décembre 2012
Messages
1 208
Best answers
0
J'aime
1
Points
243
#1

I- Le code xHtml


Comme pour faire un menu horizontal le code du début est quasiment le même.

PHP:
<ul>
 
        <li>
                <a href="#">accueil</a>
        </li>
         
        <li>
                <a href="#">Tutoriels</a>
        </li>
         
        <li>
                <a href="#">Mon compte </a>
        </li>
         
        <li>
                <a href="#">Astuces</a>
        </li>       
</ul>
Maintenant on va transformer cette liste, en liste contenant des listes.

PHP:
<ul id="menu">
 
        <li>
                <a href="#">accueil</a>
        </li>
         
        <li>
                <a href="#">Tutoriel </a>
                <ul>
                        <li><a href="#">Tutoriel1</a></li>
                        <li><a href="#">Tutoriel2</a></li>
                </ul>
        </li>
         
        <li>
                <a href="#">Mon compte </a>
                <ul>
                        <li>
                                <a href="#">Mes information</a>
                        </li>
                        <li>
                                <a href="#">Mon mur </a>
                        </li>
                </ul>
        </li>
         
        <li>
                <a href="#">Astuces</a>
                <ul>
                        <li><a href="#">Astuces1</a></li>
                        <li><a href="#">Astuces2</a></li>
                </ul>
      
         
</ul>

II-Le CSS
Adaptons la forme des listes (balises <ul></ul>) .

PHP:
#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 */
}
le contenu des listes (balises de liens)

PHP:
#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>).

PHP:
#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               
{
        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 */
}



On na bien progresser mais pour listant ce n'est pas un menu déroulant.

Au passage de la souris sur l'un des contenus des listes (balises de liens), inversons les couleurs
PHP:
#menu a:hover /* Lorsque la souris passe sur un des liens */   
{
        color: #000; /* On passe le texte en noir... */
        background: #fff; /* ... et au contraire, le fond en blanc */
}
III-Adaptation

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

PHP:
#menu a
{
        display : block;
        padding : 0;
        background : #000;
        color : #fff;
        text-decoration : none;
        width : 144px; /* <<<<<< ICI */
}
 
...
 
#menu li ul
{
        position: absolute;
        width: 144px; /* <<<<<< ET ICI */
        visibility: hidden;
}
 
...
 
 
#menu li ul ul
{
        margin    : -22px 0 0 144px ;
        border-left     : 1px solid #fff ; /* <<<<<< sans oublier ICI */
}
Il suffit de remplacer cette largeur en pixels par un pourcentage.



La couleur du est menu en noir et blanc, mais il ne tient qu'à vous de modifier les couleurs.

PHP:
#menu a
{
        display : block;
        padding : 0;
        background : #000; /* Couleur du fond, actuellement = noir */
        color : #fff; /* Couleur du texte, actuellement = blanc */
        text-decoration : none;
        width : 144px;
}
 
/* Inversement des couleurs lorsque la souris passe */
 
#menu a:hover
{
        color : #000; /* Noir */
        background : #fff; /* Blanc*/
}
 

Evaelis

La Voix de la Sagesse
Membre du personnel
Administrateur
Inscrit
28 Avril 2010
Messages
22 405
Best answers
3
J'aime
271
Points
1 519
#2
I- Le code xHtml
Du Xhtml signifie que ton css est directement implanté sur ton html, ici on a juste du html ^^
PS : Tu passe dans mon tutoriel "Vers le webdesign"