最近在改,改成巨简洁的归档式首页。虽然目前的响应式导航菜单也被我改成了纯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'); }); }
下 载
最后是精简后的js+css下载
下载地址
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。
转载请注明出处链接 : https://www.inlojv.com/4303.html