CSS3教程

当前位置: HTML5技术网 > CSS3教程 > 用 CSS3 和 JavaScript 制作径向动画菜单

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

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


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




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


HTML


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


  1. <nav class="circular-menu">

  2.   <div class="circle">
  3.     <a href="" class="fa fa-home fa-2x"></a>
  4.     <a href="" class="fa fa-facebook fa-2x"></a>
  5.     <a href="" class="fa fa-twitter fa-2x"></a>
  6.     <a href="" class="fa fa-linkedin fa-2x"></a>
  7.     <a href="" class="fa fa-github fa-2x"></a>
  8.     <a href="" class="fa fa-rss fa-2x"></a>
  9.     <a href="" class="fa fa-pinterest fa-2x"></a>
  10.     <a href="" class="fa fa-asterisk fa-2x"></a>
  11.   </div>

  12.   <a href="" class="menu-button fa fa-bars fa-2x"></a>

  13. </nav>
复制代码

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


CSS


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


  1. .circular-menu {
  2.   width: 250px;
  3.   height: 250px;
  4.   margin: 50px auto 0;
  5.   position: relative;
  6. }
复制代码

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


  1. .circle {
  2.   width: 250px;
  3.   height: 250px;
  4.   opacity: 0;

  5.   -webkit-transform: scale(0);
  6.   -moz-transform: scale(0);
  7.   -transform: scale(0);

  8.   -webkit-transition: all 0.4s ease-out;
  9.   -moz-transition: all 0.4s ease-out;
  10.   transition: all 0.4s ease-out;
  11. }
复制代码

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


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


  1. .open.circle {
  2.   opacity: 1;

  3.   -webkit-transform: scale(1);
  4.   -moz-transform: scale(1);
  5.   -transform: scale(1);
  6. }
复制代码

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


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


  1. .circle a {
  2.   text-decoration: none;
  3.   color: white;
  4.   display: block;
  5.   height: 40px;
  6.   width: 40px;
  7.   line-height: 40px;
  8.   margin-left: -20px;
  9.   margin-top: -20px;
  10.   position: absolute;
  11.   text-align: center;

  12. }

  13. .circle a:hover {
  14.   color: #eef;
  15. }
复制代码

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


  1. .menu-button {
  2.   position: absolute;
  3.   top: calc(50% - 30px);
  4.   left: calc(50% - 30px);
  5.   text-decoration: none;
  6.   text-align: center;
  7.   color: #444;
  8.   border-radius: 50%;
  9.   display: block;
  10.   height: 40px;
  11.   width: 40px;
  12.   line-height: 40px;
  13.   padding: 10px;
  14.   background: #dde;
  15. }

  16. .menu-button:hover {
  17.   background-color: #eef;
  18. }
复制代码

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


JavaScript


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


  1. document.querySelector('.menu-button').onclick = function(e) {
  2.    e.preventDefault(); document.querySelector('.circle').classList.toggle('open');
  3. }
复制代码

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


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


  1. var items = document.querySelectorAll('.circle a');

  2. for(var i = 0, l = items.length; i < l; i++) {
  3.   items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
  4.   items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
  5. }
复制代码

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


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


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

搞定!

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


关键词:CSS3、CSS教程、 JavaScript




【用 CSS3 和 JavaScript 制作径向动画菜单】相关文章

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

2. CSS3制作下拉菜单

3. 一款非常棒的纯CSS3 3D菜单演示及制作教程

4. 使用 jQuery 和 CSS3 制作滑动导航菜单

5. HTML5每日一练之Canvas标签的应用-绘制径向渐变图形

6. HTML5版径向渐变梯度色彩

7. cssSandpaper-兼容IE的CSS3 JavaScript库

8. jQuery/CSS3实现超酷的动画Tab菜单

9. jQuery/CSS3实现超酷的动画Tab菜单

10. 原生体验挡不住!JavaScript开源跨平台框架NativeScript

本文来源:https://www.51html5.com/a1029.html

点击展开全部

﹝用 CSS3 和 JavaScript 制作径向动画菜单﹞相关内容

「用 CSS3 和 JavaScript 制作径向动画菜单」相关专题

其它栏目

也许您还喜欢