I am trying to create pure css menu using below code (only HTML and CSS), i have completed the coding, but now I want to add some cool animation like the line given, I have attached a fiddle link of my code, and also animation link which I want to include in my code.
Please help.
I have also included my code below.
HTML Code:
<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 CODE:
.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;
}
You're close, I'd recommend you take a look at this tutorial:
http://webdesign.tutsplus.com/articles/css3-transitions-and-transforms-from-scratch--webdesign-4975
Basically what you need need to add:
transform: translate(x,y);
y being up and down and x right and left. In your case that might be:
transform: translate(0,10px);
Here is your updated 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;
}
Fiddle: https://jsfiddle.net/oksq6c3e/
Note: You can add a arrow PNG
or SVG
to make it look like the referee URL to display the indicator.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.