免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
新浪微博
QQ空间
Facebook
Google+
Plurk
Twitter
Line
Board logo

标题: [教学] 115风格二级导航 [打印本页]
作者: icode    时间: 2018-11-5 18:37     标题: 115风格二级导航

捕获.PNG

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-->

  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>

  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. }
复制


图片附件: 捕获.PNG (2018-11-5 18:43, 69.89 KB) / 下载次数 937
http://icode.258club.com/attachment.php?aid=625&k=55b935820c05d1682b3ca9a78a234f54&t=1749895593&sid=MBb4aI

作者: 麻城生活网    时间: 2018-11-5 20:09

感谢，好及时的教程啊



欢迎光临 爱秀代码 (http://icode.258club.com/) Powered by Discuz! 7.2