Creare un attractive menu in jquery!

CODICE HTML

CODICE CSS

body {
background:#222;
}

#navMenu {
margin:0;
padding:0;
list-style:none;
font-family:arial;
text-align:center;
line-height:60px;
}

#navMenu li {
float:left;

/* default background image */
background:url(default.jpg) no-repeat center center;

/* width and height of the menu item */
width:120px;
height:70px;

/* simulate pixel perfect using border */
border-left:1px solid #111;
border-right:1px solid #333;
border-top:1px solid #555;
border-bottom:1px solid #333;

/* must set it as relative, because .hover class top and left with absolute position will be positioned according to li. */
position:relative;
}

#navMenu li a {
/* z-index must be higher than .hover class */
z-index:20;

/* display as block and set the height according to the height of the menu to make the whole LI clickable */
display:block;
height:70px;
position:relative;
color:#777;
}

#navMenu li .hover {
/* mouseover image */
background:url(over.jpg) no-repeat center center;

/* must be postion absolute */
position:absolute;

/* width, height, left and top to fill the whole LI item */
width:120px;
height:70px;
left:0;
top:0;

/* display under the Anchor tag */
z-index:0;

/* hide it by default */
display:none;
}

#navMenu li.selected {
/* selected image */
background:url(selected.jpg) no-repeat center center;
}

CODICE JQUERY

$(document).ready(function () {

//Append a div with hover class to all the LI
$(‘#navMenu li’).append(”);

$(‘#navMenu li’).hover(

//Mouseover, fadeIn the hidden hover class
function() {

$(this).children(‘div’).fadeIn(’1000′);

},

//Mouseout, fadeOut the hover class
function() {

$(this).children(‘div’).fadeOut(’1000′);

}).click (function () {

//Add selected class if user clicked on it
$(this).addClass(‘selected’);

});