Tout d'abord, nous allons commencer avec le code HTML qui est nécessaire pour le menu déroulant. Commencez par créer un div emballage. J'ai appelé ce # nav dans cet exemple. Nous allons créer notre menu déroulant avec les listes à puces. Comme vous pouvez le voir dans le code ci-dessous nous avons une norme liste non ordonnée qui abrite l'ensemble de notre navigation .Maintenant, les principales navigation articles sont accueil, À propos de moi, Portfolio, et Contact. La liste déroulante articles sont sur le Web, d'impression et des photos. Jetez un oeil à l'élément de liste où portefeuille est, je l'ai en gras pour que vous puissiez mieux voir. Notez que la balise fermante </ li> est plus bas dans le code (cette balise est également en caractères gras). Nous mettons une autre liste non-ordonnée à l'intérieur de la LI qui a portefeuille dans celui-ci (liste non-ordonnée Le second est bleu). Cette deuxième liste non ordonnée sera le menu déroulant lorsque quelqu'un plane sur portefeuille.
Le code HTML
< div id = "nav">
< ul >
< li class = "first"> < a href = "#"> Accueil </ a > </ li >
< li > < a href = "#"> À propos de moi </ a > </ li >
< li > < a href = "#"> Portfolio </ a >
< ul >
< li > < a href = "#"> Web </ a > </ li >
< li > < a href = "#"> Imprimer </ a > </ li >
< li > < a href = "#"> Photos </ a > </ li >
</ ul >
</ li >
< li > < a href = "#"> Contactez-moi </ a > </ li >
</ ul >
</ div >
Ok c'est tout pour le HTML au CSS
Le CSS
Nous avons d'abord configurer le div # nav. Donnez-lui une largeur et une hauteur et une taille de police. Cela peut prendre quelques petits ajustements à la largeur et la hauteur, si vous modifiez la valeur font-size, si juste être conscient de cela. La prochaine ligne de code que vous voyez ce qui affecte l'ul # nav, est utilisé pour se débarrasser des puces. Depuis que nous avons mis notre navigation dans une liste par défaut, il a des puces, de sorte list-style-type: none, prend soin de cela.
* { marge : 0px ; padding : 0px ;}
# Non {
font-family : Arial , sans-serif ;
poste : rapport ;
largeur : 390px ;
hauteur : 56px ;
font-size : 14px ;
couleur : # 999 ;
marge : 0px auto ;
}
#nav ul {
list-style-type : aucune ;
}
Ce morceau de code est ce qui rend notre navigation. Si vous laissez le float: left ici la navigation serait toujours verticale. N'OUBLIEZ PAS de positionner ce rapport, parce que notre déroulant articles sera absolue et se nourrissent de cette position relative
# Nav ul li {
flotteur : gauche
poste : rapport ;
}
Ces modèles sont fournies à la balise d'ancrage situé à l'intérieur de chacune des listes. Nous devons utiliser le bloc d'affichage pour que la zone cliquable à bouton ensemble et pas seulement le texte. Nous aligner le centre du texte à des fins de style. Nous avons également donner à chaque élément d'un droit frontières pour avoir une belle séparateur entre les deux. * Vous demandez peut-être bien le premier élément de liste a besoin d'une frontière gauche à le compléter ne vous inquiétez pas, nous reviendrons plus tard à cette *
# Nav ul li a {
text-align : Centre ;
border-right : 1px solide # e9e9e9 ;
padding : 20px ;
affichage : bloc ;
text-decoration : aucune ;
couleur : # 999 ;
}
La partie importante
Ces deux éléments sont la partie la plus importante de ce tutoriel. Ceux-ci donnent notre menu déroulant fonctionnalité que nous sommes à la recherche d'.Comme vous pouvez le voir, nous sommes à l'intérieur de notre div nav, puis à l'intérieur de la première liste non ordonnée, puis à l'intérieur du li, puis à l'intérieur NOTRE DEUXIÈME liste non ordonnée. Je sais que ça peut sembler beaucoup, mais il suffit de suivre le sentier. Nous disons qu'il affiche rien parce que nous ne voulons pas qu'il apparaisse que le premier est une liste non ordonnée planait au-dessus.
La deuxième partie est dit lorsque l'utilisateur pointe sur la LI de la première liste non ordonnée, qui est notre maison, À propos de moi etc. boutons affichera alors la deuxième liste non ordonnée qui sont sur le Web, d'impression et des photos.Nous avons également positionner absolue de sorte qu'il reste en place juste sous notre première liste.
# Nav ul ul li {
affichage : aucun
}
# Nav ul li: hover ul {
affichage : bloc ;
la position : absolue ;
}
Ce sont les styles pour les Etats stationnaire de la seconde liste non ordonnée.Je lui ai donné une couleur turquoise mais vous pouvez changer cela en ce que vous voulez.
# Nav ul li: hover ul li a {
affichage : bloc ;
arrière-plan : # 12aeef ;
couleur : # ffffff ;
largeur : 110px ;
text-align : Centre ;
border-bottom : 1px solide # f2f2f2 ;
border-right : aucune ;
}
# Nav ul li: hover ul li a: hover {
arrière-plan : # 6dc7ec ;
couleur : # fff ;
}
The Complete CSS
* { marge : 0px ; padding : 0px ;}
# Non {
font-family : Arial , sans-serif ;
poste : rapport ;
largeur : 390px ;
hauteur : 56px ;
font-size : 14px ;
couleur : # 999 ;
marge : 0px auto ;
}
#nav ul {
list-style-type : aucune ;
}
# Nav ul li {
flotteur : gauche ;
poste : rapport ;
}
# Nav ul li a {
text-align : Centre ;
border-right : 1px solide # e9e9e9 ;
padding : 20px ;
affichage : bloc ;
text-decoration : aucune ;
couleur : # 999 ;
}
# Nav ul ul li {
affichage : aucun
}
# Nav ul li: hover ul {
affichage : bloc ;
la position : absolue ;
}
# Nav ul li: hover ul li a {
affichage : bloc ;
arrière-plan : # 12aeef ;
couleur : # ffffff ;
largeur : 110px ;
text-align : Centre ;
border-bottom : 1px solide # f2f2f2 ;
border-right : aucune ;
}
# Nav ul li: hover ul li a: hover {
arrière-plan : # 6dc7ec ;
couleur : # fff ;
}
Exemple CSS Menu déroulant
Traduction toute pourrie :(
RépondreSupprimer