时间:2021-05-26
复制代码 代码如下:
<!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 浮动导航栏</title>
<script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></script>
<style type="text/css">
#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;
}
</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>
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了jquery菜单导航栏的实现代码,供大家参考,具体内容如下1.HTML代码竖直导航菜单$(function(){//垂直导航栏,点击下拉子菜
css制作的立体导航栏,具体实现代码如下所示:CSS制作立体导航body{background:#ebebeb;}.nav{width:560px;height
【JS-实现导航栏悬停】【JS-实现导航栏悬停(续)】用Jquery重新写完这个页面之后,发现原来的方法还有是有几个问题:1.首先Js代码冗余,导航条上的Tab
本文介绍了Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码,分享给大家,具体如下:PC端移动端代码左侧导航*{margin:0;padding
本文实例讲述了jQuery实现的登录浮动框效果代码。分享给大家供大家参考。具体如下:这是一款jQuery登录浮动框代码,点击登录按钮后可看到弹出了一个浮动层,右