繁體
|
簡體
Sclub交友聊天~加入聊天室當版主
(檢舉)
分享
新浪微博
QQ空间
人人网
腾讯微博
Facebook
Google+
Plurk
Twitter
Line
標題:
[分享]
左下角超酷导航&回到顶部二合一
[打印本頁]
作者:
无界
時間:
2013-5-21 21:02
標題:
左下角超酷导航&回到顶部二合一
先看效果:
下載
(133.74 KB)
2013-5-21 20:53
1、工具-数据调用-新建自定义模块,名称为“自定义_我的导航”。把下边代码放进去。
<style type="text/css">
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(http://fc06.deviantart.net/fs71/f/2013/141/b/1/2012821381792487_by_bjwujie-d66175k.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="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.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">TLB认知</span>
<ul>
<li><a href="/forumdisplay.php?fid=21">安装与插件</a></li>
<li><a href="/forumdisplay.php?fid=20">官方文档</a></li>
<li><a href="/forumdisplay.php?fid=19">中文教程</a></li>
<li><a href="http://tlb.258club.com">俱乐部交友</a></li>
<li><a href="http://tlb.258club.com">电影院</a></li>
<li><a href="http://tlb.258club.com">宠物论坛</a></li>
<li><a href="http://tlb.258club.com">开心论坛</a></li>
<li><a href="http://tlb.258club.com">心理测试</a></li>
<li><a href="http://tlb.258club.com">笑话吧</a></li>
<li><a href="http://tlb.258club.com" >彩票论坛</a></li>
<li><a href="http://tlb.258club.com">股票论坛</a></li>
<li><a href="http://tlb.258club.com">电脑论坛</a></li>
<li><a href="http://tlb.258club.com">公交线路</a></li>
</ul>
</div>
<div class="mj_nav_list">
<span class="nav_span">分类信息</span>
<ul>
<li><a href="http://tlb.258club.com">房屋出租</a></li>
<li><a href="http://tlb.258club.com">招聘求职</a></li>
<li><a href="http://tlb.258club.com">二手交易市场</a></li>
<li><a href="http://tlb.258club.com" >商家优惠促销信息</a></li>
<li><a href="http://tlb.258club.com">快捷订餐</a></li>
<li><a href="http://tlb.258club.com">团购活动</a></li>
<li><a href="http://tlb.258club.com">综合服务</a></li>
<li><a href="http://tlb.258club.com">拼车信息</a></li>
<li><a href="http://tlb.258club.com">商家通讯录</a></li>
</ul>
</div>
<div class="mj_nav_list">
<span class="nav_span">友情论坛</span>
<ul>
<li><a href="http://tlb.258club.com">XX论坛</a></li>
<li><a href="http://tlb.258club.com">XX论坛</a></li>
<li><a href="http://tlb.258club.com">XX论坛</a></li>
<li><a href="http://tlb.258club.com">XX论坛</a></li>
<li><a href="http://tlb.258club.com">XX论坛</a></li>
<li><a href="http://tlb.258club.com">XX论坛</a></li>
<li><a href="http://tlb.258club.com">XX论坛</a></li>
<li><a href="http://tlb.258club.com">XX论坛</a></li>
</ul>
</div>
</div>
<div class="gotop">返回顶部</div>
<div class="guanbi">点击关闭</div>
</div>
<div class="zhangkai">论坛栏目导航</div>
複製代碼
板块名称和链接自行修改就OK。
2、打开discuz.htm模版找到
$pluginhooks[index_header]
複製代碼
在下边加上
{eval request('自定义_我的导航');}
複製代碼
即可
圖片附件:
daohang.gif
(2013-5-21 20:53, 133.74 KB) / 下載次數 1538
http://funbbs.me/discuz/attachment.php?aid=20624&k=70c91658c1a91443fd2788fc5d116742&t=1732359442&sid=W8BnDD
作者:
xuan
時間:
2013-5-21 23:20
你好強,謝謝分享
作者:
达人小G
時間:
2013-5-22 05:17
谢谢分享!
作者:
mikumkiku
時間:
2013-5-22 12:35
楼主好人!不像某些回复可见还要去他论坛又要回复可见
作者:
4rphotoclub
時間:
2013-5-23 10:35
這真是很棒的東西啊
努力加油
作者:
葱葱
時間:
2015-2-15 04:37
回復
1#
无界
这个有效果哦 不错 但是怎么好像只在首页显示?求指教
歡迎光臨 SCLUB免費論壇申請-使用者論壇 (http://funbbs.me/discuz/)
Powered by Discuz! 7.2