css轉換的花式菜單

Question

我做了一些css3轉換的菜單。我只是想分享一下，因爲我在我製作的網站上使用了很多（也因爲我想嘗試「回答你自己的問題」 - stackoverflow選項）。

Answer 1

HTML：

<nav> 
    <li class="active"> 
     <a href="#">Home</a> 
    </li> 
    <li> 
     <a href="#">This</a> 
    </li> 
    <li> 
     <a href="#">That</a> 
    </li> 
    <li> 
     <a href="#">Everything</a> 
    </li> 
</nav>​ 

CSS：

nav{ 
    display:table; 
    margin: 10px; 
    overflow:auto; 
    border-left: solid 1px #ccc; 
} 

nav li a, 
nav:hover li.active a{ 
    color: #ccc; 
    text-decoration:none; 
    padding: 0 10px; 
    background: transparent; 
    font-size: 2em; 
    text-transform:uppercase; 
    font-family: Arial, Verdana, Sans-serif; 
    border: solid 1px #ccc; 
    border-width: 1px 1px 1px 0; 
} 

nav li{ 
    float:left; 
    padding:0; 
    list-style:none; 
} 

nav li.active a, 
nav li a:hover, 
nav:hover li.active a:hover{ 
    background: #ccc; 
    color:white; 
} 

nav li a{ /* Transition-effects */ 
    transition: all 0.4s linear; 
    -o-transition: all 0.4s linear; 
    -ms-transition: all 0.4s linear; 
    -moz-transition: all 0.4s linear; 
    -webkit-transition: all 0.4s linear; 
} 

的jsfiddle演示：
http://jsfiddle.net/BN8Sm/

您可以使用它例如在Drupalsites，你有一個菜單項與活躍的班級。