web-dev-qa-db-fra.com

Garder les éléments de menu parents actifs dans les pages enfants

Je suis un débutant en php et css. J'aimerais savoir comment conserver un élément de menu supérieur souligné lors de la navigation dans les pages enfants. Voici ma mise en page: J'ai un menu de navigation, listant toutes mes pages parentes (pages principales). Toutes ces pages auront un fichier xxxxx * php unique sur lequel leurs enfants respectifs seront également créés.

Sur chacun de ces fichiers xxxx * php, il y aura, à quoi ressemblera, un sous-menu. déclarée dans mon fichier functions.php. chaque fichier xxxxx.php a son propre sous-menu. Je sais comment souligner l'élément de menu de la page actuelle dans css. mais comment puis-je garder l'élément de menu supérieur (élément de navigation principal) souligné lorsque vous êtes sur les pages enfants ...

J'espère m'être bien fait comprendre.

Voici comment j'ai enregistré mes menus personnels dans mon fichier fonctions.php:

function register_my_menu()
{

    register_nav_menus( array(
        'home_menu' => __('Home Menu'),
        'general_menu' => __('General Menu'),
        'produit_menu' => __('Produit Menu'),
        'pro_menu' => __('Pro Menu'),
        'Stage_menu' => __('Stage Menu')
    ) );

C’est ainsi que j’appelle les menus de chaque page principale (xxxxx.php)

        <div id="page_title"><a>Atelier de souffleur de verre:</a></div>
            <div> <?php wp_nav_menu( array( 'theme_location' => 'general_menu', 'container_class' => 'atelier_menu' ) ) ; ?> </div>

Je crée ces menus dans ma page d’administration et note les éléments que je veux voir apparaître dans mon menu. Cela fonctionne bien, mais dès que je clique sur l'une de ces pages enfants, mon élément de menu principal perd sa décoration de texte "souligné".

Voici mon css:

.current-sub-menu-item a { text-decoration:underline !important; }
.current-menu-item a { text-decoration:underline !important; }
.current-parent-page-item a { text-decoration:underline !important; }


/**Menu personnalisés**/
#page_title {text-decoration:none ;font-size:12px;color:#000000;}
#page_title a {text-decoration:underline ;font-size:12px;color:#000000;}
.atelier_menu { position:relative;left:160px;top:-27px;padding: 5px 0; }
.atelier_menu ul {list-style-type: none; }
.atelier_menu ul li { float: left; font-family:Times; }
.atelier_menu ul li a { display: block; padding: 5px 15px; color: #000000; font-size:     12px; text-decoration: none;}

Toute aide serait grandement appréciée.

Cordialement,

Siluvatar.

menuschild-pages
4
Siluvatar

wp_nav_menu, sauf modification par un filtre, ajoute un current-menu-parent et une classe current-menu-ancestor aux éléments de menu. On dirait que vous voulez le "ancêtre".

http://codex.wordpress.org/Function_Reference/wp_nav_menu#Menu_Item_CSS_Classes

2
s_ha_dum