It is no breaking news that jQuery, along with its other JavaScript library counterparts, is making serious dents in the Flash web pie. While I prefer to sit on the fence and watch the hot “Flash is Irreplaceable / Flash should Die” web debate, I do think there are a large number of effects that could not be visualized without thinking Adobe’s ActionScript earlier are now easily achievable with the open source jQuery. In this tutorial I’ll discuss how to create a simple vertical navigation menu with a smooth “nudging” hover effect that I created during a current work project for a plywood major – using purely jQuery and CSS. Conceptually, the effect is based on the simple animate() function in jQuery. It animates the right padding of a link when it is hovered and nudges its container to the left, and back to its original position when the mouse pointer is moved away. Like in any animation, the movement is done over a period of time to add a required amount of smoothness to the proceedings.

Let’s take a look at what we are trying to achieve in a demo here: http://blog.codez.in/post-files/vertical-nudge-navigation.html

If you run the mouse pointer over the links quickly, the current link begins to animate while the previous links’ animations are tapering down thus making it appear like you are running over your fingers on a piano… pretty cool, eh?

The markup is straightforward. All you need is an unordered list (ul) and inside it several list items (li) and anchor links (a) within each li.

Here’s all the jQuery that you need to write (after you have included the jQuery library in the page’s head) :

$(document).ready(function() {
$(‘.verttabnav ul li a’).hover(function() { //mouse in
$(this).animate({ paddingRight: ‘+=10px’ }, 300);
$(this).parent().animate({ left:’-=7′}, 300);
}, function() { //mouse out
$(this).animate({ paddingRight: ‘-=10px’ }, 100);
$(this).parent().animate({ left:’+=7′}, 300);
});
});

Here, verttabnav is a class applied to the unordered list (ul) that contains the navigation menu items. To make the nudging movement towards left on mouseover, the menu links (anchor) are animated to give a right padding of 10 pixels each time mouse goes over them. The same amount of right padding (10 pixels) is subtracted from each item when the mouse is taken away, so the menu item comes back to its original place. These animations take place over a period of 300 milliseconds and 100 milliseconds respectively. Positions of the list items (li) which contain the anchor links are also animated on mouseover (or hover). They move 7 pixels towards the left (hence subtracted from the original value) and back (7 pixels added) on mouse in and mouse out respectively, giving the visual effect we wanted.

The CSS is as follows:

.verttabnav {
width:300px;
}
.verttabnav ul {
margin: 0 4px 0 10px;
list-style:none;
}
.verttabnav ul li {
padding:0 0 0 0;
border-bottom:1px solid #A38872;
border-right:1px solid #A38872;
border-top:1px solid #A38872;
border-left:1px solid #A38872;
margin:-1px 0 2px 0;
position:relative;
background:#FFEFD7;
}
.verttabnav ul li a {
padding:10px 30px 10px 0;
font-size:11px;
color:#8c6d53;
text-decoration:none;
text-transform:uppercase;
text-align:right;
font-weight:bold;
display:block;
}
.verttabnav ul li a:hover {
color:#000;
}

Latest posts by Smarajit Dasgupta

  • Share/Bookmark