html - 带有 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 上使用它，在那里您有一个带有活动类的菜单项。