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

標題: [其它] 请问这样的导航如何设置？ [打印本頁]
作者: 流传动    時間: 2013-3-19 14:34     標題: 请问这样的导航如何设置？

http://bbs.amoi.com.cn如图
作者: pigeon    時間: 2013-3-19 15:37

用章鱼的试试。。
作者: 流传动    時間: 2013-3-19 15:53

用章鱼的试试。。
pigeon 發表於 2013-3-19 15:37



    你好你的论坛用的是首页多格怎么还有会员发帖的头像会显示呢？是重新修改了模板吗？
作者: 章鱼    時間: 2013-3-19 19:16

  1. <style type="text/css">
  2. #top_menu{ width:960px; height:35px;   margin:0 auto; background:#c40001;}
  3. #top_menu ul{ list-style:none; margin:0px; padding:0px; }
  4. #top_menu ul li{ float:left; position:relative;}
  5. #top_menu ul li a{ display:block; font-weight:bold; width:110px;height:35px; color:#fff; text-align:center; line-height:35px;font-size:14px;}
  6. #top_menu ul li a:hover{ background:#ee6932;}
  7. #top_menu ul li a#index{ background:#ee6932; font-weight:bold; color:#fff;}
  8. #top_menu ul li ul{ border: 1px solid #cdcdcd; background:#fff; display:none;  padding:5px; position:absolute;left:0px; top:35px;}
  9. #top_menu ul li ul li{ float:none; width:135px; height:34px; line-height:28px; }
  10. #top_menu ul li ul li a{ background:none; color:#000; width:100%; font-weight:normal;font-size:12px; text-align:left;}
  11. #top_menu ul li ul li a span { margin-left:4px; }
  12. #top_menu ul li ul li a:hover{ background:ee6932; color:#fff; }
  13. #top_menu ul li:hover ul{ display:block;}
  14. #top_menu ul li.show ul{ display:block; };
  15. </style>
  16. <div id="top_menu">
  17. <ul>
  18. <li><a href="http://bbs.amoi.com.cn/">首页</a></li>
  19. <li><a href="http://bbs.amoi.com.cn/index.php?gid=1">夏新天地</a>
  20. <ul>
  21. <li><a href="http://bbs.amoi.com.cn/forumdisplay.php?fid=2"><span></span>技术交流</a></li>
  22. <li><a href="http://bbs.amoi.com.cn/forumdisplay.php?fid=15"><span></span>新手上路</a></li>
  23. <li><a href="http://bbs.amoi.com.cn/forumdisplay.php?fid=17"><span></span>应用分享</a></li>
  24. <li><a href="http://bbs.amoi.com.cn/forumdisplay.php?fid=18"><span></span>售后咨询</a></li>
  25. <li><a href="http://bbs.amoi.com.cn/forumdisplay.php?fid=19"><span></span>八卦杂谈</a></li>
  26. </ul>
  27. </li>
  28. <li><a href="http://bbs.amoi.com.cn/index.php?gid=7">绚丽产品</a>
  29. <ul>
  30. <li><a href="http://bbs.amoi.com.cn/forumdisplay.php?fid=10"><span></span>全部产品</a></li>
  31. <li><a href="http://bbs.amoi.com.cn/forumdisplay.php?fid=8"><span></span>活动分享</a></li>
  32. </ul>
  33. </li>
  34. <li><a href="http://bbs.amoi.com.cn/index.php?gid=7">热销专区</a>
  35. <ul>
  36. <li><a href="http://bbs.amoi.com.cn/forumdisplay.php?fid=54"><span></span>大V专区</a></li>
  37. <li><a href="http://bbs.amoi.com.cn/forumdisplay.php?fid=55"><span></span>小V专区</a></li>
  38. <li><a href="http://bbs.amoi.com.cn/forumdisplay.php?fid=52"><span></span>N808专区</a></li>
  39. </ul>
  40. </li>
  41. <li><a href="http://bbs.amoi.com.cn/index.php?gid=11">资源下载</a>
  42. <ul>
  43. <li><a href="http://bbs.amoi.com.cn/forumdisplay.php?fid=14"><span></span>驱动andT卡资源</a></li>
  44. <li><a href="http://bbs.amoi.com.cn/forumdisplay.php?fid=13"><span></span>Java应用</a></li>
  45. </ul>
  46. </li>
  47. <li><a href="http://bbs.amoi.com.cn/forumdisplay.php?fid=12">Android应用</a>
  48. <ul>
  49. <li><a href="http://bbs.amoi.com.cn/forumdisplay.php?fid=20"><span></span>装机必备</a></li>
  50. <li><a href="http://bbs.amoi.com.cn/forumdisplay.php?fid=21"><span></span>游戏</a></li>
  51. <li><a href="http://bbs.amoi.com.cn/forumdisplay.php?fid=22"><span></span>音乐影音</a></li>
  52. <li><a href="http://bbs.amoi.com.cn/forumdisplay.php?fid=23"><span></span>主题壁纸</a></li>
  53. <li><a href="http://bbs.amoi.com.cn/forumdisplay.php?fid=24"><span></span>电子书</a></li>
  54. </ul>
  55. </li>
  56. <li><a href="http://news.amoi.com.cn" target="_blank">官网</a></li>
  57. <li><a href="http://www.amoi.com.cn" target="_blank">官方商城</a></li>
  58. </ul>
  59. </div>
  60. <script type="text/javascript">
  61. function menuStar()
  62. {
  63. var mu=document.getElementById("top_menu").getElementsByTagName("li");
  64. for(var i=0;i<mu.length;i++)
  65. {
  66. mu[i].onmouseover=function()
  67. {
  68. this.className+=" show";
  69. this.style.zIndex=999;
  70. }
  71. mu[i].onmouseout=function()
  72. {
  73. this.className=this.className.replace(" show", "");

  75. }
  76. }
  77. }
  78. menuStar();
  79. </script>
複製代碼
放在业内文字广告
作者: pigeon    時間: 2013-3-19 20:40

回復 3# 流传动


    这个真没有，只是数据调用而已。
作者: 流传动    時間: 2013-3-20 10:26     標題: ，

本帖最後由 流传动 於 2013-3-20 10:28 編輯
放在业内文字广告
章鱼 發表於 2013-3-19 19:16



    不错谢谢了，问一下怎么自适用论坛风格呢那个宽度
作者: tzxlegou    時間: 2013-3-20 10:52

回復 4# 章鱼

您好,感谢分享,但是我的加了红色的导航栏之后,QQ群久爱不好正常展示了,怎么办啊?
作者: 流传动    時間: 2013-3-20 10:53

我的家了以后宽度很宽哪里调整，还有怎么把所有的导航都取消只剩下这个呢？
作者: 4rphotoclub    時間: 2013-3-20 11:40

要好好來學習一吓
作者: cata    時間: 2013-6-15 17:27

來學習一吓



歡迎光臨 SCLUB免費論壇申請-使用者論壇 (http://258club.com/discuz/) Powered by Discuz! 7.2