最近在改,改成巨简洁的归档式首页。虽然目前的响应式导航菜单也被我改成了纯CSS的最优显示,不过一直想搞定bootstrap这类典型的响应式菜单,于是就有了这篇教程。当然,如果不用bootstrap框架,单独加载它的css和js是有点过了。为了一个导航菜单搞这么多东西不值得,CSS还好抽出来,js就不好了。下面是步骤(在此之前要求加载bootstrap的标准css和js)

步骤一

xhtml结构,基本的div框架,包含响应式部分和正常的菜单输出部分

<div id="header">
    <div id="inlo-header" class="navbar navbar-inverse">
        <div class="container">
            <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
                <span class="fa fa-reorder fa-lg"></span>
            </button>
            </div>
            <div class="navbar-collapse bs-navbar-collapse collapse">
                <?php wp_nav_menu( array( 'theme_location' => 'primary', 'container'=> '' ,'menu_class' => 'nav navbar-nav', 'walker' => new Inlo_Nav_Menu('')));?>
            </div>
        </div>
    </div>  
</div>

这些类都是bootstrap框架导航菜单所必需的。

步骤二

上面代码中正常菜单输出有一个参数和函数 'walker' => new Inlo_Nav_Menu('') 这个东西是修改WP子菜单的类,要改为dropdown-menu,如果你不改就是默认的sub-menu,而不改的话是无法使用bootstrap的下拉菜单样式的。所以我们要自定义一个函数来修改子菜单的类,在functions.php中进行自定义:

// INLO 自定义子菜单类
class Inlo_Nav_Menu extends Walker_Nav_Menu {
  function start_lvl( &$output, $depth = 0, $args = array() ) {
    $indent  = str_repeat( "\t", $depth );
    $output .= "\n$indent<ul class=\"dropdown-menu\">\n";
    return $output;
  }
}
步骤三

给父级菜单li标签添加一个名为open的类,鼠标移入时添加这个类,鼠标移开后移除这个类,用JS执行下面这个函数:

// 下拉增加open类
function dropDown() {
    var dropDownLi = jQuery('.nav.navbar-nav li');    
    dropDownLi.mouseover(function() {
        jQuery(this).addClass('open');
    }).mouseout(function() {
        jQuery(this).removeClass('open');
    });
}

搞定以上三步,这个bootstrap的响应式菜单就出来了。
2014-07-10_bootstrap1

下 载

最后是精简后的js+css下载
下载地址