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