首页>>导航菜单>>左右侧边栏导航，可以设置滑出和遮罩不同效果(2020-03-17)

左右侧边栏导航，可以设置滑出和遮罩不同效果

左右侧边栏导航，可以设置滑出和遮罩不同效果
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <aside class="myCanvasNav canvi-navbar">  
  2. <div class="canvi-user-info">  
  3. <div class="canvi-user-info__image">  
  4. <img src="http://www.freejs.net/images/logo.png">  
  5. </div>  
  6. <div class="canvi-user-info__data">  
  7. <span class="canvi-user-info__title">Title</span>  
  8. <a href="#" class="canvi-user-info__meta">View site</a>  
  9. <div class="canvi-user-info__close" onClick="t.close();"></div>  
  10. </div>  
  11. </div>  
  12. <ul class="canvi-navigation">  
  13. <li>  
  14. <a href="#" class="canvi-navigation__item">  
  15. <span class="canvi-navigation__icon-wrapper" style="background: #00adff;">  
  16. <span class="canvi-navigation__icon icon-iconmonstr-code-2"></span>  
  17. </span>  
  18. <span class="canvi-navigation__text">Laravel</span>  
  19. </a>  
  20. </li>  
  21. <li>  
  22. <a href="#" class="canvi-navigation__item">  
  23. <span class="canvi-navigation__icon-wrapper" style="background: #0082BF;">  
  24. <span class="canvi-navigation__icon icon-iconmonstr-code-5"></span>  
  25. </span>  
  26. <span class="canvi-navigation__text">CSS</span>  
  27. </a>  
  28. </li>  
  29. <li>  
  30. <a href="#" class="canvi-navigation__item">  
  31. <span class="canvi-navigation__icon-wrapper" style="background: #00567F;">  
  32. <span class="canvi-navigation__icon icon-iconmonstr-code-9"></span>  
  33. </span>  
  34. <span class="canvi-navigation__text">HTML</span>  
  35. </a>  
  36. </li>  
  37. <li>  
  38. <a href="#" class="canvi-navigation__item">  
  39. <span class="canvi-navigation__icon-wrapper" style="background: #002B40;">  
  40. <span class="canvi-navigation__icon icon-iconmonstr-code-11"></span>  
  41. </span>  
  42. <span class="canvi-navigation__text">JavaScript</span>  
  43. </a>  
  44. </li>  
  45. <li>  
  46. <a href="#" class="canvi-navigation__item">  
  47. <span class="canvi-navigation__icon-wrapper" style="background: #009CE5;">  
  48. <span class="canvi-navigation__icon icon-iconmonstr-code-13"></span>  
  49. </span>  
  50. <span class="canvi-navigation__text">Vue.js</span>  
  51. </a>  
  52. </li>  
  53. </ul>  
  54. </aside>  

 

JavaScript Code
  1. <script>  
  2. var t = new Canvi({  
  3.         content: ".js-canvi-content",  
  4.         isDebug: !1,  
  5.         navbar: ".myCanvasNav",  
  6.         openButton: ".js-canvi-open-button--left",  
  7.         position: "left",  
  8.         pushContent: !1,  
  9.         speed: "0.2s",  
  10.         width: "100vw",  
  11.         responsiveWidths: [ {  
  12.             breakpoint: "600px",  
  13.             width: "280px"  
  14.         }, {  
  15.             breakpoint: "1280px",  
  16.             width: "320px"  
  17.         }, {  
  18.             breakpoint: "1600px",  
  19.             width: "380px"  
  20.         } ]  
  21.     })  
  22. </script>  

 


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