bootstrap 多级导航 PC 手机解决方案
多于两层的导航比较少,这里业务需要 bootstrap 的多级导航。在 PC 上悬停时出现子菜单(默认是 click 的方式),在手机上依然是 click 出现子菜单,不能是悬停。PC 上下拉选项可以点击进入链接,手机点击显示或隐藏子菜单。 以下是 demo 在线 demo
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162
| <html>
<head> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </head> <style> @media (min-width: 767px) { .navbar-nav .dropdown-menu .caret { transform: rotate(-90deg); } } </style> </head>
<body> <div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">NavBar</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="https://github.com/fontenele/bootstrap-navbar-dropdowns" target="_blank">GitHub</a></li> <li> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 1 <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action [Menu 1.1]</a></li> <li><a href="#">Another action [Menu 1.1]</a></li> <li><a href="#">Something else here [Menu 1.1]</a></li> <li class="divider"></li> <li><a href="#">Separated link [Menu 1.1]</a></li> <li class="divider"></li> <li><a href="#">One more separated link [Menu 1.1]</a></li> <li> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown [Menu 1.1] <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action [Menu 1.2]</a></li> <li> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown [Menu 1.2] <b class="caret"></b></a> <ul class="dropdown-menu"> <li> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown [Menu 1.3] <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action [Menu 1.4]</a></li> <li><a href="#">Another action [Menu 1.4]</a></li> <li><a href="#">Something else here [Menu 1.4]</a></li> <li class="divider"></li> <li><a href="#">Separated link [Menu 1.4]</a></li> <li class="divider"></li> <li><a href="#">One more separated link [Menu 1.4]</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 2 <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action [Menu 2.1]</a></li> <li><a href="#">Another action [Menu 2.1]</a></li> <li><a href="#">Something else here [Menu 2.1]</a></li> <li class="divider"></li> <li><a href="#">Separated link [Menu 2.1]</a></li> <li class="divider"></li> <li><a href="#">One more separated link [Menu 2.1]</a></li> <li> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown [Menu 2.1] <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action [Menu 2.2]</a></li> <li><a href="#">Another action [Menu 2.2]</a></li> <li><a href="#">Something else here [Menu 2.2]</a></li> <li class="divider"></li> <li><a href="#">Separated link [Menu 2.2]</a></li> <li class="divider"></li> <li> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown [Menu 2.2] <b class="caret"></b></a> <ul class="dropdown-menu"> <li> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown [Menu 2.3] <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action [Menu 2.4]</a></li> <li><a href="#">Another action [Menu 2.4]</a></li> <li><a href="#">Something else here [Menu 2.4]</a></li> <li class="divider"></li> <li><a href="#">Separated link [Menu 2.4]</a></li> <li class="divider"></li> <li><a href="#">One more separated link [Menu 2.4]</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> </ul> </div> <!--/.nav-collapse --> </div> </div> <script type="text/javascript"> jQuery(document).ready(function() { var $ = jQuery;
function dropdownOpen() { // console.log('drop'); var screenWidth = $(window).width(); var isPhone = screenWidth < 768; if (!isPhone) { $('.navbar-nav a.dropdown-toggle').unbind('mouseover').on('mouseover', function() { // console.log(this); var $el = $(this); var $parent = $(this).offsetParent(".dropdown-menu");
$(this).parent("li").addClass('open');
if (!$parent.parent().hasClass('nav')) { $el.next().css({ "top": $el[0].offsetTop, "left": $parent.outerWidth() - 4 }); }
$('.nav li.open').not($(this).parents("li")).removeClass("open");
return false; }); $('.navbar-nav a.dropdown-toggle').addClass('disabled'); $('.navbar-nav a.dropdown-toggle').unbind('click'); } else { $('.navbar-nav a.dropdown-toggle').unbind('mouseover'); $('.navbar-nav a.dropdown-toggle').removeClass('disabled'); $('.navbar-nav a.dropdown-toggle').unbind('click').on('click', function() {
$(this).parent("li").toggleClass('open');
return false; }); } }
// resize 会执行两次 $(window).on('resize', dropdownOpen).trigger('resize'); }); </script> </body>
</html>
|