首页>>导航菜单>>右侧自适应导航菜单(2018-10-23)

右侧自适应导航菜单

右侧自适应导航菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1.  <nav class="navbar navbar-expand-md navbar-dark bg-dark navbar-offcanvas">  
  2.     <div class="container-fluid">  
  3.         <a class="navbar-brand" href="#">Navbar</a>  
  4.         <ul class="navbar-nav navbar-top">  
  5.             <li class="nav-item active">  
  6.                 <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>  
  7.             </li>  
  8.             <li class="nav-item">  
  9.                 <a class="nav-link" href="#">Link</a>  
  10.             </li>  
  11.             <li class="nav-item">  
  12.                 <a class="nav-link disabled" href="#">Disabled</a>  
  13.             </li>  
  14.             <li class="nav-item dropdown">  
  15.                 <a class="nav-link dropdown-toggle" role="button" href="#!" id="dropdownExample" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>  
  16.                 <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownExample">  
  17.                     <a class="dropdown-item" href="#">Action</a>  
  18.                     <a class="dropdown-item" href="#">Another action</a>  
  19.                     <a class="dropdown-item" href="#">Something else here</a>  
  20.                 </div>  
  21.             </li>  
  22.         </ul>  
  23.         <button class="navbar-toggler navbar-toggler-right navbar-icon" type="button" data-toggle="collapse" data-target="#navbar-mobile" aria-controls="navbar-mobile" aria-expanded="false" aria-label="Toggle navigation">  
  24.             <span class="icon-bar bar1"></span>  
  25.             <span class="icon-bar bar2"></span>  
  26.             <span class="icon-bar bar3"></span>  
  27.         </button>  
  28.         <div class="navbar-collapse collapse ml-auto" id="navbar-mobile">  
  29.             <ul class="navbar-nav ml-auto">  
  30.                 <li class="nav-image">  
  31.                     <img src="http://www.freejs.net/images/logo.png" alt="">  
  32.                 </li>  
  33.                 <li class="nav-item">  
  34.                     <a href="#!" class="nav-link">Link</a>  
  35.                 </li>  
  36.                 <li class="nav-item">  
  37.                     <a href="#!" class="nav-link">Link</a>  
  38.                 </li>  
  39.                 <li class="nav-item">  
  40.                     <a href="#!" class="nav-link">Link</a>  
  41.                 </li>  
  42.             </ul>  
  43.         </div>  
  44.     </div>  
  45. </nav>  

 


原文地址:http://www.freejs.net/article_daohangcaidan_716.html