CSS菜单转换 [英] CSS Menu Transition
问题描述
JSFiddle: http://jsfiddle.net/x6bM3/
JSFiddle: http://jsfiddle.net/x6bM3/
如果你将鼠标悬停在产品链接上,你会看到我创建了一个下拉效果,但是我想做的是给它一个很好的过渡,而不是它刚刚出现。
我已经尝试使用:hover与菜单的各个部分的css转换,但研究后,我意识到动画不会与display:none;在上面。请帮助,
If you hover over the products link you will see i have created a drop down effect, but what im trying to do is give it a nice transition instead of it just appearing. I have tried using :hover with the css transitions on various parts of the menu, but after researching it i realised the animation wont work with display: none; on it. Please help,
提前感谢
Adam
Thanks in advance, Adam
CSS:
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
list-style: none;
position: relative;
display: inline-table;
margin-top: 23px;
padding: 0;
float: left;
}
nav ul:after {
content:"";
display: block;
}
nav ul li {
float: left;
height: 50px;
width: auto;
padding: 5px;
margin-left: 22px;
}
nav ul li a {
display: block;
text-decoration: none;
}
nav ul ul {
background: #363c43;
border-radius: 3px;
border: 1px solid #2e363f;
padding: 7px;
position: absolute;
font-size: 0.9em;
}
nav ul ul:before {
content:'';
display:block;
width:0;
height:0;
position:absolute;
border-right: 7px solid transparent;
border-left: 7px solid transparent;
border-bottom:10px solid #363c43;
top:-8px;
left: 30px;
}
nav ul ul li {
height: 30px;
float: none;
position: relative;
padding: 0px 0px 5px 0px;
margin: 0px;
}
/* Other base styles */
* {
font-family: arial;
}
a:link, a:visited {
color: #979797;
font-size: 1.145em;
/* 18px */
text-decoration: none;
font-weight: lighter;
-webkit-transition: all .25s linear;
transition: color .25s linear;
}
a:hover {
color: #c4c1c1;
font-size: 1.145em;
/* 22px */
text-decoration: none;
}
HTML:
<nav>
<ul class="menu">
<li><a href="index.php">home</a>
</li>
<li><a href="index.php">products</a>
<ul>
<li><a href="#">product 1</a>
</li>
<li><a href="#">product 2</a>
</li>
</ul>
</li>
<li><a href="index.php">solutions</a>
</li>
</ul>
</nav>
推荐答案
我可以详细解释,伟大的工作: http://stackoverflow.com/a/3332179/363605
I can explain in detail, but this person does a great job: http://stackoverflow.com/a/3332179/363605
nav ul ul {
display: block;
-webkit-transition: opacity 1s ease-in;
-moz-transition: opacity 1s ease-in;
-o-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
opacity: 0;
height: 0;
overflow: hidden;
}
nav ul li:hover > ul {
height: auto;
opacity: 1;
}
这篇关于CSS菜单转换的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!