Ami Hasan Ami Hasan - 7 days ago 6
CSS Question

navigation menu with sliding hover effect

Can anyone help me to make this ? I have a navigation/menu bar. Whenever i hover on any "li" it gets a background color (red) . What i want to make whenever i move my cursor to next/previous

li
i want to move the
background color
with a smooth effect. and when i move out from the navigation/menu bar the background color(red) should goes back to "Home li" as a default.kindly check my codepen for your easy convenience.



$('nav li').hover(
function() {
$('ul', this).stop().slideDown(200);
},
function() {
$('ul', this).stop().slideUp(200);
}
);

function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}

nav {background: #2ba0db;}
nav ul {font-size : 0;margin : 0;padding : 0;}
nav ul li { display : inline-block; position : relative;}
nav ul li:first-Child {display : inline-block;position : relative;background:red;}

nav ul li a {color : #fff;display : block;font-size:14px;padding:15px 14px; transition : 0.3s linear;text-decoration: none;}

nav ul li:hover {background : red;}

nav ul li ul {border-bottom : 5px solid #2ba0db;display : none;position : absolute;width : 250px;z-index: 1;}
nav ul li ul li {border-top : 1px solid #444;display : block;}

nav ul li ul li:first-child{border-top none;}
nav ul li ul li a {
background: #373737;
display: block;
padding:10px 14px;
text-decoration: none;
}

nav ul li ul li a:hover {
background: #126d9b;
}
ul.topnav li.icon {
display: none;
}

@media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {float: right;display: inline-block;}}

@media screen and (max-width:680px) {
ul.topnav.responsive {position:relative;}
ul.topnav.responsive li.icon {position: absolute;right: 0;top: 0;}
ul.topnav.responsive li {float: none;display: inline; }
ul.topnav.responsive li a {display: block;text-align: left; }
}

<ul>
<li> <a href="#">Categories </a>
<ul>
<li><a href="#">Category One</a></li>
<li><a href="#">Category Two</a></li>
<li><a href="#">Category Three</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
<li class="icon">
<a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
</li>
</ul>




Answer

Is this what you are looking for? (the second example)

https://css-tricks.com/examples/MagicLine/