用 CSS3 和 JavaScript 制作徑向動畫菜單
今天，讓我們來看看：如何使用CSS3和JavaScript輕松地實(shí)現(xiàn)一個簡單的徑向動畫菜單。
看看下面的演示，點(diǎn)擊按鈕，彈出徑向菜單。
上面的codepen示例呈現(xiàn)了代碼，那么我們來介紹其中的一些細(xì)節(jié)。
HTML
我們看看HTML。我們使用HTML5的nav元素，包含一些鏈接元素和激活徑向菜單的按鈕。
- <nav class="circular-menu">
- <div class="circle">
- <a href="" class="fa fa-home fa-2x"></a>
- <a href="" class="fa fa-facebook fa-2x"></a>
- <a href="" class="fa fa-twitter fa-2x"></a>
- <a href="" class="fa fa-linkedin fa-2x"></a>
- <a href="" class="fa fa-github fa-2x"></a>
- <a href="" class="fa fa-rss fa-2x"></a>
- <a href="" class="fa fa-pinterest fa-2x"></a>
- <a href="" class="fa fa-asterisk fa-2x"></a>
- </div>
- <a href="" class="menu-button fa fa-bars fa-2x"></a>
- </nav>
我使用了Font Awesome圖標(biāo)，同時在a標(biāo)簽中添加了必要的類，以便為徑向菜單中的菜單項(xiàng)附著漂亮的圖標(biāo)。
CSS
下面，我們看看部分CSS。首先，我們定義了徑向菜單根容器（這里指帶有circular-menu類的nav元素）的寬和高。我們也將position屬性定義為relative，以便于相對定位所含的菜單項(xiàng)。
- .circular-menu {
- width: 250px;
- height: 250px;
- margin: 50px auto 0;
- position: relative;
- }
默認(rèn)情況下，菜單項(xiàng)是隱藏的。我們想作出漂亮的“淡入淡出+縮放”效果，所以初始化菜單項(xiàng)時，將透明度設(shè)為0，并把transform屬性的scale值設(shè)為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屬性來定義動畫。
為了讓菜單項(xiàng)完成放大和淡入效果，我們希望在類之間進(jìn)行切換。因此我們?yōu)閺较虿藛味x了一個open類。
- .open.circle {
- opacity: 1;
- -webkit-transform: scale(1);
- -moz-transform: scale(1);
- -transform: scale(1);
- }
一旦open類和circle類出現(xiàn)在同一個元素中，那么這個元素將根據(jù)動畫長度和transition屬性的類型應(yīng)用新的樣式屬性。
當(dāng)然，嵌在circle類里面的a元素也需要樣式。除了一些常規(guī)的大小樣式，將position設(shè)置為absolute非常重要，這使得JavaScript能夠絕對定位徑向菜單中的菜單項(xiàng)。
- .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;
- }
同時我們需要定位、設(shè)計(jì)菜單的開關(guān)按鈕。
- .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;
- }
現(xiàn)在讓我們移步至***部分，這部分使我們的菜單變成真正的徑向菜單。
JavaScript
首先，我們實(shí)現(xiàn)點(diǎn)擊菜單開關(guān)按鈕能夠顯示、隱藏菜單項(xiàng)的功能。
- document.querySelector('.menu-button').onclick = function(e) {
- e.preventDefault(); document.querySelector('.circle').classList.toggle('open');
- }
選取含menu-button類的元素來監(jiān)聽點(diǎn)擊事件。一旦你點(diǎn)擊它，它會選取含circle類元素，并向之添加open類。
現(xiàn)在，***的任務(wù)是：確定菜單項(xiàng)的位置。
- var items = document.querySelectorAll('.circle a');
- for(var i = 0, l = items.length; i < l; i++) {
- items[i].style.left = (50 - 35*Math.cos(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
- items[i].style.top = (50 + 35*Math.sin(-0.5 * Math.PI - 2*(1/l)*i*Math.PI)).toFixed(4) + "%";
- }
***行代碼所做的就是選取嵌在circle類元素里的所有鏈接元素。之后可以遍歷這些元素。
然后，利用基本的幾何圖形，正弦、余弦函數(shù)，迭代(ⅰ)來計(jì)算的CSS的 top和left屬性。
用JavaScript來定位元素，這允許您在菜單使用任何數(shù)量的子元素a，接下來就交給JavaScript的數(shù)學(xué)魔法。
搞定！
我希望這篇文章能幫助你實(shí)現(xiàn)一個很酷的徑向菜單。如果你做的東西真棒，盡情地在評論中分享吧！如果你真心喜歡這個教程，分享到您最喜愛的社交媒體吧！
原文鏈接： CREATIVE PUNCH 翻譯： 伯樂在線 - heloowird
