您现在的位置是:网站首页> 编程资料编程资料

纯CSS实现兼容IE7及以上宽度自适应无限级导航菜单附演示CSS自适应导航菜单的实例代码

2021-09-07 741人已围观

简介 IE7的兼容并不是特别好,当鼠标离开某个导航再进入时,会留下上一次子菜单的残影,宽度自适应是指各级菜单都可以随内容的长度自行适应宽度,附演示,感兴趣的朋友可以参考下

先来个Demo:
https://www.jb51.net/jiaoben/111258.html
好吧,我承认,我有点标题党了,IE7的兼容并不是特别好,当鼠标离开某个导航再进入时,会留下上一次子菜单的残影(写的好像玄幻小说似的=。=)

不过纯属研究,O(∩_∩)O哈哈~

宽度自适应是指各级菜单都可以随内容的长度自行适应宽度,而当浏览器分辨率较低时一级导航也可以自动换行,而多级子菜单靠左显示还是得手动调整。

DOM结构比较简单,只是 ol.nav 与 li.item 的互相嵌套而已。

看代码吧(长是长了点,但其实你会发现导航的标签结构真的真的很简单,重要的是CSS部分):

复制代码
代码如下:





无限级纯CSS导航菜单







不过如果要探讨实用性的话,还是需要用JavaScript来兼容IE6下li不支持hover伪类的BUG,改动也很简单,也来个Demo:
https://www.jb51.net/jiaoben/111260.html

相关内容

-六神源码网