jQuery Rollover Nav Bar

Here’s a simple jquery nav bar with animated rollover effects. The page titles roll up to reveal page descriptions underneath.

 

Here’s the jQuery, hover.js:

$(function() {
var navButtons = '#home, #cast, #pictures, #videos, #mail';
$(navButtons).hover(function() {
$(this).stop().animate({'top':'-30px'});
}, function () {
$(this).stop().animate({'top':'0px'})
});
});

style.css, color scheme “Sunrise over Myanmar” by pixelperfectt on Kuler.

#nav_bar {
float:top;
margin:0px auto;
padding:0;
position:relative;
text-align:center;
width:500px;
height:30px;
overflow:hidden;
}
#home, #cast, #pictures, #videos, #mail {
float:left;
width:70px;
height:60px;
line-height:15px;
font-size:10px;
font-family:sans-serif;
color:#ffffff;
font-weight:bold;
border:0px solid white;
position:relative;
}
#nav_bar h2 {
line-height:30px;
font-size:15px;
margin:0px;
padding:0px;
}

.nav_top, .nav_bottom {
height:30px;
float:top;
}
#home {
background:#29131F;
}
#cast {
background:#522125;
}
#pictures {
background:#7F2922;
}
#videos{
background:#C24D23;
}
#mail {
background:#DB7422;
}

index.html

You’ll also need jquery-1.3.2, though you should try the newest version of jQuery first.


Leave a comment