The nifty effect of Horizontal Water Menu. What you just experienced is nothing but the Horizontal Water Menu packaged as a plugin for the amazing jQuery javascript library. I personally believe that the effect rivals that of flash – Don’t you? Especially considering the fact that it is extremely light weight.
As User Interface developers, we know that one of the first widgets our visitors use is a “Menu”. Capturing their attention right there is something that we always strive for, and I guess Horizontal Water Menu is a step in that direction. Before you get bored with all this useless talk, let me get you started on integrating Horizontal Water Menu into your jQuery powered site.
See some jQuery Code here.
<script type="text/javascript">
jQuery(document).ready(function ($) {
//transitions
//for more transition, goto http://gsgd.co.uk/sandbox/jquery/easing/
var style = 'easeOutElastic';
//Retrieve the selected item position and width
var default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);
var default_width = $('#lava li.selected').width();
//Set the floating bar position and width
$('#box').css({left: default_left});
$('#box .head').css({width: default_width});
//if mouseover the menu item
$('#lava li').hover(function () {
//Get the position and width of the menu item
left = Math.round($(this).offset().left - $('#lava').offset().left);
width = $(this).width();
$('#debug').html(left);
//Set the floating bar position, width and transition
$('#box').stop(false, true).animate({left: left},{duration:1000, easing: style});
$('#box .head').stop(false, true).animate({width:width},{duration:1000, easing: style});
//if user click on the menu
}).click(function () {
//reset the selected item
$('#lava li').removeClass('selected');
//select the current item
$(this).addClass('selected');
});
//If the mouse leave the menu, reset the floating bar to the selected item
$('#lava').mouseleave(function () {
//Retrieve the selected item position and width
default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);
default_width = $('#lava li.selected').width();
//Set the floating bar position, width and transition
$('#box').stop(false, true).animate({left: default_left},{duration:1500, easing: style});
$('#box .head').stop(false, true).animate({width:default_width},{duration:1500, easing: style});
});
});
</script>
See the CSS Here
/* CSS Document */
body {
margin-left:400px;
margin-top: 0px;
margin-right: 400px;
margin-bottom: 0px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
width:960px;
}
.topmenubg{
background: url("images/topmid.png") repeat-x scroll 0 0 transparent;
float: left;
width: 728px;
}
/* -----------------------------horizontal Menu------------------------------------------------*/
a {
text-decoration:none;
color:#000000;
}
#lava {
/* you must set it to relative, so that you can use absolute position for children elements */
position:relative;
text-align:center;
width:583px;
height:38px;
}
#lava ul {
/* remove the list style and spaces*/
margin:0;
padding:0;
list-style:none;
display:inline;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
/* position absolute so that z-index can be defined */
position:absolute;
/* center the menu, depend on the width of you menu*/
left:68px;
top:8px;
/* should be higher than #box */
z-index:100;
}
#lava ul li {
/* give some spaces between the list items */
margin:0 15px;
/* display the list item in single row */
float:left;
}
#lava #box {
/* position absolute so that z-index can be defined and able to move this item using javascript */
position:absolute;
left:0;
top:6px;
/* should be lower than the list menu */
z-index:50;
/* image of the right rounded corner */
background:url(images/tail.png) no-repeat right center;
height:27px;
/* add padding 8px so that the tail would appear */
padding-right:8px;
/* self-adjust negative margin to make sure the box display in the center of the item */
margin-left:-10px;
}
#lava #box .head {
/* image of the left rounded corner */
background:url(images/head.png) no-repeat 0 0;
height:27px;
/* self-adjust left padding to make sure the box display in the center of the item */
padding-left:10px;
}
#container {
text-align:left;
width:100%;
margin:0 auto;
}
Left take a look on complete code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Horizontal Floating Water Menu Demo Using jQuery</title>
<script type="text/javascript" src="../jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
//transitions
//for more transition, goto http://gsgd.co.uk/sandbox/jquery/easing/
var style = 'easeOutElastic';
//Retrieve the selected item position and width
var default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);
var default_width = $('#lava li.selected').width();
//Set the floating bar position and width
$('#box').css({left: default_left});
$('#box .head').css({width: default_width});
//if mouseover the menu item
$('#lava li').hover(function () {
//Get the position and width of the menu item
left = Math.round($(this).offset().left - $('#lava').offset().left);
width = $(this).width();
$('#debug').html(left);
//Set the floating bar position, width and transition
$('#box').stop(false, true).animate({left: left},{duration:1000, easing: style});
$('#box .head').stop(false, true).animate({width:width},{duration:1000, easing: style});
//if user click on the menu
}).click(function () {
//reset the selected item
$('#lava li').removeClass('selected');
//select the current item
$(this).addClass('selected');
});
//If the mouse leave the menu, reset the floating bar to the selected item
$('#lava').mouseleave(function () {
//Retrieve the selected item position and width
default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left);
default_width = $('#lava li.selected').width();
//Set the floating bar position, width and transition
$('#box').stop(false, true).animate({left: default_left},{duration:1500, easing: style});
$('#box .head').stop(false, true).animate({width:default_width},{duration:1500, easing: style});
});
});
</script>
<style type="text/css">
/* CSS Document */
body {
margin-left:400px;
margin-top: 0px;
margin-right: 400px;
margin-bottom: 0px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
width:960px;
}
.topmenubg{
background: url("images/topmid.png") repeat-x scroll 0 0 transparent;
float: left;
width: 728px;
}
/* -----------------------------horizontal Menu------------------------------------------------*/
a {
text-decoration:none;
color:#000000;
}
#lava {
/* you must set it to relative, so that you can use absolute position for children elements */
position:relative;
text-align:center;
width:583px;
height:38px;
}
#lava ul {
/* remove the list style and spaces*/
margin:0;
padding:0;
list-style:none;
display:inline;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
/* position absolute so that z-index can be defined */
position:absolute;
/* center the menu, depend on the width of you menu*/
left:68px;
top:8px;
/* should be higher than #box */
z-index:100;
}
#lava ul li {
/* give some spaces between the list items */
margin:0 15px;
/* display the list item in single row */
float:left;
}
#lava #box {
/* position absolute so that z-index can be defined and able to move this item using javascript */
position:absolute;
left:0;
top:6px;
/* should be lower than the list menu */
z-index:50;
/* image of the right rounded corner */
background:url(images/tail.png) no-repeat right center;
height:27px;
/* add padding 8px so that the tail would appear */
padding-right:8px;
/* self-adjust negative margin to make sure the box display in the center of the item */
margin-left:-10px;
}
#lava #box .head {
/* image of the left rounded corner */
background:url(images/head.png) no-repeat 0 0;
height:27px;
/* self-adjust left padding to make sure the box display in the center of the item */
padding-left:10px;
}
#container {
text-align:left;
width:100%;
margin:0 auto;
}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr class="topmenubg">
<td height="38" > </td>
<td><div id="container">
<div id="lava">
<ul>
<li><a href="#"><img src="images/home.png"/> Home</a></li>
<li class="selected"><img src="images/calender.png"/> <a href="#">Training Requirements </a></li>
<li><a href="mytraining.html"><img src="images/my_training.png"/> My Trainings </a></li>
<li ><a href="#"><img src="images/report_hard.png"/> Reports</a></li>
</ul>
<!-- If you want to make it even simpler, you can append these html using jquery -->
<div id="box"><div class="head"></div></div>
</div>
</div></td>
<td > </td>
</tr>
</table>
</body>
</html>
