Необычное меню с 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, где у вас есть меню-пункт с активный класс.