>   

如何让网站导航菜单下拉滑过显示子菜单?

bootstrap这个框架大家有点熟悉吧,但是在bootcss官网的下拉导航是点击就出现子菜单的,现在我们这里有个方法可以让下拉导航滑过就显示子菜单;

其实也很简单的,用一个js解决问题

下拉导航可以去官网看看,代码如下:

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" rel="external nofollow" class="external"  role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

这样展示的是点击下拉;我们只需要加入一个js代码,然后加载进去就行;

$(document).ready(function(){

    if (IsPC()){
    dropdownOpen();
    $(document).off('click.bs.dropdown.data-api');}

});
function dropdownOpen() {

    var $dropdownLi = $('li.dropdown');

    $dropdownLi.mouseover(function() {
        $(this).addClass('open');
    }).mouseout(function() {
        $(this).removeClass('open');
    });
}

function IsPC() {
    var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone",
                "SymbianOS", "Windows Phone",
                "iPad", "iPod"];
    var flag = true;
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}

然后用代码加载到html中去就行了

要发表评论,您必须先登录