I have always thought that imagemenu sliding effect is really cool and that it would be nice if it worked with jQuery. Introducing a Mootools image menu ported to Jquery. If you have ever seen the image menu javascript for mootools by phatfusion and liked what you saw well here is a Sliding Image Menu alternative I've come up with using the power of jquery javascript.
Functionality Checklist for our Sliding Image Menu for Jquery.
Here is what we need our Jquery horizontal sliding image menu to do:
- Jquery compatible script.
- Mootools like sliding effect.
- Valid XHTML degrades well.
- Lightweight customizable script.
Let's take a look at the XHTML, CSS, and JavaScript that makes it all work.
Jquery Image Menu Version 1, View Demo, Download Source.
Here is the HTML for just the jquery Image Menu itself:
<div class="jimgMenu">
<ul>
<li class="landscapes"><a href="#">Landscapes</a></li>
<li class="people"><a href="#">People</a></li>
<li class="nature"><a href="#">Nature</a></li>
<li class="abstract"><a href="#">Abstract</a></li>
<li class="urban"><a href="#">Urban</a></li>
</ul>
</div>Here is The CSS
.jimgMenu {
position: relative;
width: 670px;
height: 200px;
overflow: hidden;
margin: 25px 0px 0px;
}
.jimgMenu ul {
list-style: none;
margin: 0px;
display: block;
height: 200px;
width: 1340px;
}
.jimgMenu ul li {
float: left;
}
.jimgMenu ul li a {
text-indent: -1000px;
background:#FFFFFF none repeat scroll 0%;
border-right: 2px solid #fff;
cursor:pointer;
display:block;
overflow:hidden;
width:78px;
height: 200px;
}
.jimgMenu ul li.landscapes a {
background: url(images/landscapes.jpg) repeat scroll 0%;
}
.jimgMenu ul li.people a {
background: url(images/people.jpg) repeat scroll 0%;
}
.jimgMenu ul li.nature a {
background: url(images/nature.jpg) repeat scroll 0%;
}
.jimgMenu ul li.abstract a {
background: url(images/abstract.jpg) repeat scroll 0%;
}
.jimgMenu ul li.urban a {
background: url(images/urban.jpg) repeat scroll 0%;
min-width:310px;
}
The JavaScript
In the header section of your HTML file, you'll need to include jQuery and all the plug in files listed. The bare minimum setup look like this:
Finally include the jquery in your page or in an attached file.
This will activate our image menu, just remember we have css controlling most of the image menus style. You can customize the easing type and duration with the jquery easing plugin that we are using to achieve different slide effects.
Jquery Image Menu Version 2, View Demo, Download Source.
For this second version I have used kwicks to help with the ImageMenu animation. The advantage to using kwicks with our sliding image menu is the additional functionality that it brings in the form of sticky menu items which will stay open and custom events such as on click actions instead of hover.
The HTML remains the same for this version of jquery Image Menu except for the use of id instead of class.
<div class="jimgMenu">
<ul>
<li id="landscapes"><a href="#">Landscapes</a></li>
<li id="people"><a href="#">People</a></li>
<li id="nature"><a href="#">Nature</a></li>
<li id="abstract"><a href="#">Abstract</a></li>
<li id="urban"><a href="#">Urban</a></li>
</ul>
</div>
The CSS is adapted slightly for kwicks
.jimgMenu {
position:relative;
margin: 0px 0px 0px 50px;
padding: 0px;
width:475px;
height:200px;
overflow: hidden;
}
.jimgMenu ul {
list-style: none;
margin: 0px;
padding: 0px;
display: block;
height: 200px;
position: relative;
}
.jimgMenu ul li {
width: 95px;
float: left;
display: block;
overflow: hidden;
}
.jimgMenu ul li a {
text-indent: -1000px;
background:#fff repeat scroll 0%;
border-right: 2px solid #fff;
cursor:pointer;
display:block;
overflow: hidden;
height: 200px;
}
.jimgMenu ul li#landscapes a {
background: url(images/landscapes.jpg) repeat scroll 0%;
}
.jimgMenu ul li#people a {
background: url(images/people.jpg) repeat scroll 0%;
}
.jimgMenu ul li#nature a {
background: url(images/nature.jpg) repeat scroll 0%;
}
.jimgMenu ul li#abstract a {
background: url(images/abstract.jpg) repeat scroll 0%;
}
.jimgMenu ul li#urban a {
background: url(images/urban.jpg) repeat scroll 0%;
border-right-style: none;
}
The JavaScript
In the header section of your HTML, you will need to include jQuery and all the files below. The bare minimum setup will look like this:
This will activate our jQuery Sliding Image Menu plug-in. The last step is to include the script in our page by placing this script in your html head or document body.
Enjoy an Image Menu sliding effect for Jquery.
]]>