[分享] 仿制固定左下角精美导航栏

无界

老规矩，先看截图：

下載 (14.75 KB)

2013-5-20 19:39

预览地址：http://tlb.258club.com/

新建页头通栏广告，将下面代码复制进去。文字内容和链接自己改一下即可。

1. <div  style="position:fixed; left:0px; bottom:10px;z-index:9999;">
   
2. <style type="text/css">
   
3. body {margin:0px;border:0px;font-size:12px;background-color:#fff;}
   
4. a:link{color: #003278;text-decoration: none;}
   
5. a:visited{color: #003278;text-decoration: none;}
   
6. a:hover{color: #FF6600;text-decoration: underline;}
   
7. #box_TLB{background:url(http://fc08.deviantart.net/fs70/f/2013/139/6/9/slidebox_bg_by_bjwujie-d65swgq.gif);height:168px;width:178px;padding-left:5px;padding-right:5px;}
   
8. #slide{padding-top:5px}
   
9. #slide li img{margin-right:3px}
   
10. #box_TLB ul{padding:0;margin:0;clear:both;list-style:none;overflow:hidden}
    
11. #box_TLB li{float:left;font-weight:bold;height:37px !important;height:27px;}
    
12. #box_TLB li a:link,#box_TLB li a:visited{color:#000;}
    
13. #box_TLB li a:hover{color:#ff7300;text-decoration: none}
    
14. #box_TLB .l{background:url(http://fc03.deviantart.net/fs70/f/2013/139/7/0/slidebox_tableft_by_bjwujie-d65swg4.gif);width:80px;}
    
15. #box_TLB .r{background:url(http://fc08.deviantart.net/fs71/f/2013/139/d/2/slidebox_tabright_by_bjwujie-d65swfw.gif);width:94px;float:right}
    
16. #box_TLB .l_h{background:url(http://fc04.deviantart.net/fs71/f/2013/139/6/5/slidebox_tableft_h_by_bjwujie-d65swfy.gif);width:80px;}
    
17. #box_TLB .r_h{background:url(http://fc03.deviantart.net/fs70/f/2013/139/c/f/slidebox_tabright_h_by_bjwujie-d65swfs.gif);width:94px;float:right;}
    
18. #box_TLB .hide{display:none}
    
19. #box_TLB .l a{width:52px;}
    
20. #box_TLB .r a{width:68px;}
    
21. .arrow{padding-left:8px;background:url(http://fc05.deviantart.net/fs70/f/2013/139/5/f/icon_arrow03_right_08x_by_bjwujie-d65swhh.gif) no-repeat;}
    
22. #box_TLB .l a,#box_TLB .r a,#box_TLB .l_h a,#box_TLB .r_h a{padding-left:24px;display:block;height:100%;padding-top:10px;}
    
23. .btn_zchy{background:url(http://fc05.deviantart.net/fs70/f/2013/139/f/e/icon_zchy01_12x_by_bjwujie-d65swgu.gif) 5px 10px no-repeat;}
    
24. .btn_cxt{background:url(http://fc05.deviantart.net/fs70/f/2013/139/4/a/icon_cxt01_12x_by_bjwujie-d65swhb.gif) 5px 10px no-repeat;}
    
25. .btn_tggs{background:url(http://fc06.deviantart.net/fs70/f/2013/139/4/b/icon_tggs01_12x_by_bjwujie-d65swh2.gif) 5px 10px no-repeat;}
    
26. .btn_fbxx{background:url(http://fc04.deviantart.net/fs70/f/2013/139/1/8/icon_fbxx01_12x_by_bjwujie-d65swh8.gif) 5px 10px no-repeat;}
    
27. .btn_xzmj{background:url(http://fc02.deviantart.net/fs70/f/2013/139/8/2/icon_xzmj01_12x_by_bjwujie-d65swgy.gif) 5px 10px no-repeat;}
    
28. .btn_alisoft{background:url(http://fc07.deviantart.net/fs71/f/2013/139/7/2/icon_alisoft01_12x_by_bjwujie-d65swhn.gif) 5px 10px no-repeat;}
    
29. #box_TLB .cont_l{float:left;background:url(http://fc09.deviantart.net/fs70/f/2013/139/e/b/slidebox_conleft_by_bjwujie-d65swgj.gif);width:157px;height:31px;padding:9px 7px 7px 14px;margin-bottom:4px;overflow:hidden}
    
30. #box_TLB .cont_r{float:left;background:url(http://fc01.deviantart.net/fs71/f/2013/139/7/b/slidebox_conright_by_bjwujie-d65swge.gif);width:157px;height:31px;padding:9px 7px 7px 14px;margin-bottom:4px;overflow:hidden}
    
31. #box_TLB .oneline{line-height:33px;}
    
32. </style>
    
33. 
    
34. <div id="box_TLB">
    
35. <div id="slide">
    
36.   <ul>
    
37.   <li class="l_h"><a href="logging.php?action=login" class="btn_zchy">登陆</a></li>
    
38.   <li class="r"><a href="my.php" class="btn_cxt">我的帖子</a></li>
    
39.   </ul>
    
40.   <div class="cont_l" id="app_1">
    
41. TLB爱我吧俱乐部欢迎你！
    
42.   </div>
    
43.   <div class="hide" id="app_2">
    
44. TLB爱我吧俱乐部欢迎你！
    
45.   </div>
    
46.    <ul>
    
47.   <li class="l"><a href="task.php" class="btn_tggs">我的任务</a></li>
    
48.   <li class="r"><a href="register.php" class="btn_fbxx">注册会员</a></li>
    
49.   </ul>
    
50.    <div class="hide" id="app_3">
    
51. TLB爱我吧俱乐部欢迎你！
    
52.   </div>
    
53.   <div class="hide" id="app_4">
    
54. TLB爱我吧俱乐部欢迎你！
    
55. </div>
    
56.   <ul>
    
57.   <li class="l"><a href="search.php" class="btn_xzmj">搜索</a></li>
    
58.   <li class="r"><a href="" class="btn_alisoft">我的宠物</a></li>
    
59.   </ul>
    
60.   <div class="hide" id="app_5">
    
61. TLB爱我吧俱乐部欢迎你！
    
62.   </div>
    
63.   <div class="hide" id="app_6">
    
64. TLB爱我吧俱乐部欢迎你！
    
65.   </div>
    
66. </div>   
    
67. </div>
    
68. <script type="text/javascript">
    
69. var slideTabIndex=1;
    
70. var sTabList = document.getElementById("box_TLB").getElementsByTagName("li");
    
71. for(var i=0;i<sTabList.length;i++){
    
72. var obj = sTabList[i].getElementsByTagName("a")[0];
    
73. sTabList[i].getElementsByTagName("a")[0].id="slideBtn_"+(i+1);
    
74. if (obj.addEventListener) {
    
75. obj.addEventListener( "mouseover", overSlide, false );
    
76. }
    
77. else if (obj.attachEvent) {
    
78. obj.attachEvent( "onmouseover", overSlide );
    
79. }
    
80. }
    
81. function overSlide(e){
    
82. e = window.event || e;
    
83. var srcElement = e.srcElement || e.target;
    
84. var newTabIndex=srcElement.id.replace("slideBtn_","");
    
85. var pos = srcElement.parentNode.className;
    
86. if(newTabIndex==""||pos.indexOf("_h")!=-1)return;
    
87. document.getElementById("slideBtn_"+slideTabIndex).parentNode.className=document.getElementById("slideBtn_"+slideTabIndex).parentNode.className.replace("_h","");
    
88. document.getElementById("app_"+slideTabIndex).className="hide";
    
89. document.getElementById("app_"+newTabIndex).className="cont_"+pos;
    
90. srcElement.parentNode.className = pos+"_h";
    
91. slideTabIndex=newTabIndex;
    
92. }
    
93. </script>
    
94. </div>

複製代碼

3526639

强 我喜欢

3526639

强 我喜欢 代码太多哟 诶 用不起

xuan

謝謝分享，提供

4rphotoclub

大家一定要收下這好東西啊

pigeon

感谢分享。