I was working on my personal portfolio page for publishing a small piece of work I've done in my life. With this idea, I wanted a special way to navigate trough my Portfolio, but with larges images visible on my site. There are many ways to accomplish this with jQuery, or just to download a sweet plugin, but creating your own one is more fun (and also, I took me 4 weeks to think about what I really wanted, and no plugin didn’t matched my satisfaction).. So, I decided to create a special jQuery plugin for my Portfolio Page, called jHover.
What does it do?
jHover is a jQuery plugin which combines an image and a menu into 1 piece. Below, the Section 'What does it need', contains all the technical details and information you need to do and to implement, to get it all right. Basically, jHover will take inside the container, 1 image (a background-image) and a menulist and combines this together into 1 big thumbnail. When hovering the image, the menulist will slide in, right next to the image.
What does it need
The JS
The next piece of code, must be included in the <head>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="Scripts/jquery.jHover.min.js" type="text/javascript"></script>
For activating the plugin:
<script type="text/javascript">
$(document).ready(function () {
$(".jHover").jHover();
});
</script>
The HTML
The next code, must be included in the <body>
<div id="ContactsContainer">
<div class="jHover">
<div id="Contacts" class="jHoverImage"></div>
<ul class="jHoverMenu">
<li><a href="YourUrl1">Text 1</a></li>
<li><a href="YourUrl2">Text 2</a></li>
</ul>
</div>
</div>
Note: The classes ‘jHoverImage’ and ‘jHoverMenu’ must be specified…
The CSS
The CSS below are the only CSS definitions, which are needed to get everything work (a.k.a. it looks like crap because it doesn’t have any styling-stuff). For a complete and finished version, check the example folder inside the .ZIP Download file.
/* --- jHover --- */
.jHover
{
float: left;
}
.jHover .jHoverImage
{
float: left;
background-repeat: no-repeat;
background-position: center center;
z-index: 5;
}
/* --- Image --- */
.jHover #Contacts.jHoverImage
{
background-image: url(../Images/Contacts.jpg);
width: 290px;
height: 170px;
}
/* --- List --- */
.jHover .jHoverMenu
{
float: left;
position: absolute;
}
Done , or change the default parameters
If you included all the above information, the jHover should work properly. However, if you want to change some effects, speed or resize values, it’s possible:
$(".jHover").jHover({
"resizeValue": 25, // Default: 50
"menuPaddingValue": 0, // Default: 10
"easingImage": "easeOutElastic", // Default: "easeOutElastic"
"speedImage": 800, // Default: 1000
"easingItems": "easeOutCirc", // Default: "easeOutCirc"
"speedItems": 800 // Default: 1000
});
Easing Types
For the easing technique, I’ve used the easing plugin from George Smith Graphic Design. If you want to change the easingType, I suggest you take a look at the jQuery Animate List or George Smith his site itself for what the possibilities are.
Furthermore
If you have any ideas, opinions, problems, suggestions, comments or other stuff, just let me know! I’m also trying to include even more options for this plugin, like:
- Position menu where to slide and which direction
- Submenu at menu
- Ideas from others, perhaps?