JavaScript/CSS flikmenyn med sub-navigation (4 / 4 steg)

Steg 4: CSS

Slutligen måste vi skapa vår CSS för att forma på menyn. Du kommer förmodligen att spela med mått och vad har du när du skapar din egen nav bar, så att den matchar bredden på din layout. För nu, men skapa jag en flikmeny som är 600px bred. Höjden på menyraden är 54px (25px för vår sub-nav + 29px för våra flikar).

#nav {bredd: 600px; höjd: 54px; marginal: 0; padding: 0;}

Nästa, vi kommer stil all text inom våra nav/sub-nav: Detta är rent kosmetiska. Det centrerar all text, gör det vita, anger teckensnittet och gör sig av med i länken betonas.

#nav * {text-align: center; färg: #fff; font-weight: bold; text-decoration: none; font-family: arial, helvetica, sans-serif; font-storlek: 9 punkter;}

Därefter ska vi bli av med alla marginaler, stoppning och kulor från alla våra lsits.

#nav ul, #nav ul li {marginal: 0; padding: 0; list-tyle-type: none;} #nav ul li {display: inline;}

Flyta våra huvudmenyn flikarna till höger sida av nav bar:

UL #tabBar {float: höger;}

Nu vi ska stil våra huvudsakliga nav flikar, inklusive deras standard och sväva stater: Observera att genom att ändra radhöjd om hover, vi göra fliken "pop upp."

UL #tabBar li en {display: block; float: left; bredd: 90px, höjd: 29px; linje-höjd: 39px; bakgrund: url (.. / imgs/tab_bg.jpg) 0 10px no-repeat; gränsen-vänster: 4px solid #fff; overflow: hidden; / * fixar IE display bug * /} ul #tabBar li en: hover {linje-höjd: 29px; bakgrund: url (.. /imgs/tab_bg.jpg) överst till vänster no-repeat;}

Nu vi ställa in stilar för vår sub-nav listor: Vi vill dölja listorna sub-nav som standard, se till att de klart de få placerad under de viktigaste flikarna, och vi vill flyta dem till vänster om vår meny bar och ställa in bakgrunden. Tor själva sub-nav behållaren vi använda filen "nav_bg.jpg" och sedan för listan över sub-nav, vi ställa in bakgrunden till filen 'subnav_separator.jpg', och kontrollera att det är placerad till vänster och inte upprepar.

#subNav ul {Visa: none;} #subNav {klart: båda; höjd: 25px; bakgrund: url (.. / imgs/subnav_bg.jpg) överst till vänster repeat-x; padding-vänster: 100px;} #subNav ul {float: left; bakgrund: url (.. /imgs/subnav_separator.jpg) överst till vänster no-repeat;}

Slutligen vi stil länkar: Detta är mycket enkel. Vi är bara inställningen länken mått, flytande varje länk till vänster, ange textjustering och bakgrunden. Lägg märke till hur vi in "nav_separator.jpg" som bakgrund och placera den på den högra kanten av länken.

display: block; Float: left; bredd: 90px; text-align: center; linje-höjd: 25px; bakgrund: url (.. /imgs/subnav_separator.jpg) topp just no-repeat;} #subNav li en: hover {color: #cde7ff;}

Som slutar upp menyn! Jag har bifogat den fullständiga källkontroll för dig att spela med.