用 CSS3 和 JavaScript 制作徑向動(dòng)畫(huà)菜單

作者：heloowird 編譯 2014-04-29 10:39:27

今天，讓我們來(lái)看看：如何使用CSS3和JavaScript輕松地實(shí)現(xiàn)一個(gè)簡(jiǎn)單的徑向動(dòng)畫(huà)菜單。

看看下面的演示，點(diǎn)擊按鈕，彈出徑向菜單。

上面的codepen示例呈現(xiàn)了代碼，那么我們來(lái)介紹其中的一些細(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)，同時(shí)在a標(biāo)簽中添加了必要的類(lèi)，以便為徑向菜單中的菜單項(xiàng)附著漂亮的圖標(biāo)。

CSS

下面，我們看看部分CSS。首先，我們定義了徑向菜單根容器（這里指帶有circular-menu類(lèi)的nav元素）的寬和高。我們也將position屬性定義為relative，以便于相對(duì)定位所含的菜單項(xiàng)。

.circular-menu {  
  width: 250px;  
  height: 250px;  
  margin: 50px auto 0;  
  position: relative;  
}

默認(rèn)情況下，菜單項(xiàng)是隱藏的。我們想作出漂亮的“淡入淡出+縮放”效果，所以初始化菜單項(xiàng)時(shí)，將透明度設(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屬性來(lái)定義動(dòng)畫(huà)。

為了讓菜單項(xiàng)完成放大和淡入效果，我們希望在類(lèi)之間進(jìn)行切換。因此我們?yōu)閺较虿藛味x了一個(gè)open類(lèi)。

.open.circle {  
  opacity: 1;  
   
  -webkit-transform: scale(1);  
  -moz-transform: scale(1);  
  -transform: scale(1);  
}

一旦open類(lèi)和circle類(lèi)出現(xiàn)在同一個(gè)元素中，那么這個(gè)元素將根據(jù)動(dòng)畫(huà)長(zhǎng)度和transition屬性的類(lèi)型應(yīng)用新的樣式屬性。

當(dāng)然，嵌在circle類(lèi)里面的a元素也需要樣式。除了一些常規(guī)的大小樣式，將position設(shè)置為absolute非常重要，這使得JavaScript能夠絕對(duì)定位徑向菜單中的菜單項(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í)我們需要定位、設(shè)計(jì)菜單的開(kāi)關(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)擊菜單開(kāi)關(guān)按鈕能夠顯示、隱藏菜單項(xiàng)的功能。

document.querySelector('.menu-button').onclick = function(e) {  
   e.preventDefault(); document.querySelector('.circle').classList.toggle('open');  
}

選取含menu-button類(lèi)的元素來(lái)監(jiān)聽(tīng)點(diǎn)擊事件。一旦你點(diǎn)擊它，它會(huì)選取含circle類(lèi)元素，并向之添加open類(lèi)。

現(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) + "%";  
}