今天，讓我們來看看：如何使用CSS3和JavaScript輕鬆地實現一個簡單的徑向動畫選單。
看看下面的演示，點選按鈕，彈出徑向選單。
See the Pen Animated radial / circular menu by Creative Punch (@CreativePunch) on CodePen.
上面的codepen示例呈現了程式碼，那麼我們來介紹其中的一些細節。
HTML
我們看看HTML。我們使用HTML5的nav元素，包含一些連結元素和啟用徑向選單的按鈕。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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圖示，同時在a標籤中新增了必要的類，以便為徑向選單中的選單項附著漂亮的圖示。
CSS
下面，我們看看部分CSS。首先，我們定義了徑向選單根容器（這裡指帶有circular-menu類的nav元素）的寬和高。我們也將position屬性定義為relative，以便於相對定位所含的選單項。
|
1 2 3 4 5 6 |
.circular-menu { width: 250px; height: 250px; margin: 50px auto 0; position: relative; } |
預設情況下，選單項是隱藏的。我們想作出漂亮的“淡入淡出+縮放”效果，所以初始化選單項時，將透明度設為0，並把transform屬性的scale值設為0。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.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類。
|
1 2 3 4 5 6 7 |
.open.circle { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -transform: scale(1); } |
一旦open類和circle類出現在同一個元素中，那麼這個元素將根據動畫長度和transition屬性的型別應用新的樣式屬性。
當然，嵌在circle類裡面的a元素也需要樣式。除了一些常規的大小樣式，將position設定為absolute非常重要，這使得JavaScript能夠絕對定位徑向選單中的選單項。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.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; } |
同時我們需要定位、設計選單的開關按鈕。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.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
首先，我們實現點選選單開關按鈕能夠顯示、隱藏選單項的功能。
|
1 2 3 |
document.querySelector('.menu-button').onclick = function(e) { e.preventDefault(); document.querySelector('.circle').classList.toggle('open'); } |
選取含menu-button類的元素來監聽點選事件。一旦你點選它，它會選取含circle類元素，並向之新增open類。
現在，最後的任務是：確定選單項的位置。
|
1 2 3 4 5 6 |
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類元素裡的所有連結元素。之後可以遍歷這些元素。
然後，利用基本的幾何圖形，正弦、餘弦函式，迭代(ⅰ)來計算的CSS的 top和left屬性。
用JavaScript來定位元素，這允許您在選單使用任何數量的子元素a，接下來就交給JavaScript的數學魔法。
搞定！
我希望這篇文章能幫助你實現一個很酷的徑向選單。如果你做的東西真棒，盡情地在評論中分享吧！如果你真心喜歡這個教程，分享到您最喜愛的社交媒體吧！