Étape 4: Le CSS
Enfin, nous devons créer notre CSS pour le menu de style. Vous aurez probablement envie de jouer avec les dimensions et ce que vous avez lorsque vous créez votre propre barre de navigation, afin qu’il corresponde à la largeur de votre mise en page. Pour l’instant, cependant, je crée un menu onglet 600px de large. La hauteur de la barre de menus est 54px (25px pour nos sub-nav + 29px pour nos pattes). #nav { width:600px; height:54px; margin:0; padding:0;} Ensuite, nous allons tout le texte style dans notre nav/sub-nav : Il s’agit purement esthétique. Il centres tout le texte, ce qui la rend blanc, définit la police et se débarrasse de la fait ressortir le lien.
#nav * { text-align:center; color:#fff; font-weight:bold; text-decoration:none; font-family:arial, helvetica, sans-serif; font-size:9pt;} Ensuite, nous vous débarrasserez de toutes les marges, padding et les balles de l’ensemble de nos lsits.
#nav ul, #nav ul li { margin:0; padding:0; list-tyle-type:none;}#nav ul li { display:inline; } Flotter nos onglets du menu principal sur le côté droit de la barre de navigation :
ul#tabBar { float:right; } Maintenant nous allons style nos pattes de nav principale, y compris leurs États standard et sensitif : Notez qu’en changeant la hauteur de ligne sur l’État pointé, nous faisons l’onglet « pop up ».
ul#tabBar li a { display:block; float:left; width:90px; height:29px; line-height:39px; background:url(../imgs/tab_bg.jpg) 0 10px no-repeat; border-left:4px solid #fff; overflow:hidden; /* fixes IE display bug */}ul#tabBar li a:hover { line-height:29px; background:url(../imgs/tab_bg.jpg) top left no-repeat;} Maintenant nous définir les styles pour nos listes de sub-nav : Nous voulons cacher les listes sub-nav par défaut, assurez-vous qu’ils clair ils obtenir positionnés sous les onglets principaux, et nous voulons leur flotter à gauche de notre menu bar et définir l’arrière-plan. Tor du conteneur de sub-nav nous utilisons le fichier « nav_bg.jpg » et ensuite pour la liste de sub-nav, nous définir l’arrière-plan dans le fichier « subnav_separator.jpg » et assurez-vous qu’il est tourné vers la gauche et ne se répète pas.
#subNav ul { display:none; }#subNav { clear:both; height:25px; background:url(../imgs/subnav_bg.jpg) top left repeat-x; padding-left:100px;}#subNav ul { float:left; background:url(../imgs/subnav_separator.jpg) top left no-repeat;} Enfin, nous style les liens : C’est très simple. Nous sommes juste définissant les dimensions du lien, flottant chaque lien à gauche, de définir l’alignement du texte et l’arrière-plan. Remarquez comment nous avons mis le « nav_separator.jpg » comme arrière-plan, puis positionnez-le sur le bord droit du lien.
display:block; float:left; width:90px; text-align:center; line-height:25px; background:url(../imgs/subnav_separator.jpg) top right no-repeat;}#subNav li a:hover { color:#cde7ff; } Qui se termine le menu ! J’ai joint la source complète pour vous de jouer avec.
