当前位置:主页 > 网页特效 > 菜单导航 >

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

发布时间:2018/08/21 来源:未知 浏览: 关键词:菜单导航 bootstrap 
基于Bootstrap 2的大型导航菜单特效 基于Bootstrap 2的大型导航菜单特效
阿里云

简要教程

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

制作方法

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

<linkrel='stylesheet'href='css/bootstrap/2.3.2/css/bootstrap.min.css'>
<scriptsrc='js/jquery.min.js'></script>
<scriptsrc='js/bootstrap/2.3.2/js/bootstrap.min.js'></script>      

HTML结构

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

<headerclass="navbar navbar-fixed-top">
  <divclass="navbar-inner">
    <divclass="container">
      <buttontype="button"class="btn btn-navbar"data-toggle="collapse"data-target=".nav-collapse">
        <spanclass="icon-bar"></span>
        <spanclass="icon-bar"></span>
        <spanclass="icon-bar"></span>
      </button>
      <aclass="brand"href="#"><b>LOGO</b></a>
      
      <navclass="nav-collapse collapse">
        <ulclass="nav">
          <li><ahref="#top">Home</a></li>
          <liclass="dropdown">
          <ahref="#"class="dropdown-toggle"data-toggle="dropdown">Mega
          <ahref="#">Menu</a>
          <bclass="caret"></b>
          </a>
            <ulclass="dropdown-menu mega-menu">
              <liclass="mega-menu-column">
                <ul>
                  <liclass="nav-header">Mega menu 1</li>
                  <imgsrc="1.jpg">
                  <li><ahref="#">Mega-menu link</a></li>
                  <li><ahref="#">Mega-menu link</a></li>
                  <li><ahref="#">Mega-menu link</a></li>
                </ul>
              </li>
              ......
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</header>    

CSS样式

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

.mega-menu {
  padding:10px0px! important;
  width:540px;
  border-radius:0;
  margin-top:0px;
}
 
.mega-menu li {
  display:inline-block;
  float:left;
  font-size:0.94rem;
  padding:3px0px;
}
 
.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:1pxsolid#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:all200ms ease;
  -moz-transition:all200ms ease;
  -ms-transition:all200ms ease;
  -o-transition:all200ms ease;
  transition:all200ms 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");
  });
});    

共有人阅读,期待你的评论!评论
骚年说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!
Top