Créer un menu vertical latéral en css II

Créer un menu vertical  latéral en css II

On a vu dans un précédent tuto comment créer un menu vertical sur wordpress. Voici un deuxième petit mémo pour créer un menu latéral sur son site wordpress.

Dans l’autre tuto, on fait apparaître les sous menus au survol, en les faisant apparaître sur le coté. Ca peut être plus ou moins joli selon les sites.

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

Une autre façon de procéder et de faire apparaître les sous menus, sous les menus, donnant ainsi un petit effet sympa, très proche des menus jQuery. Bon bien sûr là l’exemple n’est vraiment pas travaillé, on peut faire largement mieux..

On fait appel au menu wordpress:

  <div id="menu_dynamique">
<?php wp_nav_menu( array( 'theme_location' => 'primary') ); ?>
 </div>

On va ensuite dans le backoffice de son site pour créer son menu : on  va dans Apparence, Menu,  et on place les pages, liens ou catégories que l’on aura crée au préalable.

Ici j’entoure mon menu d’un id « menu_dynamique » qui va me servir à le pointer et le styliser en css. WordPress génère automatiquement une liste ul li avec des noms de classes génériques. En faisant control Maj I ou clic droit et « inspecter l’élément » sur sa page, on retrouve le code de notre menu, généré par notre fonction wp_nav_menu().

De à, on peut travailler notre menu en css comme on le ferait pour un menu classique. WordPress s’occupe de la partie dynamique, affiche les liens de toutes les pages ou catégories insérées dans le menu. Il ne nous reste plus qu’à styliser le tout en css.

#menu_dynamique ul{
  padding:0;
  margin:0;
  list-style:none;
  text-align: center;
  list-style:none;  
}

#menu_dynamique li {
   background-color:#729EBF; 
   background-image:-webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
   width:100%;
   text-align:center;
   color: #fff ;
}
#menu_dynamique li >ul >li {
   max-height:0;
   overflow: hidden;
   background: #444;
}


#menu_dynamique a {
  display:block;
  text-decoration: none;
  color: #fff;
  padding:13px 0;
  font-size:1em;
}

#menu_dynamique li li:hover {
   background: #999;
}

#menu_dynamique li:hover li {
  max-height:3em;
}