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

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

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

简要教程

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

制作方法

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



      

HTML结构

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


  
    
      
        
        
        
      
      LOGO
      
      
        
          
  • Home
  • Mega Menu
      Mega menu 1
    • Mega-menu link
    • Mega-menu link
    • Mega-menu link
    ......

    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