首页>>导航菜单>>js+css交互式圆形图标菜单导航(2019-06-26)

js+css交互式圆形图标菜单导航

js+css交互式圆形图标菜单导航
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="toggle" id="toggle" onClick="menu-expand()">  
  2.     <i class="fa fa-plus" id="plus"></i>  
  3. </div>  
  4.   
  5. <div class="menu" id="menu">  
  6.     <a href="#"><i class="fa fa-microphone"></i></a>  
  7.     <a href="#"><i class="fa fa-user"></i></a>  
  8.     <a href="#"><i class="fa fa-video-camera"></i></a>  
  9.     <a href="#"><i class="fa fa-envelope"></i></a>  
  10.     <a href="#"><i class="fa fa-camera"></i></a>  
  11.     <a href="#"><i class="fa fa-bell"></i></a>  
  12. </div>  

 

JavaScript Code
  1. var i=0;  
  2. function expand(){  
  3.   if(i==0){  
  4. document.getElementById("menu").style.transform="scale(3)";   
  5.    document.getElementById("plus").style.transform="rotate(45deg)";   
  6.     i=1;  
  7.   }  
  8.   else{   document.getElementById("menu").style.transform="scale(0)";   
  9.    document.getElementById("plus").style.transform="rotate(0deg)";   
  10.     i=0;  
  11.   }  
  12. }  

 


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