CSS3 Navigation-un bel exemple de Navigation CSS3 (2 / 3 étapes)

Étape 2: Les Codes CSS pour la barre de Navigation de CSS3

Propriétés CSS3 the j’ai utilisé pour créer cette barre de navigation de CSS3 incluent CSS3 border-radius, gradient de CSS3, boîte de CSS3, text-shadow, etc.. Selon moi, qu'il n’est pas nécessaire pour moi de vous expliquer le code de chaque style. Cependant, il y a toujours quelques notes pour expliquer les principales parties de la barre de navigation de CSS3 (chaque note est en caractères gras) ; J’espère que ce sera utile pour vous.

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

{} .main-menu
auto de marge : 50px ;
Largeur : 910px ;
}

/ * La partie Logo haut de la page * /
{.Brandnew}
text-align : center ;
Largeur : 908px ;
hauteur : 48px ;
line-height : 48px ;
border : 1px solid rgb(25,25,25) ;
border-radius : 4px 4px 0 0 ;
position : relative ;
Background:-WebKit-Linear-gradient(Top,RGB(49,50,52),RGB(12,13,14)) ;
Background:-moz-Linear-gradient(Top,RGB(49,50,52),RGB(12,13,14)) ;
Background:Linear-gradient(Top,RGB(49,50,52),RGB(12,13,14)) ;
box-shadow : encart 0 1px 0 rgb (62,63,65), encart 1px 0 0 rgba(75,75,80,0.4) ;
}
.Brandnew .btn-groupe {position : absolute ; top: 0; gauche : 8px;}
.Brandnew .search-champ {position : absolute ; top: 0; droite : 20px;}

/ * Le signe au registre partie et * /
.Brandnew bouton {}
hauteur : 27px ;
padding: 0 15px ;
line-height : 25px ;
border : 1px solid rgb(15,15,15) ;
Background:-WebKit-Linear-gradient(Top,RGB(67,68,68),RGB(41,42,43) 50%,rgb(15,16,17)) ;
Background:-moz-Linear-gradient(Top,RGB(67,68,68),RGB(41,42,43) 50%,rgb(15,16,17)) ;
Background:Linear-gradient(Top,RGB(67,68,68),RGB(41,42,43) 50%,rgb(15,16,17)) ;
Color:RGB(200,200,200) ;
box-shadow : encart 0 1px 0 rgb (77,77,78), 1px 0 0 rgb(42,43,44) ;
police-poids : 500 ;
text-shadow : 1px 1px 0 rgb(15,15,16) ;
-webkit-transition : couleur 300ms facilité ;
-moz-transition : couleur 300ms facilité ;
transition : couleur 300ms facilité ;
}
.Brandnew. signer-dans {border-radius : 14px 0 0 14px ; border-droit: 0 none;}
.Brandnew .register {border-radius: 0 14px 14px 0;}

/ * Le Logo * /
.Brandnew .logo {}
Color:RGB(255,255,255) ;
police-taille : 25px ;
font-weight : bolder ;
text-shadow: 0-1px 0 rgb(111,111,111), 0 - 2px 0 rgb(32,33,34) ;
}

/ * La case de recherche * /
.Brandnew d’entrée {}
Largeur : 140px ;
hauteur : 26px ;
border : none ;
padding: 0 0 0 30px ;
border-radius : 13px ;
Color:RGB(255,255,255) ;
background-color:RGB(0,0,0) ;
box-shadow: 0 1px 0 rgb(43,44,45) ;
}
.Brandnew .search-icône {}
position : absolute ;
Display : block ;
Left : 10px ;
haut: 0 ;
police-famille : icône-recherche d’images ;
police-taille : 13px ;
Color:RGB(100,100,100) ;
curseur : pointeur ;
-webkit-transition : couleur 300ms facilité ;
-moz-transition : couleur 300ms facilité ;
transition : couleur 300ms facilité ;
}
/ * L’effet de survol * /
.Brandnew bouton : hover {color:rgb(255,255,255);}
.Brandnew bouton : active {background:-*-linear-gradient(top,rgb(15,16,17),rgb(41,42,43) 50%,rgb(67,68,68));}
.Brandnew .search-icône : hover {color:rgb(255,255,255);}

/ * La partie de barre de Navigation de CSS3 * /
.NAV {background-color : rgb (175,175,175); border-radius: 0 0 4px 4px;}
.NAV > li {float : left;}

/ * Les éléments/boutons de la barre de Navigation * /
.NAV > li > un {}
Display : block ;
Color:RGB(50,50,50) ;
hauteur : 38px ;
police-taille : 13px ;
font-weight : bold ;
line-height : 38px ;
padding: 0 20px ;
border : 1px solid ;
marge-droit : 1px ;
border-color:RGB(254,254,254) rgb(227,227,227) rgb(210,210,210) ;
Background:-WebKit-Linear-gradient(Top,RGB(248,248,248),RGB(184,184,184)) ;
Background:-moz-Linear-gradient(Top,RGB(248,248,248),RGB(184,184,184)) ;
Background:Linear-gradient(Top,RGB(248,248,248),RGB(184,184,184)) ;
text-shadow : 1px 0 0 rgb(229,229,229) ;
}
.NAV > li:first-enfant un {border-radius: 0 0 0 4px;}
.NAV > li:last-enfant {position : relative;}
.NAV > li:last-enfant > un {}
border-radius: 0 4px 0 0 ;
padding: 0 32px 22px 0 ;
margin: 0 ;
}

/ * Le marqueur Triangle de la liste déroulante * /
.NAV > li:last-enfant > un : avant {}
contenu:'' ;
position : absolute ;
droit : 15px ;
haut : 18px ;
border : 5px solid transparent ;
border-color:RGB(50,50,50) transparent transparent transparent ;
}
/ * Le vol stationnaire et l’effet actif des éléments/boutons de Navigation * /
.NAV > li:hover > un {}
border-color:RGB(255,255,255) rgb(240,240,240) rgb(221,221,221) ;
Background:-*-Linear-gradient(Top,RGB(255,255,255),RGB(203,203,203)) ;
}
.NAV > li:not(:last-child) > a: active {background:-*-linear-gradient(top,rgb(203,203,203),rgb(255,255,255));}
.NAV > li:hover ul {display : block;}

/ * Le Menu de liste déroulante * /
{} .plus-sport
position : absolute ;
Largeur : 478px ;
dessus : 100 % ;
droit: 0 ;
marge-haut : 13px ;
Rembourrage : 46px 0 61px 0 ;
border : 1px solid ;
border-color:RGB(250,250,250) rgb(226,226,226) rgb(234,234,234) ;
border-radius : 4px ;
Background:-WebKit-Linear-gradient(Top,RGB(227,227,227),RGB(193,193,193)) ;
Background:-moz-Linear-gradient(Top,RGB(227,227,227),RGB(193,193,193)) ;
Background:Linear-gradient(Top,RGB(227,227,227),RGB(193,193,193)) ;
Color:RGB(0,0,0) ;
afficher : none ;
}

/ * Remplir l’espace entre la barre de Navigation et liste déroulante * /
.plus-sport : avant {}
contenu:'' ;
position : absolute ;
Width : 100 % ;
hauteur : 14px ;
bas : 100 % ;
Left: 0 ;
}

/ * Créer le marqueur Triangle * /
.plus-sport : après {}
contenu:'' ;
position : absolute ;
bas : 100 % ;
droit : 40px ;
Width: 0 ;
hauteur: 0 ;
border : 5px solid transparent ;
border-color : transparent rgb(227,227,227) transparent transparent ;
}

/ * Utilisez display : inline-block pour réaliser des mises en page multicolonnes * /
.plus-sport li {}
Display : inline-block ;
Largeur : 153px ;
vertical-align : top ;
}

/ * style étiquette élément de chaque colonne * /
.plus-sport li un {}
Display : block ;
marge-gauche : 13px ;
Color:RGB(0,0,0) ;
police-taille : 13px ;
font-weight : bold ;
padding : 2px 5px ;
text-shadow : 1px 0 0 rgb(240,240,240) ;
border-radius : 7px ;
}

/ * en-tête * /
{} .header .plus-sport
Display : block ;
position : absolute ;
haut: 0 ;
Left: 0 ;
marge-gauche : 18px ;
line-height : 48px ;
Color:RGB(33,33,33) ;
text-shadow : 1px 0 0 rgb(246,246,246) ;
}

/ * pied * /
{} .footer .plus-sport
Display : block ;
position : absolute ;
bas: 0 ;
Left: 0 ;
Width : 100 % ;
Color:RGB(145,145,145) ;
text-shadow: 0 1px 0 rgb(242,242,242) ;
line-height : 49px ;
background-color:RGB(228,228,228) ;
border-radius: 0 0 3px 3px ;
texte-tiret : 20px ;
}

/ * Le bouton pied de page * /
.plus-sport .footer a {}
position : absolute ;
Right : 10px ;
haut : 50 % ;
marge-top:-15px ;
Color:RGB(50,50,50) ;
text-shadow: 0 1px 0 rgb(247,247,247) ;
hauteur : 28px ;
line-height : 28px ;
padding: 0 12px ;
texte-tiret: 0 ;
border : 1px solid rgb(200,200,200) ;
border-radius : 4px ;
Background:-WebKit-Linear-gradient(Top,RGB(252,252,252),RGB(234,234,234)) ;
Background:-moz-Linear-gradient(Top,RGB(252,252,252),RGB(234,234,234)) ;
Background:Linear-gradient(Top,RGB(252,252,252),RGB(234,234,234)) ;
box-shadow : encart 0 1px 0 rgb (255,255,255), rgb(210,210,210) de 3px 1px 0 ;
-webkit-transition : tous les 300ms facilité ;
-moz-transition : tous les 300ms facilité ;
transition : tous les 300ms facilité ;
}

/ * L’effectif de planer les éléments * /
.plus-sport li a: hover {}
Color:RGB(0,31,99) ;
Background:RGB(150,150,150) ;
}

/ * Le vol stationnaire et l’effet actif des boutons * /
.plus-sport .footer a: hover {color:rgb(0,31,99);}
.plus-sport .footer a: active {background:-*-linear-gradient(top,rgb(234,234,234),rgb(252,252,252));}

/ * icône * /
{
famille de police: « icône-recherche » ;
SRC : url('font/icon-search.eot') ;
SRC : url('font/icon-search.eot?#iefix') format('embedded-opentype'),
URL('font/Icon-Search.woff') format('woff'),
URL('font/Icon-Search.ttf') format('truetype'),
URL('font/Icon-Search.svg#Icon-search') format('svg') ;
font-weight : normal ;
font-style : normal ;
}

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------