Stylish JQuery Horizontal Accordion Menu On Hover

In the new era of web designing there are many ways to add a menu bar to attract users and also to help users to go ahead with easy clicks but some web pages have too many important links that they want to show them off in menu bar every
time.

So now here we have a JQuery Horizontal Accordion Menu that will be like a simple menu bar but when you will hover on any item of the menu then it will slide and will open a n strip of links related to the main category so that you can add unlimited menus like it. So now view this JQuery Horizontal Accordion Menu and if you like it then garb the code of JQuery Horizontal Accordion Menu.

Features:

1.) JQuery File Added.
2.) JQuery/JavaScript Code Added.
3.) CSS Added.
4.) Simple And Fast Loading Widget.
5.) Can Work With Any 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.

JQuery File:

<script src="https://code.jquery.com/jquery-2.2.2.min.js" type="text/javascript"></script>

CSS:

<style type="text/css">
.newmenuel {float: left;}
#accordion {list-style: none;padding: 0;height: 50px;width: 980px;overflow: hidden;}
#accordion li {float: left;display: block;height: 46px;width: 70px;overflow: hidden;border: 1px solid #66FF99;background: #6699FF;}
</style>

HTML:

<div class="newmenu">
<ul id="accordion">
<li style="width: 735px; overflow: hidden;">
<div style="float:left"><img border="0" src="https://www.telme-bg.com/imagenew/menu_items1.gif" height="46" width="70" border="0" alt="ImageName" /></div>
<div class="newmenuel"><a href="LLLLLLLLLL" ><img src="https://www.telme-bg.com/imagenew/menu_other1.gif" width="70" height="46" border="0" alt="ImageName" /></a></div>
<div class="newmenuel"><a href="LLLLLLLLLL" ><img src="https://www.telme-bg.com/imagenew/menu_other1.gif" width="70" height="46" border="0" alt="ImageName" /></a></div>
<div class="newmenuel"><a href="LLLLLLLLLL" ><img src="https://www.telme-bg.com/imagenew/menu_other1.gif" width="70" height="46" border="0" alt="ImageName" /></a></div>
<div class="newmenuel"><a href="LLLLLLLLLL" ><img src="https://www.telme-bg.com/imagenew/menu_other1.gif" width="70" height="46" border="0" alt="ImageName" /></a></div>
<div class="newmenuel"><a href="LLLLLLLLLL" ><img src="https://www.telme-bg.com/imagenew/menu_other1.gif" width="70" height="46" border="0" alt="ImageName" /></a></div>
</li>

<li>
<div style="float:left"><img border="0" src="https://www.telme-bg.com/imagenew/menu_items1.gif" height="46" width="70" border="0" alt="ImageName" /></div>
<div class="newmenuel"><a href="LLLLLLLLLL" ><img src="https://www.telme-bg.com/imagenew/menu_other1.gif" width="70" height="46" border="0" alt="ImageName" /></a></div>
<div class="newmenuel"><a href="LLLLLLLLLL" ><img src="https://www.telme-bg.com/imagenew/menu_other1.gif" width="70" height="46" border="0" alt="ImageName" /></a></div>
<div class="newmenuel"><a href="LLLLLLLLLL" ><img src="https://www.telme-bg.com/imagenew/menu_other1.gif" width="70" height="46" border="0" alt="ImageName" /></a></div>
<div class="newmenuel"><a href="LLLLLLLLLL" ><img src="https://www.telme-bg.com/imagenew/menu_other1.gif" width="70" height="46" border="0" alt="ImageName" /></a></div>
<div class="newmenuel"><a href="LLLLLLLLLL" ><img src="https://www.telme-bg.com/imagenew/menu_other1.gif" width="70" height="46" border="0" alt="ImageName" /></a></div>
</li>

<li>
<div style="float:left"><img border="0" src="https://www.telme-bg.com/imagenew/menu_items1.gif" height="46" width="70" border="0" alt="ImageName" /></div>
<div class="newmenuel"><a href="LLLLLLLLLL" ><img src="https://www.telme-bg.com/imagenew/menu_other1.gif" width="70" height="46" border="0" alt="ImageName" /></a></div>
<div class="newmenuel"><a href="LLLLLLLLLL" ><img src="https://www.telme-bg.com/imagenew/menu_other1.gif" width="70" height="46" border="0" alt="ImageName" /></a></div>
<div class="newmenuel"><a href="LLLLLLLLLL" ><img src="https://www.telme-bg.com/imagenew/menu_other1.gif" width="70" height="46" border="0" alt="ImageName" /></a></div>
<div class="newmenuel"><a href="LLLLLLLLLL" ><img src="https://www.telme-bg.com/imagenew/menu_other1.gif" width="70" height="46" border="0" alt="ImageName" /></a></div>
<div class="newmenuel"><a href="LLLLLLLLLL" ><img src="https://www.telme-bg.com/imagenew/menu_other1.gif" width="70" height="46" border="0" alt="ImageName" /></a></div>
</li>

<li>
<div style="float:left"><img border="0" src="https://www.telme-bg.com/imagenew/menu_items1.gif" height="46" width="70" border="0" alt="ImageName" /></div>
<div class="newmenuel"><a href="LLLLLLLLLL" ><img src="https://www.telme-bg.com/imagenew/menu_other1.gif" width="70" height="46" border="0" alt="ImageName" /></a></div>
<div class="newmenuel"><a href="LLLLLLLLLL" ><img src="https://www.telme-bg.com/imagenew/menu_other1.gif" width="70" height="46" border="0" alt="ImageName" /></a></div>
<div class="newmenuel"><a href="LLLLLLLLLL" ><img src="https://www.telme-bg.com/imagenew/menu_other1.gif" width="70" height="46" border="0" alt="ImageName" /></a></div>
<div class="newmenuel"><a href="LLLLLLLLLL" ><img src="https://www.telme-bg.com/imagenew/menu_other1.gif" width="70" height="46" border="0" alt="ImageName" /></a></div>
<div class="newmenuel"><a href="LLLLLLLLLL" ><img src="https://www.telme-bg.com/imagenew/menu_other1.gif" width="70" height="46" border="0" alt="ImageName" /></a></div>
</li>
</ul>
</div>
<div class="clear"></div>

JQuery:

<script type="text/javascript">
$(document).ready(function(){
activeItem = $("#accordion li:eq(0)");
$(activeItem).addClass('active');
$("#accordion li").hover(function(){
$(activeItem).animate({width: "70px"}, {duration:600, queue:false});
$(this).animate({width: "735px"}, {duration:600, queue:false});
activeItem = this;
});
});
</script>

Customization:

1.) You Can Add More HTML-CSS. 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…