Jquery+CSS 创建流动导航菜单 Fluid Navigation

那么我们应该如何实现流动导航菜单呢？
一、效果图



鼠标滑过Menu，即Show提示信息。
二、实现步骤
1、CSS代码

menuBarHolder { width: 730px; height:45px; background-color:#000; color:#fff; font-family:Arial; font-size:14px; margin-top:20px;} 
#menuBarHolder ul{ list-style-type:none; display:block;} 
#container { margin-top:100px;} 
#menuBar li{ float:left; padding:15px; height:16px; width:50px; border-right:1px solid #ccc; } 
#menuBar li a{color:#fff; text-decoration:none; letter-spacing:-1px; font-weight:bold;} 
.menuHover { background-color:#999;} 
.firstchild { border-left:1px solid #ccc;} 
.menuInfo { cursor:hand; background-color:#000; color:#fff; 
width:74px; font-size:11px;height:100px; padding:3px; display:none; 
position:absolute; margin-left:-15px; margin-top:-15px; 
-moz-border-radius-bottomright: 5px; 
-moz-border-radius-bottomleft: 5px; 
-webkit-border-bottom-left-radius: 5px; 
-webkit-border-bottom-right-radius: 5px; 
-khtml-border-radius-bottomright: 5px; 
-khtml-border-radius-bottomleft: 5px; 
border-radius-bottomright: 5px; 
border-radius-bottomleft: 5px; 
}

menuBarHolder: 菜单Menu的固定容器，宽度=730px。
menuInfo：控制提示信息的展示与否。
2、HTML代码

<div id="menuBarHolder"> 
<ul id="menuBar"> 
<li class="firstchild"><a href="http://www.jb51.net/article/javascript:#">Home</a> 
<div class="menuInfo">I am some text about the home section</div></li> 
<li><a href="http://www.jb51.net/article/javascript:#">Services</a> 
<div class="menuInfo">I am some text about the services section</div></li> 
<li><a href="http://www.jb51.net/article/javascript:#">Clients</a> 
<div class="menuInfo">I am some text about the clients section</div></li> 
<li><a href="http://www.jb51.net/article/javascript:#">Portfolio</a> 
<div class="menuInfo">I am some text about the portfolio section</div></li> 
<li><a href="http://www.jb51.net/article/javascript:#">About</a> 
<div class="menuInfo">I am some text about the about section</div></li> 
<li><a href="http://www.jb51.net/article/javascript:#">Blog</a> 
<div class="menuInfo">I am some text about the blog section</div></li> 
<li><a href="http://www.jb51.net/article/javascript:#">Follow</a> 
<div class="menuInfo">I am some text about the follow section</div></li> 
<li><a href="http://www.jb51.net/article/javascript:#">Contact</a> 
<div class="menuInfo">I am some text about the contact section</div></li> 
</ul> 
</div>

UI LI元素：列表元素。
DIV元素：提示内容信息。
3、Javascript代码

$(document).ready(function() 
{ 
$('#menuBar li').click(function() 
{ 
var url = $(this).find('a').attr('href'); 
document.location.href = url; 
}); 
$('#menuBar li').hover(function() 
{ 
$(this).find('.menuInfo').slideDown(); 
}, 
function() 
{ 
$(this).find('.menuInfo').slideUp(); 
}); 
});

click()、 hover():给Li元素绑定单击事件和鼠标滑过事件。
find()函数：搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
slideDown(speed, [callback])：通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
slideUp(speed, [callback])：通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。



#menuBarHolder { width: 730px; height:45px; background-color:#000; color:#fff; font-family:Arial; font-size:14px; margin-top:20px;}
#menuBarHolder ul{ list-style-type:none; display:block;}
.firstchild { border-left:1px solid #ccc;}
#container { margin-top:100px;}
#menuBar li{ float:left; padding:15px; height:16px; width:50px; border-right:1px solid #ccc; }
#menuBar li a{color:#fff; text-decoration:none; letter-spacing:-1px; font-weight:bold;}
.menuHover { background-color:#999;}
.menuInfo { cursor:hand; background-color:#000; color:#fff; width:74px; font-size:11px;height:100px; padding:3px; display:none; position:absolute; margin-left:-15px; margin-top:-15px;
-moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px;
-khtml-border-radius-bottomright: 5px; -khtml-border-radius-bottomleft: 5px;
border-radius-bottomright: 5px;border-radius-bottomleft: 5px;
}
h1 {
font: 50px normal Georgia, 'Times New Roman', Times, serif;
color: #111;
margin: 0;
text-align: center;
padding: 5px 0;

}
h1 small{
font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
text-transform:uppercase;
letter-spacing: 1.4em;
display: block;
color: #ccc;
}



$(document).ready(function() { $('#menuBar li').click(function() { var url = $(this).find('a').attr('href'); document.location.href = url; }); $('#menuBar li').hover(function() { $(this).find('.menuInfo').slideDown(); }, function() { $(this).find('.menuInfo').slideUp(); }); });


Fluid Navigation
CSS & jQuery Tutorial by Addy Osmani




HomeI am some text about the home section
ServicesI am some text about the services section
ClientsI am some text about the clients section
PortfolioI am some text about the portfolio section
AboutI am some text about the about section
BlogI am some text about the blog section
FollowI am some text about the follow section
ContactI am some text about the contact section




[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]