Le menu du site d’Apple est un exemple en terme de code propre et sémantique allié à un design impeccable. Avec ce tuto, je vous propose de recréer la barre de navigation du site d’Apple et d’étudier les techniques utilisées.

La technique CSS des sliding doors (portes coulissantes en Français) permet de réaliser des onglets sophistiqués pour vos menus de navigation. Malheureusement, les fonctions de Wordpress wp_list_pages() et wp_list_categories() ne permettent pas de rajouter la balise span nécessaire à la mise en place de cette technique. Nous allons voir comment outrepasser cette limitation.

Il ya quelques temps, j’avais publié deux articles sur des menus de navigation déroulants. Aujourd’hui, je vous propose de créer un menu listant les catégories et sous-catégories, le tout présenté horizontalement.

Mon récent article « Menu de catégories style magazine », que j’utilise notamment pour mon thème OpenBook, à intéressé de nombreux bloggeurs. Toutefois, l’un d’entre eux à souhaité en faire une variante, qui afficherait les pages ainsi qu’un élément « catégories » qui afficherait la liste des catégories disponibles au survol. Voici un petit tuto pour la création de ce menu.