jQuery Horizontal Accordion Menu Script

About the jQuery Horizontal Accordion Menu Script

Want to feature an accordion in your website?

This plug-in enables you to apply a horizontal accordion menu. It features a thumbnail view. This plug-in can be used as a navigation menu that has drop down menu items in it. It can also be customized to meet the needs of the web designer. Mouse can also be used to support the animations. It can be made to support the mouse wheel for navigating through the images or menu items. This is a very interesting plug-in and customizing it to suit the needs of the website will bring better traffic to your website as it is made very interesting and innovative.

In order to use jQuery in your pages you first need to Download the latest release and then include the Java Script library within your head tags.

[javascript language="css"]<script src="javascript/jquery-1.2.3.js"
type="text/javascript"></script>
[/javascript]

Now lets take a look at the html for this example. I gave the first anchor tag an id, so that we could set an initial width and make it appear expanded when the page is loaded.

[javascript language="css"]<ul>
<li>
<a id="a1">
<img src="images/free_thumb.jpg" />
<p>
<strong>Freebies</strong><br/>
Download free files to make your job easier.
</p>
</a>
</li>
<li>
<a>
<img src="images/tut_thumb.jpg" />
<p>
<strong>Tutorials</strong><br/>
Tips and tricks to help you
keep up with the latest technology.
</p>
</a>
</li>
<li>
<a>
<img src="images/inspire_thumb.jpg" />
<p>
<strong>Inspiration</strong><br/>
Get inspired by what other designers are doing.
</p>
</a>
</li>
</ul>[/javascript]

Here is the CSS, which is pretty straight forward. The main thing to note is the fixed height being set on the anchor tag. Doing this along with “overflow: hidden” prevents the contained p tag from dropping down below the thumbnail.

[javascript language="css"]ul{
list-style: none;
margin: 0;
padding: 0;
}

ul li{
float: left;
padding: 10px;
display: block;
margin-right: 10px;
}

ul li a{
display: block;
overflow: hidden;
height: 75px;
width: 75px;
}

#a1{
width: 210px;
}

ul li img{
position: absolute;
border: 3px solid #881212;
}

ul li p{
margin: 0;
padding: 0;
width: 120px;
display: block;
margin-left: 85px;
}[/javascript]

And here is the jQuery script that makes it all happen. This can be placed in the head tag. The first thing we do is set a few initial variables: lastBlock represents the block that is already expanded, maxWidth is the width we want our block to be when it is expanded, and minWidth is the width when it is not expanded.

Then we simply set a hover event on all anchor tag contained within all list items. Within the hover event we make two calls of the animate() function: one to close the lastBlock, and another to expand the block we are hovering. Then we set lastBlock equal to the block we just expanded. That way jQuery will know which one to close the next time the hover event is fired. The animate() function allows you to create custom animations by setting new values for multiple properties. In this case we are only animating the width.

One important thing to note is setting “queue” to false. If it is set to true, every hover event is stored and will be animated one after another, resulting in opening and closing long after the last hover happens.

[javascript language="css"]<code><script type="text/javascript" >
$(document).ready(function(){
lastBlock = $("#a1");
maxWidth = 210;
minWidth = 75;

$("ul li a").hover(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
lastBlock = this;
}
);
});
</script></code>[/javascript]

To get the version of the script integrated within a live template visit the website whose link is mentioned here: Boxedart.com

Interested? Want to keep yourselves updated with the latest JavaScripts and codes? Try this website a1javascripts.com for more jQuery, CSS and HTML5 techniques.

JQuery is a very powerful tool, the more you learn about, more will you be amazed what it is capable of. Stay with us for lot of upcoming articles, Guidelines with plenty of great tutorials, Resources, etc.

Comments are closed