伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】

所属分类:导航-水平导航,其他导航
 15276  97  查看评论 (7)
伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】 ie兼容9
这是一款基于bootsnav的简洁多级导航菜单。bootsnav是以bootstrap为基础的导航菜单伟德BETVICTOR。被多级导航菜单效果是在bootsnav的基础上,对菜单样式进行了一些美化加工。

使用方法

在页面中引入bootstrap相关文件,jquery和bootsnav相关文件。<link href="path/to/bootstrap.min.css" rel="stylesheet"> <link href="path/to/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/bootsnav.css"> <script type="text/javascript" src="path/to/jquery.min.js"></script> <script src="path/to/bootstrap.min.js"></script> <script type="text/javascript" src="path/to/bootsnav.js"></script> HTML结构该多级导航菜单的基本HTML结构如下:<div class="container">     <div class="row">         <div class="col-md-12">             <nav class="navbar navbar-default navbar-mobile bootsnav on">                 <div class="navbar-header">                     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">                         <i class="fa fa-bars"></i>                     </button>                 </div>                 <div class="collapse navbar-collapse" id="navbar-menu">                     <ul class="nav navbar-nav" data-in="fadeInDown" data-out="fadeOutUp">                         <li><a href="http://yzshield.com/quot;#">Home</a></li>"                         <li><a href="http://yzshield.com/quot;#">About Us</a></li>"                         <li class="dropdown">                             <a href="http://yzshield.com/quot;#" class="dropdown-toggle" data-toggle="dropdown">Shortcodes</a>"                             <ul class="dropdown-menu animated">                                 <li><a href="http://yzshield.com/quot;#">Custom Menu</a></li>"                                 <li><a href="http://yzshield.com/quot;#">Custom Menu</a></li>"                                 <li class="dropdown">                                     <a href="http://yzshield.com/quot;#" class="dropdown-toggle" data-toggle="dropdown">Sub Menu</a>"                                     <ul class="dropdown-menu animated">                                         <li><a href="http://yzshield.com/quot;#">Custom Menu</a></li>"                                         <li><a href="http://yzshield.com/quot;#">Custom Menu</a></li>"                                         <li class="dropdown">                                             <a href="http://yzshield.com/quot;#" class="dropdown-toggle" data-toggle="dropdown">Sub Menu</a>"                                             <ul class="dropdown-menu multi-dropdown animated">                                                 <li><a href="http://yzshield.com/quot;#">Custom Menu</a></li>"                                                 <li><a href="http://yzshield.com/quot;#">Custom Menu</a></li>"                                                 <li><a href="http://yzshield.com/quot;#">Custom Menu</a></li>"                                                 <li><a href="http://yzshield.com/quot;#">Custom Menu</a></li>"                                             </ul>                                         </li>                                         <li><a href="http://yzshield.com/quot;#">Custom Menu</a></li>"                                     </ul>                                 </li>                                 <li><a href="http://yzshield.com/quot;#">Custom Menu</a></li>"                                 <li><a href="http://yzshield.com/quot;#">Custom Menu</a></li>"                                 <li><a href="http://yzshield.com/quot;#">Custom Menu</a></li>"                                 <li><a href="http://yzshield.com/quot;#">Custom Menu</a></li>"                             </ul>                         </li>                         <li class="dropdown">                             <a href="http://yzshield.com/quot;#" class="dropdown-toggle" data-toggle="dropdown">Pages</a>"                             <ul class="dropdown-menu animated">                                 <li><a href="http://yzshield.com/quot;#">Custom Menu</a></li>"                                 <li><a href="http://yzshield.com/quot;#">Custom Menu</a></li>"                                 <li class="dropdown">                                     <a href="http://yzshield.com/quot;#" class="dropdown-toggle" data-toggle="dropdown">Sub Menu</a>"                                     <ul class="dropdown-menu animated">                                         <li><a href="http://yzshield.com/quot;#">Custom Menu</a></li>"                                         <li><a href="http://yzshield.com/quot;#">Custom Menu</a></li>"                                         <li class="dropdown">                                             <a href="http://yzshield.com/quot;#" class="dropdown-toggle" data-toggle="dropdown">Sub Menu</a>"                                             <ul class="dropdown-menu multi-dropdown animated">                                                 <li><a href="http://yzshield.com/quot;#">Custom Menu</a></li>"                                                 <li><a href="http://yzshield.com/quot;#">Custom Menu</a></li>"                                                 <li><a href="http://yzshield.com/quot;#">Custom Menu</a></li>"                                                 <li><a href="http://yzshield.com/quot;#">Custom Menu</a></li>"                                             </ul>                                         </li>                                         <li><a href="http://yzshield.com/quot;#">Custom Menu</a></li>"                                     </ul>                                 </li>                                 <li><a href="http://yzshield.com/quot;#">Custom Menu</a></li>"                                 <li><a href="http://yzshield.com/quot;#">Custom Menu</a></li>"                                 <li><a href="http://yzshield.com/quot;#">Custom Menu</a></li>"                                 <li><a href="http://yzshield.com/quot;#">Custom Menu</a></li>"                             </ul>                         </li>                         <li><a href="http://yzshield.com/quot;#">Portfolio</a></li>"                         <li><a href="http://yzshield.com/quot;#">Contact Us</a></li>"                     </ul>                 </div>             </nav>         </div>     </div> </div> CSS样式使用下面的CSS代码来对多级导航菜单进行美化。.navbar-brand{     padding: 29px 15px;     height: auto; } nav.navbar.bootsnav{     border: none;     margin-bottom: 150px; } .navbar-nav{     float: left; } nav.navbar.bootsnav ul.nav > li > a{     color: #474747;     text-transform: uppercase;     padding: 30px; } nav.navbar.bootsnav ul.nav > li:hover{     background: #f4f4f4; } .nav > li:after{     content: "";     width: 0;     height: 5px;     background: #34c9dd;     position: absolute;     bottom: 0;     left: 0;     transition: all 0.5s ease 0s; } .nav > li:hover:after{     width: 100%; } nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after{     content: "+";     font-family: 'FontAwesome';     font-size: 16px;     font-weight: 500;     position: absolute;     top: 35%;     right: 10%;     transition: all 0.4s ease 0s; } nav.navbar.bootsnav ul.nav > li.dropdown.on > a.dropdown-toggle:after{     content: "\f105";     transform: rotate(90deg); } .dropdown-menu.multi-dropdown{     position: absolute;     left: -100% !important; } nav.navbar.bootsnav li.dropdown ul.dropdown-menu{     box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);     border: none; } @media only screen and (max-width:990px){     nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after,     nav.navbar.bootsnav ul.nav > li.dropdown.on > a.dropdown-toggle:after{ content: " "; }     .dropdown-menu.multi-dropdown{ left: 0 !important; }     nav.navbar.bootsnav ul.nav > li:hover{ background: transparent; }     nav.navbar.bootsnav ul.nav > li > a{ margin: 0; } }
相关伟德BETVICTOR-水平导航,其他导航

jQuery滑动导航伟德BETVICTOR

jQuery滑动导航伟德BETVICTOR 左右多弹一点
  水平导航
 17625  112

导航滑动下拉

导航滑动下拉
  水平导航
 21819  110

动态导航菜单

jquery导航菜单制作一个类似熔岩灯jquery动画菜单效果,自适应导航菜单显示
  水平导航
 24616  135

jQueryUI横向导航栏

基于jQueryUI的三级菜单导航栏,横向全屏,蓝色商务风格,简约大方。我们公司正在用这个伟德BETVICTOR。
  水平导航
 21221  99

讨论这个项目(7)回答他人问题或分享伟德BETVICTOR使用方法奖励jQ币

    calico 0
    2017/12/22 17:14:05
    大胖丶 0
    2017/11/30 14:28:29
    用的angular框架,直接导入js不生效,找不到dom节点,把其中用到的那一段直接放进controller里面就可以了 回复
    0
    2017/11/8 17:20:55
    怎么用啊
        殴根殴根0
        2017/11/20 11:05:26
        先下载bootstrap然后再引入就行了
    回复
    凡璃 0
    2017/10/29 13:48:55
    伟德BETVICTOR还是不错的,改变ul形式就可以改选项了 回复
    夜微凉 0
    2017/9/26 9:57:09
    有bug,当改变浏览器大小后,鼠标再hover菜单栏的时候,下拉不显示,要刷新页面才可以
        时光与你皆回忆丶0
        2017/9/26 10:09:47
        恩恩   有这个问题  但是也不算什么的大的bug  一般都会刷新的
    回复
取消回复