JavaScript/CSS Tab Menu met sub navigatie (1 / 4 stap)

Stap 1: Maken van de beelden

We eerst de installatiekopieën maken dienovereenkomstig te beslissen over de stijl voor onze menukaart. Ik ga niet veel detail op ingaan, aangezien de echte magie achter het menu in de code en niet de graphics, maar zullen we een paar de elementairste afbeeldingen om te helpen met het opruimen van het uiterlijk van onze menukaart (hoewel technisch kan u deze stap overslaan en effen kleuren te in je CSS gebruiken).

subnav_bg.jpg
Dit is de achtergrondafbeelding voor onze sub-nav menu (de balk direct onder de tabbladen). De alleen technische vereiste hier is dat de afbeelding 25px in hoogte, om te kunnen werken met de CSS die ik ben leveren.

subnav_separator.jpg
Deze kleine afbeelding is in wezen gewoon een 1-2px brede verticale lijn, nogmaals, 25px in hoogte, dat als scheidingsteken tussen de elementen van onze sub-nav dienen zal. Hint: maken de beeld-2px kant en gebruik een lichte lijn naast een donkere lijn om een schuine look te creëren.

tab_bg.jpg
Dit is de achtergrondafbeelding voor onze hoofdmenu tabs. Mijn tabs zijn brede 90px en hoge 29px (Oeps... Ik was uitgeschakeld door een).

Natuurlijk, als je niet het gevoel als het maken van uw eigen afbeeldingen, kunt u altijd grijpen deze...