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

Steg 1: Att göra bilderna

Först vi måste besluta om stil för vår meny och därmed skapa bilder. Jag tänker inte gå in i en massa detaljer om detta, eftersom den riktiga magin bakom menyn är i koden och inte grafiken, men vi behöver några grundläggande bilder för att städa upp utseendet på vår meny (även om du kan tekniskt hoppa över detta steg och använda täckande färger i din CSS).

subnav_bg.jpg
Detta är bakgrundsbilden för vår sub-nav meny (bar direkt under flikarna). Den enda tekniska kraven här är att bilden vara 25px i höjd, för att arbeta med CSS jag levererar.

subnav_separator.jpg
Denna lilla bild är i huvudsak bara en 1-2px bred vertikal linje, igen, 25px i höjd, som ska fungera som en avgränsare mellan vår sub-nav element. Tips: gör bilden 2px sidan och Använd en ljus linje bredvid en mörk linje för att skapa en avfasad utseende.

tab_bg.jpg
Detta är bakgrundsbilden för våra huvudmenyn flikar. Mina flikar är 90px brett och 29px hög (oops... Jag var iväg en).

Naturligtvis, om du inte känner för att göra dina egna bilder, kan du alltid ta dessa...