[教学] 115风格二级导航 [复制链接]

icode

下载 (69.89 KB)

2018-11-5 18:43

1、编辑header模板找到

1. <div id="append_parent"></div><div id="ajaxwaitid"></div>

复制

在下边加

1. <!--二级导航【插件】弹出菜单-->
   
2. <ul id="mycj_menu" style="display: none;margin-left: 130px;margin-top: -30px;">
   
3.     <div class="mycj-angle"></div>
   
4.         <div class="mycj_bottom cl">
   
5. <div class="user-bottom-con">
   
6. <a href="http://icode.258club.com/bank.php?">社区银行</a>
   
7. <a href="http://icode.258club.com/plugin.php?id=dps_sign:sign">签到中心</a>
   
8. <a href="http://icode.258club.com/plugin.php?id=get_money:money">红包中心</a>
   
9. <a href="http://icode.258club.com/plugin.php?id=dps_medalcenter">勋章中心</a>
   
10. <a href="http://icode.258club.com/plugin.php?icode=shuatie">刷帖神器</a>
    
11. <a href="http://icode.258club.com/faq.php?icode=xiuxiu">美图秀秀</a>
    
12. </div>
    
13.     </div>
    
14. </ul>
    
15. <!--二级导航【插件】弹出菜单end-->
    
16. 
    
17. <!--二级导航【快捷导航】弹出菜单-->
    
18. <ul id="qmenu_menu" style="display:none;">
    
19. <div class="qmenu-angle"></div>
    
20. <!--{if $discuz_uid}-->
    
21.         <div class="qmenu_bottom cl">
    
22. <li><a href="magic.php" style="background-image:url(http://122.114.11.142/new115/static/image/feed/magic_b.png) !important" class="hidefocus">道具</a></li>
    
23. <li><a href="plugin.php?id=dps_medalcenter" style="background-image:url(http://122.114.11.142/new115/static/image/feed/medal_b.png) !important">勋章</a></li>
    
24. <li><a href="task.php" style="background-image:url(http://122.114.11.142/new115/static/image/feed/task_b.png) !important">任务</a></li>
    
25. <li><a href="my.php?item=favorites" style="background-image:url(http://122.114.11.142/new115/static/image/feed/collection_b.png) !important">收藏</a></li>
    
26. <li><a href="my.php?item=buddylist" style="background-image:url(http://122.114.11.142/new115/static/image/feed/feed_b.png) !important">好友</a></li>
    
27. <li><a href="my.php?item=threads" style="background-image:url(http://122.114.11.142/new115/static/image/feed/blog_b.png) !important">日志</a></li>
    
28. <li><a href="home.php?mod=space&amp;do=album" style="background-image:url(http://122.114.11.142/new115/static/image/feed/album_b.png) !important">相册</a></li>
    
29. <li><a href="home.php?mod=space&amp;do=share" style="background-image:url(http://122.114.11.142/new115/static/image/feed/share_b.png) !important">分享</a></li>
    
30. <li><a href="http://icode.258club.com/plugin.php?id=dps_sign:sign" style="background-image:url(http://122.114.11.142/new115/static/image/feed/doing_b.png) !important">签到</a></li>
    
31. <li><a href="http://icode.258club.com/faq.php?zyhome=lovewall" style="background-image:url(http://122.114.11.142/new115/static/image/feed/wall_b.png) !important">留言板</a></li>
    
32. <li><a href="misc.php?mod=ranklist" style="background-image:url(http://122.114.11.142/new115/static/image/feed/ranklist_b.png) !important">排行榜</a></li>
    
33.         </div>
    
34. <!--{else}-->
    
35. <div class="ptm pbw hm">
    
36. <a href="logging.php?action=login" onclick="showWindow('login', this.href);return false;">登录</a><span class="pipe">|</span>
    
37. <a href="$regname" onclick="showWindow('register', this.href);return false;">立即注册</a>
    
38. </div>
    
39. <!--{/if}-->
    
40. </ul>
    
41. <!--二级导航【快捷导航】弹出菜单end-->

复制

2、继续找到

1.                                 </ul>
   
2.                                 <script type="text/javascript">
   
3.                                         var currentMenu = $('mn_$mnid') ? $('mn_$mnid') : $('mn_$navmns[0]');
   
4.                                         currentMenu.parentNode.className = 'current';
   
5.                                 </script>

复制

在</ul>上边加

1. <!--二级导航【插件】弹出菜单按钮-->
   
2. <li class="menu_99"><a href="javascript:;" id="mycj" onmouseover="showMenu({'ctrlid':'mycj'});" initialized="true">插件</a></li>
   
3. 
   
4. <!--二级导航【快捷导航】弹出菜单按钮-->
   
5. <li class="menu_100"><a href="javascript:;" id="qmenu" onmouseover="showMenu({'ctrlid':'qmenu'});" initialized="true"><img src="http://icode.258club.com/attachments/month_1810/1810311601ab0e1a1e8296fc65.png">快捷导航</a></li>

复制

3、打开css_append模板在最下边加

1. .mycj_bottom {
   
2.     width: 210px;
   
3.     background: #fff;
   
4.     box-shadow: 3px 1px 5px rgba(0,0,0,0.5);
   
5.     border-radius: 3px;
   
6.     padding: 10px;
   
7.     position: relative;
   
8.     z-index: 999;
   
9.     top: 10px;
   
10.     font-size: 12px;
    
11.     color: #666 !important;
    
12. }
    
13. .mycj-angle {
    
14.     margin-bottom: -50px;
    
15.     margin-left: -20px;
    
16.     transform: rotate(270deg);
    
17.     width: 0px;
    
18.     height: 0px;
    
19.     overflow: hidden;
    
20.     border-width: 10px;
    
21.     border-style: solid;
    
22.     -moz-border-top-colors: none;
    
23.     -moz-border-right-colors: none;
    
24.     -moz-border-bottom-colors: none;
    
25.     -moz-border-left-colors: none;
    
26.     border-image: none;
    
27.     border-color: transparent transparent #FFF;
    
28.     position: relative;
    
29. }
    
30. .user-bottom-con {
    
31.     width: 100%;
    
32.     display: inline-block;
    
33. }
    
34. .user-bottom-con a {
    
35.     display: inline-block;
    
36.     height: 24px !important;
    
37.     line-height: 24px !important;
    
38.     background: #eaeaea;
    
39.     background-image: none !important;
    
40.     text-align: center;
    
41.     border-radius: 3px;
    
42.     width: 95px;
    
43.     margin-right: 10px;
    
44.     float: left;
    
45.     margin-bottom: 5px;
    
46.     color: #666 !important;
    
47.     padding: 0 !important;
    
48. }
    
49. .qmenu_bottom {
    
50.     width: 430px;
    
51.     height: 156px;
    
52.     background: #fff;
    
53.     box-shadow: 3px 1px 5px rgba(0,0,0,0.5);
    
54.     border-radius: 3px;
    
55.     padding: 10px;
    
56.     position: relative;
    
57.     z-index: 999;
    
58.     top: 10px;
    
59.     font-size: 12px;
    
60.     color: #666 !important;
    
61. }
    
62. .qmenu-angle {
    
63.     margin-bottom: -50px;
    
64.     margin-left: -20px;
    
65.     transform: rotate(270deg);
    
66.     width: 0px;
    
67.     height: 0px;
    
68.     overflow: hidden;
    
69.     border-width: 10px;
    
70.     border-style: solid;
    
71.     -moz-border-top-colors: none;
    
72.     -moz-border-right-colors: none;
    
73.     -moz-border-bottom-colors: none;
    
74.     -moz-border-left-colors: none;
    
75.     border-image: none;
    
76.     border-color: transparent transparent #FFF;
    
77.     position: relative;
    
78. }
    
79. #qmenu_menu {
    
80. margin-left: 130px;
    
81.     margin-top: -30px;
    
82. }
    
83. #qmenu_menu a {
    
84.     padding: 50px 12px 0 12px;
    
85. font-size: 12px;
    
86.     background: url(http://icode.258club.com/attachments/month_1811/181101055307feebc728cec6d6.gif) no-repeat 50% 5px;
    
87.     text-align: center;
    
88. display: block;
    
89. }
    
90. #qmenu_menu a:hover {
    
91.     background-color: #F2F2F2;
    
92.     color: #369;
    
93.     text-shadow: none;
    
94. }
    
95. #qmenu_menu li {
    
96.     float: left;
    
97.     margin: 5px;
    
98.     width: 60px;
    
99. }
    
100. #qmenu {
     
101.     display: block;
     
102.     height: 40px;
     
103.     line-height: 40px;
     
104.     color: #fff;
     
105.     padding: 0 15px 0 36px;
     
106.     font-weight: 400;
     
107.     overflow: hidden;
     
108.     font-size: 14px;
     
109.     position: relative;
     
110. }
     
111. #qmenu img {
     
112.     top: 12px;
     
113.     left: 15px;
     
114.     width: 16px;
     
115.     position: absolute;
     
116. }
     
117. .ptm {
     
118.     background-color: #fff;
     
119.     padding: 30px;
     
120.     box-shadow: 3px 1px 5px rgba(0,0,0,0.5);
     
121.     border-radius: 3px;
     
122. }
     
123. .ptm a {
     
124.     padding: 0!important;
     
125.     background: none!important;
     
126. display: inline!important;
     
127. }

复制

麻城生活网

感谢，好及时的教程啊