显示WordPress菜单的某些项目

时间:2015-02-17 09:37:37

标签: css wordpress menu

我在Wordpress中生成一个有三层的菜单。我用代码做到了:

wp_nav_menu(array('theme_location' => 'primary', 'menu_class' => 'SecondaryNavigation'));

Wordpress会生成如下菜单:

<div class="menu-mainnavigation_de-container">
<ul id="menu-mainnavigation_de" class="SecondaryNavigation">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-39">
        <a href="http://localhost/fecheriye/de/einfuehrung/">Home</a>
        <ul class="sub-menu">
            <li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44"><a href="http://localhost/fecheriye/de/einfuehrung/">Einführung</a></li>
            <li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43"><a href="http://localhost/fecheriye/de/aktuelles/">Aktuelles</a></li>
        </ul>
    </li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-30 current_page_item current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-40">
        <a href="http://localhost/fecheriye/de/beschreibung/">Der Tell</a>
        <ul class="sub-menu">
            <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-30 current_page_item menu-item-42"><a href="http://localhost/fecheriye/de/beschreibung/">Beschreibung</a></li>
            <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"><a href="http://localhost/fecheriye/de/topographie/">Topographie</a></li>
        </ul>
    </li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-51">
        <a href="http://localhost/fecheriye/de/forschungsgeschichte/">Forschung</a>
        <ul class="sub-menu">
            <li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53"><a href="http://localhost/fecheriye/de/forschungsgeschichte/">Forschungsgeschichte</a></li>
            <li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52"><a href="http://localhost/fecheriye/de/forschungsprobleme/">Forschungsprobleme</a></li>
        </ul>
    </li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-65">
        <a href="http://localhost/fecheriye/de/kampagnen/">Kampagnen</a>
        <ul class="sub-menu">
            <li id="menu-item-64" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-64">
                <a href="http://localhost/fecheriye/de/ausgrabung-2010/">Ausgrabung 2010</a>
                <ul class="sub-menu">
                    <li id="menu-item-63" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-63"><a href="http://localhost/fecheriye/de/grabungsstelle-c-haus-i-sq-6644-5-6744-6-6844-6/">Grabungsstelle C &#8211; Haus I (Sq. 6644-5, 6744-6 &#038; 6844-6)</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

我必须将菜单分为两个菜单:在顶部的标题中,只有菜单的第一层可见。通过wp_nav_menu的深度调用,这非常简单,并且工作得很好。 在补充工具栏中,我想显示菜单中相应的第二级和第三级(菜单类.sub菜单下的所有内容),具体取决于标题中选择的内容。我尝试通过CSS用两个简单的行来做到这一点:

.SecondaryNavigation {
  display: none;
  }

.SecondaryNavigation .current-menu-ancestor .sub-menu {
  display: block;
  }

不幸的是,这不起作用。如何仅显示菜单的第二级和第三级,具体取决于在主级别中选择的内容? Wordpress会分配相应的类,比如.current-menu-ancestor或.sub-menu,所以它必须以某种方式,对吗?

感谢您的帮助! 祝一切顺利 塞巴斯蒂安

1 个答案:

答案 0 :(得分:0)

我只需创建二级菜单,然后相应地在页面上列出,这将非常简单有效。

如果您需要进一步的帮助,请告诉我。