快捷導(dǎo)航

JQuery 浮動導(dǎo)航欄實現(xiàn)代碼

更新時間：2009年08月27日 00:39:36 作者：

JQuery 浮動導(dǎo)航欄實現(xiàn)代碼，具體的可以根據(jù)需要自己修改。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- 
transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>JQuery 浮動導(dǎo)航欄</title> 
<script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></script> 
<style type="text/css"> 
/* 浮動導(dǎo)航欄 Begin */ 
#floatMenu 
{ 
padding-top: 5px; 
background: url(http://img.jb51.net/images/quickmenu.gif) no-repeat; 
border: 1px solid #dcdcdc; 
position: absolute; 
top: 250px; 
left: 5px; 
margin-left: 0px; 
width: 86px; 
} 
#floatMenu ul 
{ 
margin-left: 0px; 
background-color:White; 
list-style-type: none; 
padding:10px 

} 
#floatMenu ul li a 
{ 
display: block; 
text-decoration: none; 
color: #000; 
} 
#floatMenu ul li a:hover 
{ 
color: #fff; 
background-color: #ff8000; 
} 
#floatMenu ul.menu1 li a:hover 
{ 
border-color: #09f; 
} 
/* 浮動導(dǎo)航欄 End */ 
</style> 
</head> 
<body> 
<div id="floatMenu"> 
<ul class="menu1"> 
<li><a href="#" onclick="return false;">Home</a></li> 
<li><a href="#" onclick="return false;">About Us</a></li> 
<li><a href="#" onclick="return false;">Product</a></li> 
<li><a href="#" onclick="return false;">Contact</a></li> 
</ul> 
</div> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br 
/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br 
/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br 
/><br /> 
<script type="text/javascript"> 
//<![CDATA[ 
var name = "#floatMenu"; 
var menuYloc = null; 
$(document).ready(function() { 
menuYloc = parseInt($(name).css("top").substring(0, $(name).css("top").indexOf("px"))) 
$(window).scroll(function() { 
offset = menuYloc + $(document).scrollTop() + "px"; 
$(name).animate({ top: offset }, { duration: 500, queue: false }); 
}); 
}); 
//]]> 
</script> 
</body> 
</html>

您可能感興趣的文章:

相關(guān)文章

jQuery+ajax讀取json數(shù)據(jù)并按照價格排序示例
這篇文章主要介紹了jQuery+ajax讀取json數(shù)據(jù)并按照價格排序,涉及jQuery基于ajax動態(tài)獲取json文件數(shù)據(jù)并進行數(shù)據(jù)遍歷與排序的相關(guān)操作技巧,需要的朋友可以參考下
2018-03-03
40個有創(chuàng)意的jQuery圖片和內(nèi)容滑動及彈出插件收藏集之三
在網(wǎng)頁的首頁或圖片專題頁面很多地方都會用到圖片滑動插件來循環(huán)切換多張圖片，并且用戶可以點擊左右按鈕來切換圖片。
2012-01-01
取消選中單選框radio的三種方式示例介紹
本文依賴于jQuery,其中第一種，第二種方式是使用jQuery實現(xiàn)的，第三種方式是基于JS和DOM實現(xiàn)的，感興趣的朋友可以了解下
2013-12-12
jquery實現(xiàn)簡單拖拽效果
這篇文章主要為大家詳細介紹了jquery實現(xiàn)簡單拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-07-07
基于jquery實現(xiàn)一個滾動的分步注冊向?qū)?附源碼
使用jQuery實現(xiàn)很多很有意思的應(yīng)用效果。我們在很多網(wǎng)站注冊會員時，需要填寫注冊表單，包括登錄信息、個人聯(lián)系信息等，本文將帶您一起體驗jQuery實現(xiàn)的一個可以滾動的十分友好的分步注冊向?qū)?，需要的朋友可以參考?/div> 2015-08-08
jQuery實現(xiàn)頁面滾動時動態(tài)加載內(nèi)容的方法
這篇文章主要介紹了jQuery實現(xiàn)頁面滾動時動態(tài)加載內(nèi)容的方法,實例分析了jQuery實現(xiàn)動態(tài)加載頁面的技巧,非常具有實用價值,需要的朋友可以參考下
2015-03-03
淺析jQuery 3.0中的Data
jQuery 3.0 在6月9日正式發(fā)布了，3.0 也被稱為下一代的 jQuery。這篇文章主要介紹了jQuery 3.0中的Data,包括Data在jQuery內(nèi)部的使用和1.x.x 和 2.x.x 的比較的相關(guān)內(nèi)容，需要的朋友可以參考下
2016-06-06
jQuery實現(xiàn)消息滾動播放效果
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)消息滾動播放效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-02-02
jQuery實現(xiàn)Select下拉列表進行狀態(tài)選擇功能
本文主要介紹了jQuery實現(xiàn)Select下拉列表進行狀態(tài)選擇功能的代碼。具有很好的參考價值，下面跟著小編一起來看下吧
2017-03-03
jQuery實現(xiàn)多級下拉菜單jDropMenu的方法
這篇文章主要介紹了jQuery實現(xiàn)多級下拉菜單jDropMenu的方法,涉及jquery鼠標(biāo)事件及頁面元素遍歷的相關(guān)技巧,非常具有實用價值,需要的朋友可以參考下
2015-08-08