使用jQuery+CSS如何创建流动导航菜单-Fluid Navigation

有时，一个网站的导航菜单文字不能提供足够的信息，来表达当前菜单按钮的内容，一般的解决办法是使用提示信息ToolTip，那么本文介绍的流动导
航菜单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
="javascript:#"
>
Home
</
a
>

<
div
class
="menuInfo"
>
I am some text about the home section
</
div
></
li
>

<
li
><
a
href
="javascript:#"
>
Services
</
a
>

<
div
class
="menuInfo"
>
I am some text about the services section
</
div
></
li
>

<
li
><
a
href
="javascript:#"
>
Clients
</
a
>

<
div
class
="menuInfo"
>
I am some text about the clients section
</
div
></
li
>

<
li
><
a
href
="javascript:#"
>
Portfolio
</
a
>

<
div
class
="menuInfo"
>
I am some text about the portfolio section
</
div
></
li
>

<
li
><
a
href
="javascript:#"
>
About
</
a
>

<
div
class
="menuInfo"
>
I am some text about the about section
</
div
></
li
>

<
li
><
a
href
="javascript:#"
>
Blog
</
a
>

<
div
class
="menuInfo"
>
I am some text about the blog section
</
div
></
li
>

<
li
><
a
href
="javascript:#"
>
Follow
</
a
>

<
div
class
="menuInfo"
>
I am some text about the follow section
</
div
></
li
>

<
li
><
a
href
="javascript:#"
>
Contact
</
a
>

<
div
class
="menuInfo"
>
I am some text about the contact section
</
div
></
li
>

</
ul
>

</
div
>

</
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])：通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。

　　演示地址：http://addyosmani.com/resources/fluid-menu/fluid-menu.html

　　下载地址：http://addyosmani.com/resources/fluid-menu/fluid-menu.zip