网页左小角菜单带返回顶部JS特效

时间：2013-11-23 来源：互联网
<!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=utf-8" />
<title>网页左小角菜单带返回顶部JS特效</title>
<style type="text/css">
/*科e互联CSS基础框架*/
*{padding:0; margin:0; font-size:12px; list-style:none}
.cor_bs,.cor_bs:hover{ color: #ffffff; text-decoration: none; font-size:16px;}
.keBody{background:url(../images/bodyBg.jpg) repeat #333;}
.keTitle{height:100px; line-height:100px; font-size:30px; font-family:'微软雅黑'; color:#FFF; text-align:center;font-weight:normal}
.kePublic{background: #fff url(http://www.internetke.com/jsEffects/2013111805/images/bg.jpg) repeat; padding:50px;}
.keBottom{color:#FFF; padding-top:25px; line-height:28px; text-align:center; font-family:'微软雅黑'; padding-bottom:25px}
.keTxtP{font-size:16px; color:#ffffff;}
.keUrl{color:#FFF; font-size:30px;}
.keUrl:hover{ text-decoration: underline; color: #FFF; }
.button {display: inline-block;zoom: 1; *display: inline;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding:0.25em 0.6em 0.3em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.red {color: #faddde;border: solid 1px #980c10;background: #d81b21;background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#A51715));background: -moz-linear-gradient(top,  #ed1c24,  #A51715);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red:hover { background: #b61318; background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)); background: -moz-linear-gradient(top,  #c9151b,  #a11115); filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115'); color:#fff;}
.red:active {color: #de898c;background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));background: -moz-linear-gradient(top,  #aa1317,  #ed1c24);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');}
/*科e互联CSS基础框架结束，可删除*/
/*特效CSS代码 开始*/
.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-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;}
/*特效CSS代码 结束*/
</style>
</head>
<body class="keBody">
<h1 class="keTitle">弹性十足网页菜单JS特效</h1>
<div class="kePublic">
<!--效果html开始-->
<script type="text/javascript" src="http://www.internetke.com/public/js/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>
<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 href="http://www.internetke.com" target="_blank">网页特效</a></li>
<li><a href="http://www.internetke.com" target="_blank">酒吧\夜店论坛</a></li>
<li><a href="http://www.internetke.com" target="_blank">活动召集</a></li>
<li><a href="http://www.internetke.com" target="_blank">福州交友</a></li>
<li><a href="http://www.internetke.com" target="_blank">福州电影院</a></li>
<li><a href="http://www.internetke.com" target="_blank">宠物论坛</a></li>
<li><a href="http://www.internetke.com" target="_blank">大利嘉论坛</a></li>
<li><a href="http://www.internetke.com" target="_blank">心理测试</a></li>
<li><a href="http://www.internetke.com" target="_blank">笑话吧</a></li>
<li><a href="http://www.internetke.com" target="_blank">彩票论坛</a></li>
<li><a href="http://www.internetke.com" target="_blank">股票论坛</a></li>
<li><a href="http://www.internetke.com" target="_blank">电脑论坛</a></li>
<li><a href="http://www.internetke.com" target="_blank">福州公交</a></li>
</ul>
</div>

<div class="mj_nav_list">
<span class="nav_span">分类信息</span>
<ul>
<li><a href="http://www.internetke.com" target="_blank">房屋出租</a></li>
<li><a href="http://www.internetke.com" target="_blank">招聘求职</a></li>
<li><a href="http://www.internetke.com" target="_blank">二手交易市场</a></li>
<li><a href="http://www.internetke.com" target="_blank">商家优惠促销信息</a></li>
<li><a href="http://www.internetke.com" target="_blank">福州订餐</a></li>
<li><a href="http://www.internetke.com" target="_blank">团购活动</a></li>
<li><a href="http://www.internetke.com" target="_blank">综合服务</a></li>
<li><a href="http://www.internetke.com" target="_blank">福州拼车</a></li>
<li><a href="http://www.internetke.com" target="_blank">商家通讯录</a></li>
</ul>
</div>

<div class="mj_nav_list">
<span class="nav_span">八县论坛</span>
<ul>
<li><a href="http://www.internetke.com" target="_blank">福清论坛</a></li>
<li><a href="http://www.internetke.com" target="_blank">长乐论坛</a></li>
<li><a href="http://www.internetke.com" target="_blank">平潭论坛</a></li>
<li><a href="http://www.internetke.com" target="_blank">连江论坛</a></li>
<li><a href="http://www.internetke.com" target="_blank">闽候论坛</a></li>
<li><a href="http://www.internetke.com" target="_blank">闽清论坛</a></li>
<li><a href="http://www.internetke.com" target="_blank">罗源论坛</a></li>
<li><a href="http://www.internetke.com" target="_blank">永泰论坛</a></li>
</ul>
</div>
</div>
<div class="gotop">返回顶部</div>
<div class="guanbi">点击关闭</div>
</div>
<div class="zhangkai">论坛栏目导航</div>
<div class="xx"></div>
<!--效果html结束-->
</div>
<div class="keBottom">
<p class="keTxtP">科e互联网页特效集锦---更多特效请访问 <a class="keUrl" href="http://www.internetke.com" target="_blank">www.internetke.com</a></p>
<p class="keTxtP">本站导航：
<a href="http://www.internetke.com/" target="_blank" class="cor_bs">网站建设</a> | 
<a href="http://www.internetke.com/material/" target="_blank" class="cor_bs">网页素材</a> | 
<a href="http://www.internetke.com/effects/" target="_blank" class="cor_bs">网页特效</a> | 
<a href="http://www.internetke.com/share/" target="_blank" class="cor_bs">设计分享</a> | 
<a href="http://www.internetke.com/tutorial/" target="_blank" class="cor_bs">建站教程</a> | 
<a href="http://www.internetke.com/model/" target="_blank" class="cor_bs">网站模版</a> | 
<a href="http://www.internetke.com/appreciate/" target="_blank" class="cor_bs">酷站赏析</a>
</p>
<p class="keTxtP">＊尊重他人劳动成果，转载请自觉注明出处！注：此代码为【科e整理/原创特效】仅供学习交流，请勿用于商业用途。
<a target="_blank" href="http://wp.qq.com/wpa/qunwpa?idkey=a7df3558c291e0407375b9ad649d96a6e507286ffeb0650c65a221d1500a0779" class="button red" title="北京网站建设,网页特效QQ交流群-科e互联">加入QQ交流群</a></p>
</div>
<!--广告代码开始-->
<div style="text-align:center"><script src='/plus/ad_js.php?aid=22' language='javascript'></script></div>
<!--广告代码结束-->
</body>
</html>
运行代码保存代码收藏分享评论提示：您可以先修改部分代码再运行。
特效说明：
网页左小角菜单带返回顶部JS特效，效果非常丰富的网页漂浮菜单，带关闭按钮，下拉菜单功能。兼容各大主流浏览器。（兼容测试：IE6及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器）
标签返回顶部浮动菜单
JS采用VUE制作无限极树形结构菜单展开收缩代码

2019-04-12
HTML5绘制动态线条像素背景动画特效

2019-04-12
jQuery网页视频在线播放器代码

2019-04-12
HTML5科幻空间动画背景网页特效

2019-04-12
jQuery滑动验证解锁插件slideunlock.js

2019-04-10
网页左小角菜单带返回顶部JS特效

分类导航

最新更新特效

JS采用VUE制作无限极树形结构菜单展开收缩代码

HTML5绘制动态线条像素背景动画特效

jQuery网页视频在线播放器代码

HTML5科幻空间动画背景网页特效

jQuery滑动验证解锁插件slideunlock.js
