首页>>导航菜单>>原生js简单的侧边栏展开式菜单(2020-04-16)

原生js简单的侧边栏展开式菜单

原生js简单的侧边栏展开式菜单
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <nav>  
  2.     <div class="menu-btn">  
  3.         <div class="line line--1"></div>  
  4.         <div class="line line--2"></div>  
  5.         <div class="line line--3"></div>  
  6.     </div>  
  7.   
  8.     <div class="nav-links">  
  9.         <a href="" class="link">Home</a>  
  10.         <a href="" class="link">Contact</a>  
  11.         <a href="" class="link">Profile</a>  
  12.         <a href="" class="link">About</a>  
  13.     </div>  
  14. </nav>  

 

JavaScript Code
  1. var menuBtn = document.querySelector('.menu-btn');  
  2. var nav = document.querySelector('nav');  
  3. var lineOne = document.querySelector('nav .menu-btn .line--1');  
  4. var lineTwo = document.querySelector('nav .menu-btn .line--2');  
  5. var lineThree = document.querySelector('nav .menu-btn .line--3');  
  6. var link = document.querySelector('nav .nav-links');  
  7. menuBtn.addEventListener('click', () => {  
  8.     nav.classList.toggle('nav-open');  
  9.     lineOne.classList.toggle('line-cross');  
  10.     lineTwo.classList.toggle('line-fade-out');  
  11.     lineThree.classList.toggle('line-cross');  
  12.     link.classList.toggle('fade-in');  
  13. })  

 


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