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

  • A+
所属分类:HTML5+CSS3 JavaScript

HTML

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

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

CSS

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

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

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

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

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

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

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

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

JavaScript

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

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

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

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

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

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

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: