TShopping

 找回密碼
 註冊
搜索
查看: 8124|回復: 4

[教學] CSS作出左側三層下拉式導覽列

  [複製鏈接]
發表於 2009-11-9 12:48:28 | 顯示全部樓層 |閱讀模式
 
Push to Facebook
CSS裡面寫入
  1. /* 設定選單寬度大小及背景顏色*/
  2. ol {
  3. padding:0px;
  4. margin-left:0%;
  5. background:#fff;
  6. width:160px;
  7. border-top:#aaa 1px solid;
  8. border-bottom:#aaa 1px solid;
  9. }
  10. li, li a {
  11. border:0px;
  12. list-style:none;
  13. margin:0px;
  14. text-decoration:none;
  15. }
  16. /* 設定主選單項目 */
  17. li.mainmenu {
  18. float:none;
  19. list-style:none;
  20. margin:0px;
  21. padding:0.3em 1em;
  22. position:relative;
  23. width:8em;
  24. border:#aaa 1px solid;
  25. }
  26. li.mainmenu:hover ul.level1{
  27. display:block;
  28. }
  29. li:hover {
  30. background-color:#ecebeb;
  31. }
  32. /* 設定副選單項目 */
  33. li.submenu {
  34. border:#aaa 1px solid;
  35. list-style:none;
  36. margin:0px;
  37. padding:0.3em 1em;
  38. position:relative;
  39. width:8em;
  40. background:url(d.gif) center right no-repeat;
  41. }
  42. ul {
  43. padding:0px;
  44. margin:0px;
  45. background:#fff;
  46. border:#000 0px solid;
  47. }
  48. ul.level1 {
  49. display:none;
  50. position:absolute;
  51. left:0em;
  52. top:0em;
  53. }
  54. ul.level2, ul.level3 {
  55. display:none;
  56. position:absolute;
  57. width:10em;
  58. left:10em;
  59. top:0em;
  60. }
  61. li.mainmenu:hover ul.level1, ul.level1 li.submenu:hover ul.level2, ul.level2 li.submenu:hover ul.level3, ul.level3 li.submenu:hover ul.level4 {
  62. display:block;
  63. left:10em;
  64. }
  65. ul.level1 li.submenu ul.level2 li.ssubmenu, ul.level1 li.submenu ul.level2 li.ssubmenu:hover {
  66. border:#aaa 1px solid;
  67. list-style:none;
  68. margin:0px;
  69. padding:0.3em 1em;
  70. position:relative;
  71. width:8em
  72. }
複製代碼
然後再INDEX.HTML裡面設定要出現的連結
  1. <ol>
  2. <!-- 設定主選單項目 -->
  3. <li class="mainmenu">檔案
  4.   <ul class="level1">
  5. <!-- 設定副選單項目 -->
  6.    <li class="submenu">新增
  7.     <ul class="level2">
  8.     <!-- 設定次選單項目 -->
  9.      <li class="ssubmenu">視窗</li>
  10.      <li class="ssubmenu">視窗</li>
  11.      <li class="ssubmenu">視窗</li>
  12.      <li class="ssubmenu">視窗</li>
  13.      <li class="ssubmenu">視窗</li>
  14.     </ul>
  15.    </li>
  16.   </ul>
  17. </li>
  18. <li class="mainmenu">檢視
  19.   <ul class="level1">
  20.    <li class="submenu">新增
  21.     <ul class="level2">
  22.      <li class="ssubmenu">視窗</li>
  23.      <li class="ssubmenu">視窗</li>
  24.      <li class="ssubmenu">視窗</li>
  25.      <li class="ssubmenu">視窗</li>
  26.     </ul>
  27.    </li>
  28.   </ul>
  29. </li>
  30. <li class="mainmenu">工具
  31.   <ul class="level1">
  32.    <li class="submenu">新增
  33.     <ul class="level2">
  34.      <li class="ssubmenu"><a href="http://www.tshopping.com.tw">視窗</a></li>
  35.      <li class="ssubmenu">視窗</li>
  36.      <li class="ssubmenu">視窗</li>
  37.      <li class="ssubmenu">視窗</li>
  38.     </ul>
  39.    </li>
  40.    <li class="submenu">開啟舊檔
  41.     <ul class="level2">
  42.      <li class="ssubmenu"><a href="http://www.tshopping.com.tw">視窗</a></li>
  43.      <li class="ssubmenu">視窗</li>
  44.      <li class="ssubmenu">視窗</li>
  45.      <li class="ssubmenu">視窗</li>
  46.     </ul>
  47.    </li>
  48.   </ul>
  49. </li>
  50. <li class="mainmenu">說明
  51.   <ul class="level1">
  52.    <li class="submenu">新增
  53.     <ul class="level2">
  54.      <li class="ssubmenu">視窗</li>
  55.      <li class="ssubmenu">視窗</li>
  56.      <li class="ssubmenu">視窗</li>
  57.      <li class="ssubmenu">視窗</li>
  58.     </ul>
  59.    </li>
  60.   </ul>
  61. </li>
  62. </ol>
複製代碼

 

臉書網友討論
 樓主| 發表於 2010-12-2 16:12:59 | 顯示全部樓層
上面CSS就是在說這個

請自己實驗一下

版主招募中

發表於 2011-8-2 00:59:41 | 顯示全部樓層
真好。。。。。。。。。  


發表於 2012-9-27 16:02:46 | 顯示全部樓層
好贴,值得收藏,大家都顶


發表於 2014-7-29 17:09:22 | 顯示全部樓層

  很可能是煮的


*滑块验证:
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2024-3-29 17:24 , Processed in 0.059331 second(s), 19 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表