点我啊 css:.btn { position: fixed; right: 100p..._sidebar.dll csdn博客">
当前位置:   article > 正文

原生侧边栏sidebar

sidebar.dll csdn博客

创建侧栏导航

 

  1. html:
  2. <a href="#" class="btn">点我啊</a>
  3. <div class="sidebar is_hidden">
  4. 原生侧边栏
  5. </div>
  6. css:
  7. .btn {
  8. position: fixed;
  9. right: 100px;
  10. top: 200px;
  11. font-size: 30px;
  12. padding: 3px;
  13. background-color: #ff102c;
  14. text-decoration: none;
  15. }
  16. .sidebar {
  17. position: fixed;
  18. top: 0;
  19. bottom: 0;
  20. left: 0;
  21. width: 300px;
  22. background-color: black;
  23. text-align: center;
  24. color: #ff102c;
  25. font-size: 30px;
  26. transition: transform 0.5s ease-out;
  27. }
  28. .sidebar.is_hidden {
  29. transform: translateX(-300px);
  30. }
  31. JavaScript:
  32. const btn = document.querySelector('.btn');
  33. const sidebar = document.querySelector('.sidebar');
  34. btn.addEventListener('click',function () {
  35. sidebar.classList.toggle('is_hidden');
  36. })

  

 效果图:

 

 

转载于:https://www.cnblogs.com/Longhua-0/p/9286746.html

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/喵喵爱编程/article/detail/777643
推荐阅读
相关标签
  

闽ICP备14008679号