[jQuery] Bold and hover on the horizontal items list

Data dodania wpisu: 18-05-2011

Go through this shit without sensless writing;) Most of the websites has horizontal navigation menu. Sometimes webdesigner is a little bit more creative then should be, and design navigation menu items on hover state with different color and bold as well.

During a hover on an element such like this ones, it becomes bold and obvious thing is, that it;s width will change and move another items to the left or right by a few px. It will look something like below:

How to avoid movable item elements on hover state? Just to set up a snippet of three lines of jQuery code and a simple rule for <a> tag:

$(document).ready(function() {
    $('ul li a').each(function() {
        $(this).css('width', $(this).width() + 10);
    });
});
// we apply constant width to each <a> tag in menu items list
// increased by a few px (ie. 10) to be sure, that longer menu items
// will always have enough space to expand it's width on hover

The only thing is to set up CSS rule for <a> tag: display:block; to make sure, that appenden widths will become constant on an element.

And the result is:

Simple, yeah?:)

Comments

This is really nice tutorial for learning such a interesting topic i hope in future we can see some more interesting information form you Well done.
Comments closed...

DesignEnd on Facebook

Inspiration