Menu onglet JavaScript/CSS avec sous-navigation (1 / 4 étapes)

Étape 1: Faire les Images

Tout d’abord, nous devons décider sur le style pour notre menu et créer des images en conséquence. Je ne vais pas aller dans beaucoup de détails à ce sujet, car la vraie magie derrière le menu est dans le code et pas les graphismes, mais nous aurons besoin de quelques images de base pour aider à ranger l’apparence de notre menu (bien que techniquement, vous pourriez sauter cette étape et utiliser les couleurs solides dans votre CSS).

subnav_bg.jpg
Il s’agit de l’image de fond pour notre menu de sub-nav (la barre directement sous les onglets). L’exigence technique seulement ici, c’est que l’image soit 25px en hauteur, afin de travailler avec le CSS je suis fournissant.

subnav_separator.jpg
Cette petite image est essentiellement juste une 1-2px large ligne verticale, encore une fois, 25px de hauteur, qui servira comme séparateur entre les éléments sub-nav. Astuce : rendre l’image 2px côté et utiliser une ligne de lumière à côté d’une ligne sombre pour créer un look biseauté.

tab_bg.jpg
Il s’agit de l’image de fond pour nos onglets du menu principal. Mes onglets sont 90px large et haute 29px (Oups... J’étais hors de l’un).

Bien sûr, si vous n’envie de faire vos propres images, vous pouvez toujours récupérer ces...