Wordpress多级下拉菜单

时间:2015-04-16 04:46:41

标签: php css wordpress drop-down-menu

我为自己的网站创建了自定义主题。在这里,我想创建一个多级下拉菜单,我使用仪表板完成,但只显示下拉菜单。

enter image description here

enter image description here

1 个答案:

答案 0 :(得分:1)

这就是你编写菜单应该用代码编写的方式:

<div id="top-menu">
    <ul>
        <?php wp_nav_menu(array('theme_location'=>'top-menu','container'=>'', 'items_wrap' => '%3$s')); ?>
    </ul>
</div>

上面的代码将被翻译成类似于此的内容:

<div id="top-menu">
            <ul>
                <li><a href="#somelink">Some Text</a></li>
                <li><a href="#somelink">Some Text</a></li>
                <li>
                    <a href="#somelink">Some Text</a>
                    <ul>
                        <li><a href="#secondLevel">Second Level Text</a></li>
                        <li><a href="#secondLevel">Second Level Text</a></li>
                        <li>
                            <a href="#secondLevel">Second Level Text</a>
                            <ul>
                                <li><a href="#thirdLevel">Third Level Text</a></li>
                                <li><a href="#thirdLevel">Third Level Text</a></li>
                                <li><a href="#thirdLevel">Third Level Text</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>

如果尚未添加以下代码,则需要添加以下代码:.php:

add_theme_support( 'menus' );
if ( function_exists( 'register_nav_menus' ) ) {
    register_nav_menus(
        array(
            'top-menu' => 'Top Menu'
            )
        );
}

然后你的css文件应该包含以下内容:

#top-menu {
  background:#F4F4F4;
  height:50px;
  width:100%;
}
#top-menu ul {
}
#top-menu ul li {
  display:inline-block;
  float:left;
  position:relative;
}
#top-menu ul li a {
  color:#929292;
  display:inline-block;
  height:50px;
  text-align:center;
  text-decoration:none;
  font-weight:bold;
  width:130px;
  line-height:50px;
  border-right:#E4E4E4 1px solid;

}
#top-menu ul li ul li a {
  width:200px;
}
#top-menu ul li.current-menu-item > a, #top-menu ul li:hover > a {
  color:#000;
}
/*===>multi level menu */
#top-menu li ul {
  display:none;
  position:absolute;
  left:0;
  border:1px solid #ccc;
  z-index:300;
  width:200px;
  background:#f0f0f0;
}
#top-menu li:hover > ul {
  display:block;
}
#top-menu li ul ul {
  left:140px;
  top:10px;
}
#top-menu li li a {
  border:0;
  border-bottom:1px solid #ccc;
  width:150px;
}

当然,你需要做出自己的改变。