Question

我已经制作了一些包含css3-transitions的菜单。我只想分享这个，因为我在我制作的网站上使用了很多（而且因为我想试试'回答你自己的问题' - 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上使用它，例如你有一个带有活动类的菜单项。

带有css-transitions的精美菜单

1 个答案: