使用Jquery+CSS如何建立流動導航菜單-Fluid Navigation

有時，一個網站的導航菜單文字不能提供足夠的資訊，來表達目前菜單按鈕的内容，一般的解決辦法是使用提示資訊ToolTip，那麼本文介紹的流動導航菜單Fluid Navigation也可以解決此問題，同時也為網站設計的添加了一些時尚而又動感元素。那麼我們應該如何實作流動導航菜單呢？

<b>一、效果圖</b>

<a target="_blank" href="http://addyosmani.com/resources/fluid-menu/fluid-menu.html"></a>

滑鼠滑過Menu，即Show提示資訊。

<b>二、實作步驟</b>

<b>1、CSS代碼</b>

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：控制提示資訊的展示與否。

<b>2、HTML代碼</b>

&lt;divid="menuBarHolder"&gt;

UI LI元素：清單元素。

DIV元素：提示内容資訊。

<b>3、Javascript代碼</b>

$(document).ready(function()

click()、 hover():給Li元素綁定單擊事件和滑鼠滑過事件。

find()函數：搜尋所有與指定表達式比對的元素。這個函數是找出正在處理的元素的後代元素的好方法。

slideDown(speed, [callback])：通過高度變化（向下增大）來動态地顯示所有比對的元素，在顯示完成後可選地觸發一個回調函數。

slideUp(speed, [callback])：通過高度變化（向上減小）來動态地隐藏所有比對的元素，在隐藏完成後可選地觸發一個回調函數。

參考英文：

http://addyosmani.com/blog/fluid-navigation-how-to-create-an-informative-menu-bar-with-jquery-in-just-a-few-minutes/#myPosts

本文轉自 靈動生活 51CTO部落格，原文連結：http://blog.51cto.com/smartlife/277876，如需轉載請自行聯系原作者