Question

我正在使用一个名为'Wordpress Foundation v2 by 320press'的WordPress主题

我正在使用WordPress仪表板中的自定义菜单，我想在'li'中添加一个类来更改子菜单的样式：

例如：关于我们 - 将有一个包含四个子链接的子菜单，因此我想在该子网格中添加一个名为.fourNav的类，然后将每个'li'设置为25％。

然后客户 - 将有2个子链接，所以我想为每个'li'添加一个名为.twoNav的类，其宽度为50％。

我还想为每个'li'添加另一个类，每个'li'将为每个'li'添加背景图像。

Wordpress菜单允许您添加将在菜单中显示的类和描述，但是当我检查元素时，类没有被应用。

然而，当我在DOM中手动添加类时，它会选择CSS并运行。

如何在此主题中将菜单系统添加到其完整功能？

这就是我正在做的事情，但它不是在上面添加类：

http://thesis-blogs.com/add-a-custom-class-to-each-item-in-the-wordpress-menu/

所以我认为我需要的是一个PHP片段，允许菜单系统使用我的主题。当我在仪表板中添加类时，我的主题不适用它。

这是在html中输出的代码： -

<ul id="menu-main-nav" class="top-nav nav-bar hide-for-small">
 <li id="menu-item-5" class="has-flyout active">
 <a href="page link here">Home</a><a href="#" class="flyout-toggle"></a>
  <ul class="flyout" style="display: none;">
   <li id="menu-item-50"><a href="page link here">sub menu four</a></li>
   <li id="menu-item-51"><a href="page link here">sub menu three</a></li>
   <li id="menu-item-52"><a href="page link here">sub menu two</a></li>
   <li id="menu-item-53"><a href="page link here">sub menu one</a></li>
  </ul>
 </li>
</ul>

Answer 1

你必须直接编辑模板代码......

我认为menú在

worpressdir/wp-content/themes/yourthemename/header.php

为了正确编辑，你需要一个PHP和HTML的中等技能。祝你好运

Answer 2

转到外观 - ＆gt;菜单 - ＆gt;屏幕选项 - 然后是以下内容 hope this is helpful =)

Answer 3

据我所知，根据你的要求，它应该如何运作：
1.当您将鼠标悬停在菜单项上时，它应该获得一个新的类名 2.当您将鼠标悬停在子菜单项上时，子菜单项和相应子菜单项的父元素都应获得新的类名。

如果这是您想要的结帐jsfiddle。我为此使用了jquery。检查这是否对您有所帮助。

HTML：

<ul class="menu-bar">
    <li class="menu-block">Menu 1</li>
    <li class="menu-block">Menu 2
        <ul class="sub-menu-block">
            <li class="sb-menu-list">Sub Menu</li>
            <li class="sb-menu-list">Sub Menu</li>
            <li class="sb-menu-list">Sub Menu</li>
        </ul>
    </li>
    <li class="menu-block">Menu 3</li>
    <li class="menu-block">Menu 4</li>
    <li class="menu-block">Menu 5</li>
</ul>

CSS：

.menu-bar{
    background-color:blue;
    width:100%;
    display:inline-block;
}

.menu-bar > li{
    display:inline-block;
    position:relative;

}
.sub-menu-block{
    display:none;
    position:absolute;
    top:20px;
    padding-left:0;
    width:75px;
    padding:10px 3px;
    background-color:#ccc;
}
.menu-bar > li:hover .sub-menu-block{
    display:block;
}
.sub-menu-block li{
    list-style: none;
    display:block;
    padding: 4px 0;
}
.sub-menu-block li:hover{
    background-color:red;
}

JQuery的

$(function(){
    $(".menu-block").on("mouseover",function(){
        $(this).addClass('hovered');
    });
    $(".menu-block").on("mouseout",function(){
        $(this).removeClass('hovered');
    });
    $(".sb-menu-list").on("mouseover",function(){
        $(this).addClass('child-hovered');
        $(this).parents(".menu-block").addClass('parent-hovered');
    });
    $(".sb-menu-list").on("mouseout",function(){
        $(this).removeClass('child-hovered');
        $(this).parents(".menu-block").removeClass('parent-hovered');
    });
});

Wordpress将类添加到使用我的主题的菜单工作

3 个答案: