当前位置:Gxlcms > css > CSS多级菜单的实例代码讲解

CSS多级菜单的实例代码讲解

时间:2021-07-01 10:21:17 帮助过:43人阅读

本篇文章给大家带来的内容是关于CSS多级菜单的实例代码讲解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

这是一个相当炫的功能,让网页看起来像桌面程序,如window的开始菜单。实现原理基本和纯CSS相册差不多,但要注意的事项比较多,让我们一步步来吧。

先来一个非常简单的一级菜单与悬停效果。

  1. <ul id="menu">
  2. <li>
  3. <a href="http://www.php.cn/">
  4. 菜单一<!--小图--><span><!--大图--></span>
  5. </a>
  6. </li>
  7. <li>
  8. <a href="http://www.php.cn/">
  9. 菜单二<!--小图--><span><!--大图--></span>
  10. </a>
  11. </li>
  12. <li>
  13. <a href="http://www.php.cn/">
  14. 菜单三<!--小图--><span><!--大图--></span>
  15. </a>
  16. </li>
  17. <li class="last">
  18. <a href="http://www.php.cn/">
  19. 菜单四<!--小图--><span><!--大图--></span>
  20. </a>
  21. </li>
  22. </ul>

结构很熟悉吧,就是把原来放图片的地方换成文字而已。我还特意标出来了。接着下来的表现层代码非常简单。

  1. * {
  2. margin:0;
  3. padding:0;
  4. }
  5. .menu {
  6. font-size:12px;
  7. }
  8. .menu li {/*水平菜单*/
  9. float:left;
  10. list-style:none;
  11. }
  12. .menu a {
  13. display:block;
  14. position:relative;
  15. height:32px;
  16. width:100px;
  17. line-height:32px;
  18. background:#a9ea00;
  19. color:#ff8040;
  20. text-decoration:none;
  21. text-align:center;
  22. }
  23. .menu a:hover {
  24. background:#369;
  25. color:#fff;
  26. }
  27. .menu li span {
  28. display:none;
  29. position:absolute;
  30. left:0;
  31. top:32px;
  32. width:200px;
  33. height:150px;
  34. background:#B9D6FF;
  35. }
  36. .menu a:hover span {
  37. display:block;
  38. }

这里有两个值得注意的地方。我们先说第一个。子菜单(span元素)的top应该能使其顶部停留在a元素的范围内,如果包含块是li元素,同理。当span的top值大于32px,如40px,我们就无法把鼠标移到span元素上。因为离开了a:hover的作用范围,span元素又重新隐藏。

  1. .menu li span {
  2. display:none;
  3. position:absolute;
  4. left:0;
  5. top:40px;/*★★修改这里★★*/
  6. width:200px;
  7. height:150px;
  8. background:#B9D6FF;
  9. }

第二个问题是IE6特有的,就是子菜单在对应的包含块mouseout后仍不消失的问题。hover伪类相当于moverover与moverout。我们在可以在mouseover给它的子孙元素认定一种样式,mouseout时认定另一种。换言之,display现在在IE6无法切换(img元素除外)。解决方法用visibility 代替display。

好了,现在我们真正做二级菜单,把有关span的CSS全删掉,并在结构层原span的位置改为如下代码:

  1. <ul>
  2. <li><a href="http://www.php.cn/">二级菜单_11</a></li>
  3. <li><a href="http://www.php.cn/">二级菜单_12</a></li>
  4. </ul>

我们在各游览器看一下,感觉非常乏力。IE6与Opera10的二级菜单项是垂直的,但我们并没有清除浮动啊?firefox3.5与chrome与safari4的二级菜单项是水平分布了,但上面好像多出一个菜单项……IE8同学这次反而是表现得最好的。我没有装IE7,所以一向忽略它。

我们重新设置一下样式,如把包含块改设在li元素上,让二级菜单项呈垂直显示。

  1. * {
  2. margin:0;
  3. padding:0;
  4. }
  5. .menu {
  6. font-size:12px;
  7. }
  8. .menu li {/*水平菜单*/
  9. float:left;
  10. list-style:none;
  11. position:relative;/*把包含块移动li元素*/
  12. }
  13. .menu a {
  14. display:block;
  15. /*position:relative;发现放在a元素中,
  16. 在标准游览器中惨不忍睹,
  17. 和纯CSS相册3的第一个运行框在chrome中遇到的bug一样*/
  18. height:32px;
  19. width:100px;
  20. line-height:32px;
  21. background:#a9ea00;
  22. color:#ff8040;
  23. text-decoration:none;
  24. text-align:center;
  25. }
  26. .menu a:hover {
  27. background:#369;
  28. color:#fff;
  29. }
  30. /*新增的二级菜单部分*/
  31. .menu ul ul {
  32. visibility:hidden;/*开始时是隐藏的*/
  33. position:absolute;
  34. left:0px;
  35. top:32px;
  36. }
  37. .menu ul a:hover ul{
  38. visibility:visible;
  39. }
  40. .menu ul ul li {
  41. clear:both;/*垂直显示*/
  42. text-align:left;
  43. }

发现二级菜单在firefox与safari与chrome中没有反应,弹不出来(这三个浏览器的CSS部分互相抄袭严重啊)。opera10表现得最好,IE8其次。不过,标准浏览器的所有元素都支持hover伪类,不像IE6,非带href的a元素不可。我们改写部分CSS代码:

  1. .menu ul li:hover ul,/*非IE6*/
  2. .menu ul a:hover ul{/*IE6*/
  3. visibility:visible;
  4. }

二级菜单能弹出来了,但那个神秘的li元素也现形了。我用双重浮动的收缩包围(shrink-wrapping)现象都无法消除这个神秘的li元素。参考外国的代码,方法是,把整个子菜单放到a元素的外面,然后用li:hover控制样式的切换。于是结构层改写如下:

  1. <div class="menu">
  2. <ul>
  3. <li>
  4. <a href="http://www.php.cn/">菜单一 </a>
  5. <ul>
  6. <li><a href="http://www.php.cn/">二级菜单_11</a></li>
  7. <li><a href="http://www.php.cn/">二级菜单_12</a></li>
  8. </ul>
  9. </li>
  10. <li>
  11. <a href="http://www.php.cn/">菜单二</a>
  12. <ul>
  13. <li><a href="http://www.php.cn/">二级菜单_21</a></li>
  14. <li><a href="http://www.php.cn/">二级菜单_22</a></li>
  15. </ul>
  16. </li>
  17. <li>
  18. //***************略************
  19. </li>
  20. <li>
  21. //***************略************
  22. </li>
  23. </ul>
  24. </div>

以上就是CSS多级菜单的实例代码讲解的详细内容,更多请关注Gxlcms其它相关文章!

人气教程排行