Créer un menu vertical en css

Créer un menu vertical en css

Dans ce petit mémo, on va voir comment créer un menu vertical et latéral  dans wordpress.

See the Pen Menu vertical I by yuyazz (@yuyazz) on CodePen.

Il existe plein de manière de faire, notamment en jQuery pour obtenir de beaux déroulés de sous menus, mais on y reviendra dans un prochain tuto..
Pour notre exemple, on déclare normalement notre menu dans le fichier functions.php:

add_theme_support('nav-menus'); // je préviens wordpress que je veux utiliser les menus.
register_nav_menus(array(// enregistrement des menus
 'primary' => 'Navigation principale' // ici mon menu principal
));

On va ensuite dans le backoffice créer notre menu, avec des pages et des catégories ou des liens..pour mon site j’ai placé dans mon menu à la fois des catégories et des sous catégories, mais aussi des pages comme l’habituelle page Contact par exemple.C’est un menu à deux niveaux. Ici tout se fait en drag and drop donc pas de difficulté particulière.

WordPress va nous générer toute une série de ul li avec des noms de classes, grâce à la fonction wp_nav_menu();

En faisant Control+Maj+i ou clic droit puis « inspecter l’élément‘ sur la page, on voit bien toutes ces classes. On peut donc travailler notre menu au css comme on le ferait pour un menu normal en visant les sélecteurs classiques.

Pour cet exemple, je vais créer un menu dont les sous menu apparaîtront sur le coté droit. L’astuce consiste à entourer notre menu d’une div contenant un ID ou une classe particulière, et de cibler indifféremment les ul et li à partir de cet identifiant. On peut donner au sous-menu une margin-left équivalente à la largeur du menu parent, puis ensuite jouer sur les hauteurs des sous menus pour une meilleure lisibilité.

*{
  box-sizing:border-box
}
#menu_dynamique ul {
    width:200px;
    list-style:none;
    padding:0px;
}

#menu_dynamique ul li {
    text-align:center;
    border: 1px solid #000 ;
    padding:20px 0;
    max-height: 55px;
}

#menu_dynamique ul li a{
  text-decoration:none;
  color:#000;
}

#menu_dynamique ul li:hover {
    background: #54B6A8;
    -moz-transition: all .8s; 
    -webkit-transition: all .8s; 
    -o-transition: all .8s; 
    transition: all .8s;
}


#menu_dynamique ul > li > ul{
  opacity:0;   
	display:none;
	z-index:999;
	border: 1px solid #000;
  margin-top:-39px;
  background-color:#54B6A8;
}

#menu_dynamique ul li:hover > ul {
	display: block;  
	opacity:1;
  margin-left:200px
}