Intégrer facilement un joli menu dans son template WordPress !

Intégrer facilement un joli menu dans son template WordPress !

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 :


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;
}
0 Partages

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.