我正在尝试使用下面的代码(只有HTML和CSS)创建纯css菜单,我已经完成了编码,但现在我想添加一些很酷的动画,如给出的行,我附上了我的代码的小提琴链接,以及我想要包含在我的代码中的动画链接。
请帮忙。
我还在下面提供了我的代码。
HTML代码:
<div class="container">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">WordPress</a>
<!-- First Tier Drop Down -->
<ul>
<li><a href="#">Themes</a></li>
<li><a href="#">Plugins</a></li>
<li><a href="#">Tutorials</a></li>
</ul>
</li>
<li><a href="#">Web Design</a>
<!-- First Tier Drop Down -->
<ul>
<li><a href="#">Resources</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Tutorials</a>
<!-- Second Tier Drop Down -->
<ul>
<li><a href="#">HTML/CSS</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Other</a>
<!-- Third Tier Drop Down -->
<ul>
<li><a href="#">Stuff</a></li>
<li><a href="#">Things</a></li>
<li><a href="#">Other Stuff</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
CSS代码:
.container{
margin: 0 auto;
}
a{
color: #fff;
}
nav {
margin: 50px 0;
background-color: #E64A19;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li{
display: inline-block;
background-color: #E64A19;
}
nav a{
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
nav a:hover{
background: #000;
color: white;
text-decoration: none;
}
nav ul ul{
visibility: hidden;
position: absolute;
top: 60px;
opacity:0;
transition:all 0.5s ease-in-out;
}
nav ul li:hover > ul{
visibility: visible;
opacity:1;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
display:block;
position: relative;
}
/* Second, Third and more Tiers */
nav ul ul ul li {
position: relative;
top:-60px;
left:170px;
}
答案 0 :(得分:0)
您已经关闭,我建议您查看本教程:
http://webdesign.tutsplus.com/articles/css3-transitions-and-transforms-from-scratch--webdesign-4975
基本上你需要添加:
transform: translate(x,y);
y上下左右x左右。在您的情况下可能是:
transform: translate(0,10px);
答案 1 :(得分:0)
这是您更新的css:
.container{
margin: 0 auto;
}
a{
color: #fff;
}
nav {
margin: 50px 0;
background-color: #E64A19;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li{
display: inline-block;
background-color: #E64A19;
}
nav a{
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
nav a:hover{
background: #000;
color: white;
text-decoration: none;
}
nav ul ul{
visibility: hidden;
position: absolute;
top: 50px;
opacity:0;
transform: translate(0,0);
transition:all 0.5s ease-in-out;
}
nav ul li:hover > ul{
visibility: visible;
opacity:1;
}
nav ul li:hover > ul{
top: 10px;
transform: translate(0,60px);
-webkit-transform: translate(0,60px); /** Chrome & Safari **/
-o-transform: translate(0,60px); /** Opera **/
-moz-transform: translate(0,60px); /** Firefox **/
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
display:block;
position: relative;
}
/* Second, Third and more Tiers */
nav ul ul ul li {
position: relative;
top:-60px;
left:170px;
}
小提琴:https://jsfiddle.net/oksq6c3e/
注意:您可以添加箭头PNG
或SVG
,使其看起来像是显示指标的裁判网址。