Awesome And Stylish Smooth Sliding Menu On-Hover

There are many Menu available over internet and have different features but here we have Smooth Sliding Menu On-Hover simple menu that will save your web page space that you can use for other widgets but still have all links to show.

Now Smooth Sliding Menu On-Hover is simple that will display only one bar but when you will hover on that then there will a DIV open by sliding and will push the rest web page down smoothly and on removing hover the DIV will be back again smothly perfectly. Now go for the DEMO and then garb tyhe code.

Features:

1.) JQuery File Added.
2.) JavaScript Codes Added.
3.) CSS Added.
4.) Simple And Fast Loading Code.
5.) Can Work With Any Mobile Browser.

How To Add In A WebPage?

1.) Just Go To Your “Web Page File”.
2.) Now “Copy” The Below Codes And “Paste” It To There Positions.
3.) “Save” It, Now You Are Done.

CSS:

<style type="text/css">
* {
margin: 0px;
outline: none;
}
#exeideas_menu {
overflow: hidden;
font-family: "Open Sans";
height: 35px;
background-color: #00c4ff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0px 3px 2px -1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 3px 2px -1px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 2px -1px rgba(0, 0, 0, 0.2);
color: #000;
}
#exeideas_menu_div {
color:#fff;
}
#exeideas_menu_div a{
color:#fff;
text-decoration:none;
}
#exeideas_menu span {
display: block;
font-size: 20px;
width: 100%;
height: 35px;
line-height: 35px;
text-align: center;
cursor: pointer;
}
#exeideas_menu ul.main_ul {
font-size: 16px;
}
#exeideas_menu ul.sub_ul {
margin-left: -20px;
font-size: 16px;
}
ul.main_ul li:hover {
background: rgba(0, 0, 0, 0.1)!important;
width: 290px;
}
ul.main_ul li:hover ul.sub_ul {
display:block;
}
ul.sub_ul {
display:none;
top: 60px;
background: rgba(0, 0, 0, 0.1)!important;
left: 350px;
width:400px;
height:337px;
position: absolute;
font-size: 20px;
}
</style>

JavaScript/JQuery:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
onload = function() {
$("#exeideas_menu").hover(function() {
$(this).stop().animate({"height":"250px"},1000).addClass("exeideas_menu_open");
}, function() {
$(this).stop().animate({"height":"35px"},1000).removeClass("exeideas_menu_open");
});
}
</script>

HTML:

<div id="exeideas_menu">
<span>Explore Our Blog...!!!</span>
<hr/>
<div id="exeideas_menu_div">
<ul>
<li><a href='https://www.exeideas.com/p/about-us.html'>About Us</a></li>
<li><a href='https://www.exeideas.com/p/write-for-us.html'>Write For Us</a></li>
<li><a href='https://www.exeideas.com/p/list-of-post.html'>List Of Posts</a></li>
<li><a href='https://www.exeideas.com/p/advertise-here.html'>Advertise Here</a></li>
<li><a href='https://www.exeideas.com/p/disclaimer.html'>Disclaimer</a></li>
<li><a href='https://www.exeideas.com/p/privacy-policy.html'>Privacy Policy</a></li>
<li><a href='https://www.exeideas.com/p/document.html'>Fourm</a></li>
<li><a href='https://www.exeideas.com/p/copyright.html'>Copyright</a></li>
<li><a href='https://www.exeideas.com/p/contact-us.html'>Contact Us</a></li>
</ul>
</div>
</div>

Customization:

1.) HTML-CSS-JavaScript Is Ok For General Us. If You Are Pro, Then You Can Do Any Thing.

Last Words:

That’s all we have. If you have any problem with this code in your template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…