Nous avons vu ensemble, avec la sortie de Wordpress 3.0 RC, qu’un gestionnaire de menu est désormais disponible. Je vous ai déjà expliquer comment activer cette fonctionnalité. Maintenant voyons comment avoir le même jolie menu que sur le nouveau thème par défaut de Wordpress. Dans le fichier functions.php de votre thème :``` # activation des menus perso dans le background add_theme_support( ‘nav-menus’ );
Ensuite la ou vous désirez placer le menu :
‘menu_order’, ‘container_class’ => ‘menu-header’ ) ); ?>
Puis dans la feuille de style css :
/* Menu style */
#access {
background: #000;
margin: 0 auto;
width: 100%;
display:block;
float:left;
}
#access .menu-header,
div.menu {
font-size: 13px;
margin-left: 12px;
}
#access .menu-header ul,
div.menu ul {
list-style: none;
margin: 0;
}
#access .menu-header li,
div.menu li {
float:left;
position: relative;
}
#access a {
display:block;
text-decoration:none;
color:#aaa;
padding:0 10px;
line-height:38px;
}
#access ul ul {
display:none;
position:absolute;
top:38px;
left:0;
float:left;
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
z-index: 99999;
}
#access ul ul li {
min-width: 180px;
}
#access ul ul ul {
left:100%;
top:0;
}
#access ul ul a {
background:#333;
height:auto;
line-height:1em;
padding:10px;
width: 160px;
}
#access li:hover > a,
#access ul ul :hover > a {
color:#fff;
background:#333;
}
#access ul li:hover > ul {
display:block;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
color: #fff;
}
* html #access ul li.current_page_item a, * html #access ul li.current-menu-ancestor a, * html #access ul li.current-menu-item a, * html #access ul li.current-menu-parent a, * html #access ul li a:hover { color:#fff; }