首页 - 文章 - (X)HTML/CSS - (X)HTML/CSS小技巧

用 CSS 实现的三级导航菜单

作者: Stu Nicholls     来源: CSSplay.co.uk     时间: 2006-11-16 17:20:47
摘要: 用 css 实现一级导航菜单是很容易的，但是需要多级导航的时候，我们往往需要借助 javascript, 本文介绍的是 Stu Nicholls 用纯 CSS 实现的三级导航菜单。他的站点 cssplay.co.uk 上有许多很棒的的 CSS 实例，极力推荐！
归类: (X)HTML/CSS,

关键词: css, 导航菜单, menu, drop－down,


用 css 实现一级导航菜单是很容易的，但是需要多级导航的时候，我们往往需要借助 javascript, 本文介绍的是  Stu Nicholls 用纯 CSS 实现的三级导航菜单。他的站点 cssplay.co.uk 上有许多很棒的的 CSS 实例，极力推荐！



--------------------------------------------------------------
点此浏览示例文件
--------------------------------------------------------------



CSS:
  1.  
  2. .menu { 
  3.     width:750px;  
  4.     font-size:0.85em; 
  5.     position:relative; 
  6.     z-index:100; 
  7. } 
  8. /* remove all the bullets, borders and padding from the default list styling */ 
  9. .menu ul { 
  10.     padding:0; 
  11.     margin:0; 
  12.     list-style-type:none; 
  13. } 
  14. .menu ul ul { 
  15.     width:150px; 
  16. } 
  17. /* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */ 
  18. .menu li { 
  19.     float:left; 
  20.     width:150px; 
  21.     position:relative; 
  22. } 
  23. /* style the links for the top level */ 
  24. .menu a, .menu a:visited { 
  25.     display:block; 
  26.     font-size:11px; 
  27.     text-decoration:none;  
  28.     color:#fff;  
  29.     width:139px;  
  30.     height:30px;  
  31.     border:1px solid #fff;  
  32.     border-width:1px 1px 0 0;  
  33.     background:#758279;  
  34.     padding-left:10px;  
  35.     line-height:29px; 
  36. } 
  37. /* a hack so that IE5.5 faulty box model is corrected */ 
  38. * html .menu a, * html .menu a:visited { 
  39.     width:150px; 
  40.     w\idth:139px; 
  41. } 
  42.  
  43. /* style the second level background */ 
  44. .menu ul ul a.drop, .menu ul ul a.drop:visited { 
  45.     background:#d4d8bd url(../img/drop.gif) bottom right no-repeat; 
  46. } 
  47. /* style the second level hover */ 
  48. .menu ul ul a.drop:hover{ 
  49.     background:#c9ba65 url(../img/drop.gif) bottom right no-repeat; 
  50. } 
  51. .menu ul ul :hover > a.drop { 
  52.     background:#c9ba65 url(../img/drop.gif) bottom right no-repeat; 
  53. } 
  54. /* style the third level background */ 
  55. .menu ul ul ul a, .menu ul ul ul a:visited { 
  56.     background:#e2dfa8; 
  57. } 
  58. /* style the third level hover */ 
  59. .menu ul ul ul a:hover { 
  60.     background:#b2ab9b; 
  61. } 
  62.  
  63.  
  64. /* hide the sub levels and give them a positon absolute so that they take up no room */ 
  65. .menu ul ul { 
  66.     visibility:hidden; 
  67.     position:absolute; 
  68.     height:0; 
  69.     top:31px; 
  70.     left:0;  
  71.     width:150px; 
  72. } 
  73. /* another hack for IE5.5 */ 
  74. * html .menu ul ul { 
  75.     top:30px; 
  76.     t\op:31px; 
  77. } 
  78.  
  79. /* position the third level flyout menu */ 
  80. .menu ul ul ul{ 
  81.     left:150px;  
  82.     top:0; 
  83.     width:150px; 
  84. } 
  85. /* position the third level flyout menu for a left flyout */ 
  86. .menu ul ul ul.left { 
  87.     left:-150px; 
  88. } 
  89.  
  90. /* style the table so that it takes no ppart in the layout - required for IE to work */ 
  91. .menu table {position:absolute; top:0; left:0;} 
  92.  
  93. /* style the second level links */ 
  94. .menu ul ul a, .menu ul ul a:visited { 
  95.     background:#d4d8bd;  
  96.     color:#000;  
  97.     height:auto;  
  98.     line-height:1em;  
  99.     padding:5px 10px;  
  100.     width:129px 
  101.     /* yet another hack for IE5.5 */ 
  102. } 
  103. * html .menu ul ul a{ 
  104.     width:150px; 
  105.     w\idth:129px; 
  106. } 
  107.  
  108.  
  109. /* style the top level hover */ 
  110. .menu a:hover, .menu ul ul a:hover{ 
  111.     color:#fff;  
  112.     background:#949e7c; 
  113. } 
  114. .menu :hover > a, .menu ul ul :hover > a { 
  115.     color:#fff; 
  116.     background:#949e7c; 
  117. } 
  118.  
  119. /* make the second level visible when hover on first level list OR link */ 
  120. .menu ul li:hover ul, 
  121. .menu ul a:hover ul{ 
  122.     visibility:visible;  
  123. } 
  124. /* keep the third level hidden when you hover on first level list OR link */ 
  125. .menu ul :hover ul ul{ 
  126.     visibility:hidden; 
  127. } 
  128.  
  129. /* make the third level visible when you hover over second level list OR link */ 
  130. .menu ul :hover ul :hover ul{  
  131.     visibility:visible; 
  132. } 
  133.  



HTML:
  1.  
  2. <div class="menu"> 
  3.  
  4. <ul> 
  5. <li><a href="./menu/index.html">DEMOS<!--[if IE 7]><!--></a><!--<![endif]--> 
  6. <!--[if lte IE 6]><table><tr><td><![endif]--> 
  7.     <ul> 
  8.     <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars advertising page</a></li> 
  9.     <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text around images</a></li> 
  10.     <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> 
  11.     <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> 
  12.     <li><a class="drop" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click with no borders<!--[if IE 7]><!--></a><!--<![endif]--> 
  13. <!--[if lte IE 6]><table><tr><td><![endif]--> 
  14.         <ul> 
  15.             <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> 
  16.             <li><a href="../menu/nodots.html" title="Removing active/focus borders">removing active/focus borders</a></li> 
  17.             <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li> 
  18.         </ul> 
  19. <!--[if lte IE 6]></td></tr></table></a><![endif]--> 
  20.     </li> 
  21.     <li><a class="drop" href="./menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing<!--[if IE 7]><!--></a><!--<![endif]--> 
  22. <!--[if lte IE 6]><table><tr><td><![endif]--> 
  23.         <ul> 
  24.             <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> 
  25.             <li><a href="../menu/nodots.html" title="Removing active/focus borders">removing active/focus borders</a></li> 
  26.             <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li> 
  27.         </ul> 
  28. <!--[if lte IE 6]></td></tr></table></a><![endif]--> 
  29.     </li> 
  30.     <li><a class="drop" href="../menu/old_master.html" title="Image Map for detailed information">image map for detailed information<!--[if IE 7]><!--></a><!--<![endif]--> 
  31. <!--[if lte IE 6]><table><tr><td><![endif]--> 
  32.         <ul> 
  33.             <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> 
  34.             <li><a href="../menu/nodots.html" title="Removing active/focus borders">removing active/focus borders</a></li> 
  35.             <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li> 
  36.         </ul> 
  37. <!--[if lte IE 6]></td></tr></table></a><![endif]--> 
  38.     </li> 
  39.     <li><a href="../menu/bodies.html" title="fun with background images">fun with background images</a></li> 
  40.     <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li> 
  41.     <li><a href="../menu/em_images.html" title="em size images compared">em image sizes compared</a></li> 
  42.     </ul> 
  43. <!--[if lte IE 6]></td></tr></table></a><![endif]--> 
  44. </li> 
  45. <li><a href="./boxes/index.html">BOXES<!--[if IE 7]><!--></a><!--<![endif]--> 
  46. <!--[if lte IE 6]><table><tr><td><![endif]--> 
  47.     <ul> 
  48.     <li><a href="spies.html" title="a coded list of spies">a coded list of spies</a></li> 
  49.     <li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li> 
  50.     <li><a href="expand.html" title="an enlarging unordered list">enlarging unordered list</a></li> 
  51.     <li><a href="enlarge.html" title="an unordered list with link images">link images</a></li> 
  52.     <li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li> 
  53.     <li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li> 
  54.     <li><a href="circles.html" title="circular links">circular links</a></li> 
  55.     </ul> 
  56. <!--[if lte IE 6]></td></tr></table></a><![endif]--> 
  57. </li> 
  58. <li><a href="./mozilla/index.html">MOZILLA<!--[if IE 7]><!--></a><!--<![endif]--> 
  59. <!--[if lte IE 6]><table><tr><td><![endif]--> 
  60.     <ul> 
  61.     <li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li> 
  62.     <li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li> 
  63.     <li><a href="../mozilla/content.html" title="Using content:">content:</a></li> 
  64.     <li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li> 
  65.     <li><a href="../mozilla/rainbow.html" title="I can build a rainbow">I can build a rainbow with transparent borders</a></li> 
  66.     <li><a href="../mozilla/snooker.html" title="Snooker cue">a snooker cue using border art</a></li> 
  67.     <li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li> 
  68.     <li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li> 
  69.     <li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li> 
  70.     </ul> 
  71. <!--[if lte IE 6]></td></tr></table></a><![endif]--> 
  72. </li> 
  73. <li><a href="./ie/index.html">EXPLORER<!--[if IE 7]><!--></a><!--<![endif]--> 
  74. <!--[if lte IE 6]><table><tr><td><![endif]--> 
  75.     <ul> 
  76.     <li><a href="../ie/exampleone.html" title="Example one">the first example for Internet Explorer</a></li> 
  77.     <li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li> 
  78.     <li><a href="../ie/exampletwo.html" title="Vertical align">vertically aligning text</a></li> 
  79.     </ul> 
  80. <!--[if lte IE 6]></td></tr></table></a><![endif]--> 
  81. </li> 
  82. <li><a href="./opacity/index.html">OPACITY<!--[if IE 7]><!--></a><!--<![endif]--> 
  83. <!--[if lte IE 6]><table><tr><td><![endif]--> 
  84.     <ul> 
  85.     <li><a href="../opacity/colours.html" title="colour wheel">a colour wheel using opaque colours</a></li> 
  86.     <li><a href="../opacity/picturemenu.html" title="a menu using opacity">a menu using opacity</a></li> 
  87.     <li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li> 
  88.     <li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li> 
  89.     <li><a class="drop" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK<!--[if IE 7]><!--></a><!--<![endif]--> 
  90. <!--[if lte IE 6]><table><tr><td><![endif]--> 
  91.         <ul class="left"> 
  92.             <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> 
  93.             <li><a href="../menu/nodots.html" title="Removing active/focus borders">removing active/focus borders</a></li> 
  94.             <li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li> 
  95.         </ul> 
  96. <!--[if lte IE 6]></td></tr></table></a><![endif]--> 
  97.     </li> 
  98.     </ul> 
  99. <!--[if lte IE 6]></td></tr></table></a><![endif]--> 
  100. </li> 
  101. </ul> 
  102.  
  103. </div> 
  104.  



相关文章
发表评论 有想法？点此发表评论？
推荐链接：(联系 QQ ：326801485)