基于Bootstrap 2的大型导航菜单特效

这是一款基于Bootstrap 2.x的jQuery大型下拉菜单特效。该菜单可以制作出鼠标滑过菜单项时，显示带图片和链接的下拉菜单。可以显示多幅图片和多个链接，非常适合用于制作复杂的网站导航菜单。

制作方法

该菜单依赖于Bootstrap2.x，使用时需要引入相关依赖文件。

<link rel='stylesheet' href='css/bootstrap/2.3.2/css/bootstrap.min.css'>
<script src='js/jquery.min.js'></script>
<script src='js/bootstrap/2.3.2/js/bootstrap.min.js'></script>                
              

HTML结构

该大型菜单的基本HTML结构如下：

<header class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
      </button>
      <a class="brand" href="#"><b>LOGO</b></a> 
     
      <nav class="nav-collapse collapse">
        <ul class="nav">
          <li><a href="#top">Home</a></li>
          <li class="dropdown"> 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Mega 
          <a href="#">Menu</a> 
          <b class="caret"></b>
          </a>
            <ul class="dropdown-menu mega-menu">
              <li class="mega-menu-column">
                <ul>
                  <li class="nav-header">Mega menu 1</li>
                  <img src="1.jpg">
                  <li><a href="#">Mega-menu link</a></li>
                  <li><a href="#">Mega-menu link</a></li>
                  <li><a href="#">Mega-menu link</a></li>
                </ul>
              </li>
              ......
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</header>       
              

CSS样式

需要为该botstrap大型菜单添加下面的一些CSS样式。

.mega-menu {
  padding: 10px 0px ! important;
  width: 540px;
  border-radius: 0;
  margin-top: 0px;
}

.mega-menu li {
  display: inline-block;
  float: left;
  font-size: 0.94rem;
  padding: 3px 0px;
}

.mega-menu li.mega-menu-column {
  margin-right: 20px;
  width: 150px;
}

.mega-menu .nav-header {
  padding: 0 !important;
  margin-bottom: 10px;
  display: inline-block;
  width: 100%;
  border-bottom: 1px solid #ddd;
}

.mega-menu img { padding-bottom: 10px; }

/* Dropdown Toggle on style */
.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
  background: inherit; /* Set to inherit when using mouse hover to open dropdown */
  color: inherit;
}

/* Toggle off style */
.navbar .nav li.dropdown.open.active > .dropdown-toggle,
 .navbar .nav > li.dropdown > a:focus {
  background: inherit;
  color: inherit;
}

/* Toggle hover */
.navbar .nav li.dropdown > .dropdown-toggle:hover,
 .navbar .nav li.dropdown.open > .dropdown-toggle:hover { background-color: #DDDDDD; }

/* Toggle caret*/
.navbar .nav li.dropdown > .dropdown-toggle .caret { border-bottom-color:;
 border-top-color:;
}

/* Toggle caret hover */
.navbar .nav li.dropdown > a:hover .caret,
 .navbar .nav li.dropdown > a:focus .caret {
  border-bottom-color: #333;
  border-top-color: #333;
}

/* Toggle caret active */
.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
 .navbar .nav li.dropdown.active > .dropdown-toggle .caret,
 .navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
  border-bottom-color: #333;
  border-top-color: #333;
}

/* Hover style */ 
.navbar .nav > li > a,
.mega-menu a {
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  /* -webkit-transform: translate3d(0, 0, 0); Webkit Hardware Acceleration*/ 
  -webkit-backface-visibility: hidden; /* Safari Flicker Fix #2 */
  -webkit-transform: translateZ(0);
}                
              

JAVASCRIPT

在页面DOM元素加载完毕之后，通过下面的方法来初始化该bootstrap大型菜单。

jQuery(document).ready(function(){
  $(".dropdown").hover(
    function() { $('.dropdown-menu', this).fadeIn("fast");
    },
    function() { $('.dropdown-menu', this).fadeOut("fast");
  });
});