素材8网-专注前端素材！
来源：https://www.sucai8.cn/29924.html

基于bootstrap的菜单栏多级菜单多级导航特效

  • 1828
  • 0
  • 0
jQuery Bootstrap简洁的响应式导航下拉菜单代码

这是一款基于bootsnav的简洁多级导航菜单。bootsnav是以bootstrap为基础的导航菜单插件。被多级导航菜单效果是在bootsnav的基础上，对菜单样式进行了一些美化加工。

引入：
  1. <link href="path/to/bootstrap.min.css" rel="stylesheet">
  2. <link href="path/to/font-awesome.min.css" rel="stylesheet">
  3. <link rel="stylesheet" type="text/css" href="css/bootsnav.css">
  4. <script type="text/javascript" src="path/to/bootsnav.js"></script>
  5. <script src="path/to/bootstrap.min.js"></script>
  6. <script type="text/javascript" src="path/to/bootsnav.js"></script>            
复制代码
HTML结构：
  1. <div class="container">
  2.     <div class="row">
  3.         <div class="col-md-12">
  4.             <nav class="navbar navbar-default navbar-mobile bootsnav on">
  5.                 <div class="navbar-header">
  6.                     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
  7.                         <i class="fa fa-bars"></i>
  8.                     </button>
  9.                 </div>
  10.                 <div class="collapse navbar-collapse" id="navbar-menu">
  11.                     <ul class="nav navbar-nav" data-in="fadeInDown" data-out="fadeOutUp">
  12.                         <li><a href="#">Home</a></li>
  13.                         <li><a href="#">About Us</a></li>
  14.                         <li class="dropdown">
  15.                             <a href="#" class="dropdown-toggle" data-toggle="dropdown">Shortcodes</a>
  16.                             <ul class="dropdown-menu animated">
  17.                                 <li><a href="#">Custom Menu</a></li>
  18.                                 <li><a href="#">Custom Menu</a></li>
  19.                                 <li class="dropdown">
  20.                                     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Sub Menu</a>
  21.                                     <ul class="dropdown-menu animated">
  22.                                         <li><a href="#">Custom Menu</a></li>
  23.                                         <li><a href="#">Custom Menu</a></li>
  24.                                         <li class="dropdown">
  25.                                             <a href="#" class="dropdown-toggle" data-toggle="dropdown">Sub Menu</a>
  26.                                             <ul class="dropdown-menu multi-dropdown animated">
  27.                                                 <li><a href="#">Custom Menu</a></li>
  28.                                                 <li><a href="#">Custom Menu</a></li>
  29.                                                 <li><a href="#">Custom Menu</a></li>
  30.                                                 <li><a href="#">Custom Menu</a></li>
  31.                                             </ul>
  32.                                         </li>
  33.                                         <li><a href="#">Custom Menu</a></li>
  34.                                     </ul>
  35.                                 </li>
  36.                                 <li><a href="#">Custom Menu</a></li>
  37.                                 <li><a href="#">Custom Menu</a></li>
  38.                                 <li><a href="#">Custom Menu</a></li>
  39.                                 <li><a href="#">Custom Menu</a></li>
  40.                             </ul>
  41.                         </li>
  42.                         <li class="dropdown">
  43.                             <a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages</a>
  44.                             <ul class="dropdown-menu animated">
  45.                                 <li><a href="#">Custom Menu</a></li>
  46.                                 <li><a href="#">Custom Menu</a></li>
  47.                                 <li class="dropdown">
  48.                                     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Sub Menu</a>
  49.                                     <ul class="dropdown-menu animated">
  50.                                         <li><a href="#">Custom Menu</a></li>
  51.                                         <li><a href="#">Custom Menu</a></li>
  52.                                         <li class="dropdown">
  53.                                             <a href="#" class="dropdown-toggle" data-toggle="dropdown">Sub Menu</a>
  54.                                             <ul class="dropdown-menu multi-dropdown animated">
  55.                                                 <li><a href="#">Custom Menu</a></li>
  56.                                                 <li><a href="#">Custom Menu</a></li>
  57.                                                 <li><a href="#">Custom Menu</a></li>
  58.                                                 <li><a href="#">Custom Menu</a></li>
  59.                                             </ul>
  60.                                         </li>
  61.                                         <li><a href="#">Custom Menu</a></li>
  62.                                     </ul>
  63.                                 </li>
  64.                                 <li><a href="#">Custom Menu</a></li>
  65.                                 <li><a href="#">Custom Menu</a></li>
  66.                                 <li><a href="#">Custom Menu</a></li>
  67.                                 <li><a href="#">Custom Menu</a></li>
  68.                             </ul>
  69.                         </li>
  70.                         <li><a href="#">Portfolio</a></li>
  71.                         <li><a href="#">Contact Us</a></li>
  72.                     </ul>
  73.                 </div>
  74.             </nav>
  75.         </div>
  76.     </div>
  77. </div>      
复制代码
CSS结构：
  1. .navbar-brand{
  2.     padding: 29px 15px;
  3.     height: auto;
  4. }
  5. nav.navbar.bootsnav{
  6.     border: none;
  7.     margin-bottom: 150px;
  8. }
  9. .navbar-nav{
  10.     float: left;
  11. }
  12. nav.navbar.bootsnav ul.nav > li > a{
  13.     color: #474747;
  14.     text-transform: uppercase;
  15.     padding: 30px;
  16. }
  17. nav.navbar.bootsnav ul.nav > li:hover{
  18.     background: #f4f4f4;
  19. }
  20. .nav > li:after{
  21.     content: "";
  22.     width: 0;
  23.     height: 5px;
  24.     background: #34c9dd;
  25.     position: absolute;
  26.     bottom: 0;
  27.     left: 0;
  28.     transition: all 0.5s ease 0s;
  29. }
  30. .nav > li:hover:after{
  31.     width: 100%;
  32. }
  33. nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after{
  34.     content: "+";
  35.     font-family: 'FontAwesome';
  36.     font-size: 16px;
  37.     font-weight: 500;
  38.     position: absolute;
  39.     top: 35%;
  40.     right: 10%;
  41.     transition: all 0.4s ease 0s;
  42. }
  43. nav.navbar.bootsnav ul.nav > li.dropdown.on > a.dropdown-toggle:after{
  44.     content: "\f105";
  45.     transform: rotate(90deg);
  46. }
  47. .dropdown-menu.multi-dropdown{
  48.     position: absolute;
  49.     left: -100% !important;
  50. }
  51. nav.navbar.bootsnav li.dropdown ul.dropdown-menu{
  52.     box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  53.     border: none;
  54. }
  55. @media only screen and (max-width:990px){
  56.     nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after,
  57.     nav.navbar.bootsnav ul.nav > li.dropdown.on > a.dropdown-toggle:after{ content: " "; }
  58.     .dropdown-menu.multi-dropdown{ left: 0 !important; }
  59.     nav.navbar.bootsnav ul.nav > li:hover{ background: transparent; }
  60.     nav.navbar.bootsnav ul.nav > li > a{ margin: 0; }
  61. }  
复制代码
相关素材
基于bootstrap的菜单栏多级菜单多级导航特效
  • qq简兮F0u 刚刚下载了一个素材
  • qq火狐狸kXo 刚刚下载了一个素材
  • x2600 刚刚下载了一个素材
  • 李祥 刚刚下载了一个素材
  • Y2091 刚刚下载了一个素材
  • 方郁升 刚刚下载了一个素材
  • qqJqi 刚刚下载了一个素材
  • 不熬夜123123 刚刚下载了一个素材
  • 希依 刚刚下载了一个素材
  • 執筆寫下思 刚刚下载了一个素材
  • qq加载中UdF 刚刚下载了一个素材
  • 趙星 刚刚下载了一个素材
  • 核桃酥 刚刚下载了一个素材
  • qqRUE 刚刚下载了一个素材
  • 我头像帅不帅 刚刚下载了一个素材
分享者：
分享者头像
小编
热门素材推荐
HTML素材网，HTML5模板，网页特效 微信公众账号二维码 淘宝店铺地址二维码
Copyright©2024  素材8  Powered by 智伙伴科技
   鲁ICP备14029286号-5 鲁公网安备37060202001967号
返回顶部返回顶部
发布主题