|
[tr][td]今天，让我们来看看：如何使用CSS3和JavaScript轻松地实现一个简单的径向动画菜单。
看看下面的演示，点击按钮，弹出径向菜单。 图片：093019c3zt3r5zhrzrepww.jpg  上面的codepen示例呈现了代码，那么我们来介绍其中的一些细节。 HTML 我们看看HTML。我们使用HTML5的nav元素，包含一些链接元素和激活径向菜单的按钮。 [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] [*] 复制代码 我使用了Font Awesome图标，同时在a标签中添加了必要的类，以便为径向菜单中的菜单项附着漂亮的图标。 CSS 下面，我们看看部分CSS。首先，我们定义了径向菜单根容器（这里指带有circular-menu类的nav元素）的宽和高。我们也将position属性定义为relative，以便于相对定位所含的菜单项。 [*].circular-menu { [*] width: 250px; [*] height: 250px; [*] margin: 50px auto 0; [*] position: relative; [*]} 复制代码 默认情况下，菜单项是隐藏的。我们想作出漂亮的“淡入淡出+缩放”效果，所以初始化菜单项时，将透明度设为0，并把transform属性的scale值设为0。 [*].circle { [*] width: 250px; [*] height: 250px; [*] opacity: 0; [*] [*] -webkit-transform: scale(0); [*] -moz-transform: scale(0); [*] -transform: scale(0); [*] [*] -webkit-transition: all 0.4s ease-out; [*] -moz-transition: all 0.4s ease-out; [*] transition: all 0.4s ease-out; [*]} 复制代码 你可以看到：我们使用transition属性来定义动画。 为了让菜单项完成放大和淡入效果，我们希望在类之间进行切换。因此我们为径向菜单定义了一个open类。 [*].open.circle { [*] opacity: 1; [*] [*] -webkit-transform: scale(1); [*] -moz-transform: scale(1); [*] -transform: scale(1); [*]} 复制代码 一旦open类和circle类出现在同一个元素中，那么这个元素将根据动画长度和transition属性的类型应用新的样式属性。 当然，嵌在circle类里面的a元素也需要样式。除了一些常规的大小样式，将position设置为absolute非常重要，这使得JavaScript能够绝对定位径向菜单中的菜单项。 [*].circle a { [*] text-decoration: none; [*] color: white; [*] display: block; [*] height: 40px; [*] width: 40px; [*] line-height: 40px; [*] margin-left: -20px; [*] margin-top: -20px; [*] position: absolute; [*] text-align: center; [*] [*]} [*] [*].circle a:hover { [*] color: #eef; [*]} 复制代码 同时我们需要定位、设计菜单的开关按钮。 [*].menu-button { [*] position: absolute; [*] top: calc(50% - 30px); [*] left: calc(50% - 30px); [*] text-decoration: none; [*] text-align: center; [*] color: #444; [*] border-radius: 50%; [*] display: block; [*] height: 40px; [*] width: 40px; [*] line-height: 40px; [*] padding: 10px; [*] background: #dde; [*]} [*] [*].menu-button:hover { [*] background-color: #eef; [*]} 复制代码 现在让我们移步至最后部分，这部分使我们的菜单变成真正的径向菜单。 JavaScript 首先，我们实现点击菜单开关按钮能够显示、隐藏菜单项的功能。 [*]document.querySelector('.menu-button').onclick = function(e) { [*] e.preventDefault(); document.querySelector('.circle').classList.toggle('open'); [*]} 复制代码 选取含menu-button类的元素来监听点击事件。一旦你点击它，它会选取含circle类元素，并向之添加open类。 现在，最后的任务是：确定菜单项的位置。 [*]var items = document.querySelectorAll('.circle a'); [*] [*]for(var i = 0, l = items.length; i < l; i++) { [*] items.style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%"; [*] items.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的数学魔法。 搞定！ 我希望这篇文章能帮助你实现一个很酷的径向菜单。如果你做的东西真棒，尽情地在评论中分享吧！如果你真心喜欢这个教程，分享到您最喜爱的社交媒体吧！ 关键词：CSS3、CSS教程、 JavaScript [/td][/tr] |
|
