那么我们应该如何实现流动导航菜单呢？
一、效果图
鼠标滑过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代码
复制代码 代码如下:
home
i am some text about the home section
services
i am some text about the services section
clients
i am some text about the clients section
portfolio
i am some text about the portfolio section
about
i am some text about the about section
blog
i am some text about the blog section
follow
i am some text about the follow section
contact
i am some text about the contact section
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])：通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
fluid navigationcss & 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需刷新才能执行]