代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><title>JQuery 浮動導覽列</title><br /><script type="text/javascript" src="http://www.cndns.com/Scripts/jquery.js"></script><br /><style type="text/css"><br />/* 浮動導覽列 Begin */<br />#floatMenu<br />{<br /> padding-top: 5px;<br /> background: url(http://www.cndns.com/cn/gdomain/images/quickmenu.gif) no-repeat;<br /> border: 1px solid #dcdcdc;<br /> position: absolute;<br /> top: 250px;<br /> left: 5px;<br /> margin-left: 0px;<br /> width: 86px;<br />}<br />#floatMenu ul<br />{<br /> margin-left: 0px;<br /> background-color:White;<br />list-style-type: none;<br />padding:10px<br />}<br />#floatMenu ul li a<br />{<br /> display: block;<br /> text-decoration: none;<br /> color: #000;</p><p>}<br />#floatMenu ul li a:hover<br />{<br /> color: #fff;<br /> background-color: #ff8000;<br />}<br />#floatMenu ul.menu1 li a:hover<br />{<br /> border-color: #09f;<br />}<br />/* 浮動導覽列 End */<br /></style><br /></head></p><p><body><br /><div id="floatMenu"><br /> <ul class="menu1"><br /> <li><a href="#" onclick="return false;">Home</a></li><br /> <li><a href="#" onclick="return false;">About Us</a></li><br /> <li><a href="#" onclick="return false;">Product</a></li><br /> <li><a href="#" onclick="return false;">Contact</a></li><br /> </ul><br /></div></p><p><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 /></p><p> <script type="text/javascript"><br /> //<![CDATA[<br /> var name = "#floatMenu";<br /> var menuYloc = null;<br /> $(document).ready(function() {<br /> menuYloc = parseInt($(name).css("top").substring(0, $(name).css("top").indexOf("px")))<br /> $(window).scroll(function() {<br /> offset = menuYloc + $(document).scrollTop() + "px";<br /> $(name).animate({ top: offset }, { duration: 500, queue: false });<br /> });<br /> });<br /> //]]><br /> </script><br /></body><br /></html>
[Ctrl+A 全選 提示:你可先修改部分代碼,再點運行代碼]
