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

<divid="menuBarHolder">

<ulid="menuBar">

<liclass="firstchild"><ahref="javascript:#">Home</a>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<divclass="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

參考英文：

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