Question

我要为Wordpress驱动的网站设置一个相当奇怪的导航系统。以下是示例代码;

<nav>
    <ul>
        <li><a href="">Parent Menu</a>
        <div class="dropdown">
            <div class="inner-menu-item">
                <dl>
                    <dt>Title tag for the sub-menus below</dt>
                    <dd><a href="">One</a></dd>
                    <dd><a href="">Two</a></dd>
                    <dd><a href="">Three</a></dd>

                    <dt>Title tag for another sub-menu</dt>
                    <dd><a href="">One</a></dd>
                    <dd><a href="">Two</a></dd>
                    <dd><a href="">Three</a></dd>
                </dl>
            </div>
        </div>
        </li>

        <!-- similar structure as above -->
        <li><a href="">Parent Menu</a>
        <div class="dropdown">
            <div class="inner-menu-item">
                <dl>
                    <dt>Title tag for the sub-menus below</dt>
                    <dd><a href="">One</a></dd>
                    <dd><a href="">Two</a></dd>
                    <dd><a href="">Three</a></dd>

                    <dt>Title tag for another sub-menu</dt>
                    <dd><a href="">One</a></dd>
                    <dd><a href="">Two</a></dd>
                    <dd><a href="">Three</a></dd>
                </dl>
            </div>
        </div>
        </li>
    </ul>
</nav>

为上述设置编写Wordpress Nav代码的最佳方法是什么？如果我可以选择排除某些菜单项，那将会非常棒。

我可以使用其他方法来改变CSS，我很满意。例如，包裹在多个UL内部> LI代替DIV和DL＆gt; DD

Answer 1

使用[wp_nav_menu] 1功能生成菜单。使用它将为您节省很多努力，并且应该是wordpress的良好实践。

你的结构非常像这样：

<div id="menu-wrapper">
  <ul id="menu">
    <li id="menu-item-1">
      <a href="your-page-1">Title</a>
      <ul class="sub-menu">
       <li><a href="some-other-page">Title 2</a></li>
       <li><a href="some-other-page">Title 2</a></li>
      </ul>
   </li>
 </ul>
</div>

您可以通过继承Walker_Nav_Menu并将新的类实例传递给wp_nav_menu来自定义此结构。

Answer 2

这很简单。使用WP菜单，然后将类分配给只有标题的菜单。将位置设置为＃并使用CSS更改该类的游标类型。

此外，可以取出div类，并且可以在第一个UL LI中给出UI和LI的CSS属性

Answer 3

恕我直言，你列出的标记听起来并不是语义上的。而不是这个你可以使用ul / li。从搜索引擎的角度考虑这一点，使用Web开发人员工具栏删除CSS。您可以进一步参考w3c。我正在写，因为您有权修改标记。

Wordpress在外观选项卡下有菜单选项，您可以使用它来设置层次结构。它会给你一个无序列表。现在剩下的就是做CSS工作了。

这是一个很棒的链接，可以帮助您正确识别CSS。请查看this以获取有关CSS的帮助。

带有自定义子菜单样式的Wordpress Nav

3 个答案: