用 CSS3 和 JavaScript 制作径向动画菜单

开发 前端
今天,让我们来看看:如何使用CSS3和JavaScript轻松地实现一个简单的径向动画菜单。

今天,让我们来看看:如何使用CSS3和JavaScript轻松地实现一个简单的径向动画菜单。

看看下面的演示,点击按钮,弹出径向菜单。


上面的codepen示例呈现了代码,那么我们来介绍其中的一些细节。

HTML

我们看看HTML。我们使用HTML5的nav元素,包含一些链接元素和激活径向菜单的按钮。

  1. <nav class="circular-menu"> 
  2.    
  3.   <div class="circle"> 
  4.     <a href="" class="fa fa-home fa-2x"></a> 
  5.     <a href="" class="fa fa-facebook fa-2x"></a> 
  6.     <a href="" class="fa fa-twitter fa-2x"></a> 
  7.     <a href="" class="fa fa-linkedin fa-2x"></a> 
  8.     <a href="" class="fa fa-github fa-2x"></a> 
  9.     <a href="" class="fa fa-rss fa-2x"></a> 
  10.     <a href="" class="fa fa-pinterest fa-2x"></a> 
  11.     <a href="" class="fa fa-asterisk fa-2x"></a> 
  12.   </div> 
  13.    
  14.   <a href="" class="menu-button fa fa-bars fa-2x"></a> 
  15.    
  16. </nav> 

我使用了Font Awesome图标,同时在a标签中添加了必要的类,以便为径向菜单中的菜单项附着漂亮的图标。

CSS

下面,我们看看部分CSS。首先,我们定义了径向菜单根容器(这里指带有circular-menu类的nav元素)的宽和高。我们也将position属性定义为relative,以便于相对定位所含的菜单项。

  1. .circular-menu {  
  2.   width250px;  
  3.   height250px;  
  4.   margin50px auto 0;  
  5.   positionrelative;  

默认情况下,菜单项是隐藏的。我们想作出漂亮的“淡入淡出+缩放”效果,所以初始化菜单项时,将透明度设为0,并把transform属性的scale值设为0。

  1. .circle {  
  2.   width250px;  
  3.   height250px;  
  4.   opacity: 0;  
  5.    
  6.   -webkit-transform: scale(0);  
  7.   -moz-transform: scale(0);  
  8.   -transform: scale(0);  
  9.    
  10.   -webkit-transition: all 0.4s ease-out;  
  11.   -moz-transition: all 0.4s ease-out;  
  12.   transition: all 0.4s ease-out;  

你可以看到:我们使用transition属性来定义动画。

为了让菜单项完成放大和淡入效果,我们希望在类之间进行切换。因此我们为径向菜单定义了一个open类。

  1. .open.circle {  
  2.   opacity: 1;  
  3.    
  4.   -webkit-transform: scale(1);  
  5.   -moz-transform: scale(1);  
  6.   -transform: scale(1);  

一旦open类和circle类出现在同一个元素中,那么这个元素将根据动画长度和transition属性的类型应用新的样式属性。

当然,嵌在circle类里面的a元素也需要样式。除了一些常规的大小样式,将position设置为absolute非常重要,这使得JavaScript能够绝对定位径向菜单中的菜单项。

  1. .circle a {  
  2.   text-decorationnone;  
  3.   colorwhite;  
  4.   displayblock;  
  5.   height40px;  
  6.   width40px;  
  7.   line-height40px;  
  8.   margin-left-20px;  
  9.   margin-top-20px;  
  10.   positionabsolute;  
  11.   text-aligncenter;  
  12.    
  13. }  
  14.    
  15. .circle a:hover {  
  16.   color#eef;  

同时我们需要定位、设计菜单的开关按钮。

  1. .menu-button {  
  2.   positionabsolute;  
  3.   top: calc(50% - 30px);  
  4.   left: calc(50% - 30px);  
  5.   text-decorationnone;  
  6.   text-aligncenter;  
  7.   color#444;  
  8.   border-radius: 50%;  
  9.   displayblock;  
  10.   height40px;  
  11.   width40px;  
  12.   line-height40px;  
  13.   padding10px;  
  14.   background#dde;  
  15. }  
  16.    
  17. .menu-button:hover {  
  18.   background-color#eef;  

现在让我们移步至***部分,这部分使我们的菜单变成真正的径向菜单。

JavaScript

首先,我们实现点击菜单开关按钮能够显示、隐藏菜单项的功能。

  1. document.querySelector('.menu-button').onclick = function(e) {  
  2.    e.preventDefault(); document.querySelector('.circle').classList.toggle('open');  

选取含menu-button类的元素来监听点击事件。一旦你点击它,它会选取含circle类元素,并向之添加open类。

现在,***的任务是:确定菜单项的位置。

  1. var items = document.querySelectorAll('.circle a');  
  2.    
  3. for(var i = 0, l = items.length; i < l; i++) {  
  4.   items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";  
  5.   items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";  

***行代码所做的就是选取嵌在circle类元素里的所有链接元素。之后可以遍历这些元素。

然后,利用基本的几何图形,正弦、余弦函数,迭代(ⅰ)来计算的CSS的 top和left属性。

用JavaScript来定位元素,这允许您在菜单使用任何数量的子元素a,接下来就交给JavaScript的数学魔法。

搞定!

我希望这篇文章能帮助你实现一个很酷的径向菜单。如果你做的东西真棒,尽情地在评论中分享吧!如果你真心喜欢这个教程,分享到您最喜爱的社交媒体吧!

原文链接: CREATIVE PUNCH   翻译: 伯乐在线 - heloowird

译文链接: http://blog.jobbole.com/65551/

责任编辑:林师授 来源: 伯乐在线
相关推荐

2012-09-13 09:24:31

CSSJSjQ

2012-05-14 16:29:53

HTML5

2012-05-24 11:03:55

HTML5

2017-05-11 15:20:52

CSS3动画前端

2013-01-30 16:15:40

adobeHTML5css3

2012-05-30 09:22:56

Hybrid App助HTML5JavaScript

2011-05-11 16:13:43

CSS3

2014-02-24 13:49:13

HTML5CSS3下拉菜单

2009-11-05 10:33:06

CSS菜单

2011-06-29 13:22:58

CSS3

2015-10-14 09:50:11

css3动画模拟

2011-11-18 13:25:48

HTML 5

2011-03-22 08:54:02

HTML 5CSS3JavaScript

2012-06-07 09:23:45

ibmdw

2015-10-10 14:22:46

jQueryCSS3栏菜单

2012-05-11 09:37:34

HTML5

2021-09-08 22:28:13

前端Css3动画

2015-12-01 09:52:03

CSS3动画源码

2017-05-03 11:30:20

CSS3小黄人动画

2012-12-26 10:34:56

CSSWeb前端
点赞
收藏

51CTO技术栈公众号