Stap 4: De CSS
Tot slot moeten wij onze trapsgewijs Opmaakmodel om de stijl van het menu maken. U zult waarschijnlijk willen spelen met dimensies en wat heb je bij het maken van uw eigen navigatiebalk, zodat deze overeenkomt met de breedte van uw lay-out. Voor nu, echter ik ben het creëren van een tabblad menu thats 600px breed. De hoogte van de menubalk is 54px (25px voor onze sub-nav + 29px voor onze tabs). #nav { width:600px; height:54px; margin:0; padding:0;} Vervolgens zullen we alle tekst binnen onze nav/sub-nav stijl: Dit is puur cosmetisch. Hiermee centreert u alle tekst, maakt het wit, wordt het lettertype ingesteld en krijgt ontdoen van de koppeling onderstreept.
#nav * { text-align:center; color:#fff; font-weight:bold; text-decoration:none; font-family:arial, helvetica, sans-serif; font-size:9pt;} Vervolgens zullen we ontdoen van alle van de marges, de opvulling en de kogels van al onze lsits.
#nav ul, #nav ul li { margin:0; padding:0; list-tyle-type:none;}#nav ul li { display:inline; } Onze belangrijkste menu tabbladen aan de rechterkant van de nav-bar zweven:
ul#tabBar { float:right; } Nu we zullen onze belangrijkste nav tabbladen stijl, met inbegrip van hun standaard en zweven staten: Merk op dat door het veranderen van de regelafstand op de hover staat, wij maken het tabblad "pop omhooggaand."
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;} Nu we de stijlen voor onze sub-nav-lijsten instellen: Wij willen de sub-nav-lijsten standaard verbergen, zorg ervoor dat ze duidelijk krijgen ze geplaatst onder de belangrijkste tabbladen, en we willen ze zweven naar de linkerkant van onze menu bar en de achtergrond instellen. Tor de sub-nav-container zelf gebruiken we het bestand 'nav_bg.jpg' en vervolgens voor de sub-nav-lijst, wij de achtergrond instellen naar de 'subnav_separator.jpg' bestand en controleer of deze geplaatst aan de linkerkant en niet herhalen.
#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;} Ten slotte, wij de koppelingen stijl: Dit is heel eenvoudig. We bent gewoon instellen van de afmetingen van de koppeling, drijvende elke link aan de linkerkant, uitlijning van de tekst en de achtergrond instellen. Merk op hoe wij de 'nav_separator.jpg' instellen als achtergrond en plaats ze op de rechterrand van de koppeling.
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; } Die eindigt op het menu! Ik heb de volledige bron voor u om te spelen met toegevoegd.
