首页>>导航菜单>>Sidenav 左侧手机/PC侧边栏效果，支持各种浏览器(2018-07-09)

Sidenav 左侧手机/PC侧边栏效果，支持各种浏览器

Sidenav 左侧手机/PC侧边栏效果，支持各种浏览器
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="col s12 m8 offset-m1 xl7 offset-xl1">  
  2.         <div id="structure" class="section scrollspy">  
  3.             
  4.           <a href="#" data-target="slide-out" class="sidenav-trigger btn">点击打开侧边栏</a>  
  5.           <ul id="slide-out" class="sidenav" style="transform: translateX(-105%);">  
  6.             <li>  
  7.               <div class="user-view">  
  8.                 <div class="background"> <img src="css/office.jpg"> </div>  
  9.                 <a href="#user"> <img class="circle" src="css/yuna.jpg"> </a> <a href="#name"> <span class="white-text name">John Doe</span> </a> <a href="#email"> <span class="white-text email">jdandturk@gmail.com</span> </a> </div>  
  10.             </li>  
  11.             <li> <a href="#!"> <i class="material-icons">cloud</i>First Link With Icon</a> </li>  
  12.             <li> <a href="#!">Second Link</a> </li>  
  13.             <li>  
  14.               <div class="divider"></div>  
  15.             </li>  
  16.             <li> <a class="subheader">Subheader</a> </li>  
  17.             <li> <a class="waves-effect" href="#!">Third Link With Waves</a> </li>  
  18.           </ul>  
  19.           <br>  
  20.         </div>  
  21.       </div>  

 


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