css3层叠菜单打开动画特效代码下载
1. HTML代码
<div id="page"> <nav> <div id="center" class="btn"> <div class="icon"> <div class="bar top"></div> <div class="bar middle"></div> <div class="bar bottom"></div> </div> </div> <div id="up" class="btn item"> <span>Contacts</span> </div> <div id="right" class="btn item"> <span>About</span> </div> <div id="bottom" class="btn item"> <span>Widgets</span> </div> <div id="left" class="btn item"> <span>Home</span> </div> </nav></div><script>const navItems = document.querySelectorAll('nav .item');document.querySelector('#center').addEventListener('click',function(){ for(let i=0;i<navItems.length;i++){ navItems[i].classList.toggle('opened') } document.querySelector('#center').classList.toggle('close')})</script>
