html - css-transitions を使用したファンシー メニュー

Question

いくつかの css3 トランジションでメニューを作成しました。これを共有したいのは、私が作成した Web サイトでよく使用するためです (また、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 で使用できます。