`
chunzhisu
  • 浏览: 12527 次
  • 性别: Icon_minigender_1
最近访客 更多访客>>
ptkr
yaweja
社区版块
存档分类
最新评论

jQuery+CSS打造浮动在网页左下角可关闭的导航菜单

 
阅读更多 
<!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>
<title>接触角测定仪</title>
<style type="text/css">
body{ background-color:#bbac85;}
ul,li{ margin:0px; padding:0px; list-style:none;}
.navbox{ width:95px; height:auto;z-index:99; left:2px; bottom:5px;POSITION:fixed;_position:absolute; _margin-top:expression(document.documentElement.clientHeight-this.style.pixelHeight+document.documentElement.scrollTop); font-family: "宋体";}
.mj_nav{ width:93px; height:auto; border:1px solid #806f5f; background-color:#f3f3f3; -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px; padding-bottom:15px;}
.mj_nav_bt{ width:93px; height:30px; background-color:#806f5f; font-size:14px; font-weight:bold; line-height:30px; text-align:center; color:#fde399; margin-bottom:10px;}
.mj_nav_list{ width:83px; height:auto; padding:0px 5px;}
.nav_span{ display:block; width:68px; padding-left:15px; height:24px; line-height:24px; background-image:url(/imagesforcode/201305/mjnav.gif); background-repeat:no-repeat; background-position:5px 8px; color:#594d42; font-size:14px; cursor: pointer;}
.mj_sn{ background-position:5px -12px;}
.mj_nav_list ul{ width:68px; height:auto; padding:0px 0px 15px 15px; display:none;}
.mj_nav_list li{ width:68px; height:24px; line-height:24px; font-size:14px; overflow:hidden;}
.mj_nav_list li a{ color:#0a57b7; text-decoration: underline;}
.mj_nav_list li a:hover{ color: #FF6600;}
.guanbi,.gotop{ width:93px; height:30px; line-height:30px; border:1px solid #806f5f; background-color:#f3f3f3; -webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px; text-align:center; font-size:14px; color:#594d42; margin-top:3px; cursor: pointer;}
.gotop{ display:none;}
.zhangkai{ width:20px; height:auto; padding:10px 5px; line-height:20px; font-size:14px; text-align:center;-webkit-border-radius:0px 5px 5px 0px;-moz-border-radius:0px 5px 5px 0px;border-radius:0px 5px 5px 0px; border:1px solid #806f5f; background-color:#f3f3f3; POSITION:fixed;_position:absolute; _margin-top:expression(document.documentElement.clientHeight-this.style.pixelHeight+document.documentElement.scrollTop); z-index:100; left:0px; bottom:150px; display:none; cursor: pointer; color:#594d42;}
.xx{ height:1000px;}
</style>
<script type="text/javascript" src="/images/jquery.js"></script>
<script type="text/javascript">
	  $(document).ready(function(){
			$(".mj_nav_list span").click(function(){
			    $(".mj_nav_list span").not($(this)).removeClass("mj_sn");
				$(this).toggleClass("mj_sn");
				$(".mj_nav_list ul").not($(this).next()).slideUp();
				$(this).next().slideToggle(500);
				//$(this).next().toggle();
			});
			$(window).scroll(function(){
			   if ( $(window).scrollTop() > 50 ){
                                $(".gotop").fadeIn(800);
                        } else {
                                $(".gotop").fadeOut(500);
                        };
			});
			$(".gotop").click(function(){
			    $(window).scrollTop(0);
			});
			$(".guanbi").click(function(){
			    $(".navbox").hide();
				$(".zhangkai").show();
			});
			$(".zhangkai").click(function(){
			    $(this).hide();
				$(".navbox").show(500);
			});
	  });
    </script>
</head>
<body>
<br>所需js文件：<a href="/images/jquery.js" target="_blank">jquery.js</a><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。</font></p>
<div class="navbox">
<div class="mj_nav">
<div class="mj_nav_bt">网站导航</div>
<div class="mj_nav_list">
<span class="nav_span">网页特效</span>
<ul>
<li><a target="_blank" href="http://www.csrcode.cn/list-2.html" title="">菜单导航特效</a></li>
<li><a target="_blank" href="http://www.csrcode.cn/list-3.html" title="">图层样式特效</a></li>
<li><a target="_blank" href="http://www.csrcode.cn/list-4.html" title="">链接文本特效</a></li>
<li><a target="_blank" href="http://www.csrcode.cn/list-5.html" title="">图形图像特效</a></li>
<li><a target="_blank" href="http://www.csrcode.cn/list-6.html" title="">日期时间特效</a></li>
<li><a target="_blank" href="http://www.csrcode.cn/list-7.html" title="">页面窗口特效</a></li>
</ul>
</div>
<div class="mj_nav_list">
<span class="nav_span">特效代码</span>
<ul>
<li><a target="_blank" href="http://www.csrcode.cn/list-8.html" title="">鼠标特效代码</a></li>
<li><a target="_blank" href="http://www.csrcode.cn/list-9.html" title="">网页背景特效</a></li>
<li><a target="_blank" href="http://www.csrcode.cn/list-10.html" title="">表格表单特效</a></li>
<li><a target="_blank" href="http://www.csrcode.cn/list-11.html" title="">状态栏特效</a></li>
<li><a target="_blank" href="http://www.csrcode.cn/list-12.html" title="">页面搜索特效</a></li>
<li><a target="_blank" href="http://www.csrcode.cn/list-13.html" title="">其他网页特效</a></li>
</ul>
</div>
<div class="mj_nav_list">
<span class="nav_span">友情链接</span>
<ul>
<li><a target="_blank" href="http://www.33567.cn/">Qvod电影</a></li>
<li><a target="_blank" href="http://www.7caidy.com/">快播电影</a></li>
<li><a target="_blank" href="http://bbs.33567.cn/">外链论坛</a></li>
<li><a target="_blank" href="http://idc.csrcode.cn/">月付主机</a></li>
<li><a target="_blank" href="http://dir.33567.cn/">分类目录</a></li>
</ul>
</div>
</div>
<div class="gotop">返回顶部</div>
<div class="guanbi">点击关闭</div>
</div>
<div class="zhangkai">栏目导航</div>
<div class="xx"></div>
</body>
</html>

 

分享到：
| jQuery仿百度的分页足迹效果
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics