使用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