纯CSS完成适配IE7及以上宽度自融入无尽级导航栏

日期:2021-03-09 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

先来个Demo:
https://www.jb51.net/jiaoben/111258.html
好吧,我认可,我有点题目党了,IE7的适配其实不是非常好,当电脑鼠标离去某个导航栏再进到时,会留下上1次子菜单的残影(写的仿佛玄幻小说似的=。=)

但是纯属科学研究,O(∩_∩)O哈哈~

宽度自融入是指各级菜单都可以以随內容的长度自主融入宽度,而当访问器辨别率较低时1级导航栏还可以全自动换行,而多级别子菜单靠左显示信息還是成功动调剂。

DOM构造较为简易,只是 ol.nav 与 li.item 的相互之间嵌套循环罢了。

看编码吧(长是长了点,但实际上你会发现导航栏的标识构造真的真的很简易,关键的是CSS一部分):

拷贝编码
编码以下:

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF⑻">
<title>无尽级纯CSS导航栏菜单</title>
<style type="text/css">
.nav{
margin: 0;
padding: 0;
float: left;
list-style: none;
background: #222;
}
.nav a{
color: #ddd;
display: block;
padding: 0 15px;
text-decoration: none;
}
.nav a:hover{
color: #2FAADD;
}
.nav .item{
margin: 0;
padding: 0;
float: left;
height: 35px;
line-height: 35px;
white-space: nowrap;
}
.nav .item:hover>a{
color: #2FAADD;
}
.nav .item:hover>.nav{
display: block;
}
.nav .nav{
top: 100%;
left: 0;
display: none;
background: #444;
position: absolute;
border: 1px solid #888;
}
.nav .nav .item{
clear: both;
min-width: 100%;
}
.nav .nav .nav{
top: ⑴px;
left: 100%;
}
.nav .nav .nav .nav .nav .nav{
left: auto;
right: 100%;
}
</style>
</head>
<body>
<ul class="nav">
<li class="item"><a href="#">1级导航栏 1</a>
<ul class="nav">
<li class="item"><a href="#">2级导航栏 1</a>
<ul class="nav">
<li class="item"><a href="#">3级导航栏 1</a></li>
<li class="item"><a href="#">3级导航栏 2</a></li>
<li class="item"><a href="#">3级导航栏 3</a></li>
<li class="item"><a href="#">3级导航栏 4</a></li>
<li class="item"><a href="#">3级导航栏 5</a></li>
</ul>
</li>
<li class="item"><a href="#">2级导航栏 2</a>
<ul class="nav">
<li class="item"><a href="#">3级导航栏 1</a></li>
<li class="item"><a href="#">3级导航栏 2</a></li>
<li class="item"><a href="#">3级导航栏 3</a></li>
<li class="item"><a href="#">3级导航栏 4</a></li>
<li class="item"><a href="#">3级导航栏 5</a></li>
</ul>
</li>
<li class="item"><a href="#">无子导航栏 3</a></li>
<li class="item"><a href="#">2级导航栏 4</a>
<ul class="nav">
<li class="item"><a href="#">3级导航栏 1</a></li>
<li class="item"><a href="#">3级导航栏 2</a></li>
<li class="item"><a href="#">3级导航栏 3</a></li>
<li class="item"><a href="#">3级导航栏 4</a></li>
<li class="item"><a href="#">3级导航栏 5</a></li>
</ul>
</li>
<li class="item"><a href="#">无子导航栏 5</a></li>
</ul>
</li>
<li class="item"><a href="#">长长的1级导航栏 2</a>
<ul class="nav">
<li class="item"><a href="#">2级导航栏 1</a>
<ul class="nav">
<li class="item"><a href="#">3级导航栏 1</a></li>
<li class="item"><a href="#">3级导航栏 2</a></li>
<li class="item"><a href="#">3级导航栏 3</a></li>
<li class="item"><a href="#">3级导航栏 4</a></li>
<li class="item"><a href="#">3级导航栏 5</a></li>
</ul>
</li>
<li class="item"><a href="#">2级导航栏 2</a>
<ul class="nav">
<li class="item"><a href="#">3级导航栏 1</a></li>
<li class="item"><a href="#">3级导航栏 2</a></li>
<li class="item"><a href="#">3级导航栏 3</a></li>
<li class="item"><a href="#">3级导航栏 4</a></li>
<li class="item"><a href="#">3级导航栏 5</a></li>
</ul>
</li>
<li class="item"><a href="#">更长的2级导航栏 3</a>
<ul class="nav">
<li class="item"><a href="#">3级导航栏 1</a></li>
<li class="item"><a href="#">3级导航栏 2</a></li>
<li class="item"><a href="#">3级导航栏 3</a></li>
<li class="item"><a href="#">3级导航栏 4</a></li>
<li class="item"><a href="#">低调的3级导航栏 5</a>
<ul class="nav">
<li class="item"><a href="#">4级导航栏 1</a></li>
<li class="item"><a href="#">藏的很深的4级导航栏 2</a>
<ul class="nav">
<li class="item"><a href="#">藏的更深的5级导航栏 0</a></li>
<li class="item"><a href="#">5级导航栏 1</a></li>
<li class="item"><a href="#">5级导航栏 2</a></li>
<li class="item"><a href="#">5级导航栏 3</a></li>
<li class="item"><a href="#">5级导航栏 4</a></li>
<li class="item"><a href="#">下面该往左了吧</a>
<ul class="nav">
<li class="item"><a href="#">我在左侧</a></li>
<li class="item"><a href="#">我真的在左侧</a></li>
<li class="item"><a href="#">我就要赖在左侧</a></li>
<li class="item"><a href="#">杨丞琳的左侧好听</a></li>
<li class="item"><a href="#">呜呜,2020年双101又要过节</a></li>
<li class="item"><a href="#">妹纸妹纸在哪儿里?</a></li>
</ul>
</li>
</ul>
</li>
<li class="item"><a href="#">4级导航栏 3</a></li>
<li class="item"><a href="#">4级导航栏 4</a></li>
<li class="item"><a href="#">4级导航栏 5</a></li>
</ul>
</li>
</ul>
</li>
<li class="item"><a href="#">2级导航栏 4</a>
<ul class="nav">
<li class="item"><a href="#">3级导航栏 1</a></li>
<li class="item"><a href="#">3级导航栏 2</a></li>
<li class="item"><a href="#">3级导航栏 3</a></li>
<li class="item"><a href="#">3级导航栏 4</a></li>
<li class="item"><a href="#">3级导航栏 5</a></li>
</ul>
</li>
<li class="item"><a href="#">2级导航栏 5</a>
<ul class="nav">
<li class="item"><a href="#">3级导航栏 1</a></li>
<li class="item"><a href="#">3级导航栏 2</a></li>
<li class="item"><a href="#">3级导航栏 3</a></li>
<li class="item"><a href="#">3级导航栏 4</a></li>
<li class="item"><a href="#">3级导航栏 5</a></li>
</ul>
</li>
</ul>
</li>
<li class="item"><a href="#">无子导航栏 3</a></li>
<li class="item"><a href="#">1级导航栏 4</a>
<ul class="nav">
<li class="item"><a href="#">2级导航栏 1</a>
<ul class="nav">
<li class="item"><a href="#">3级导航栏 1</a></li>
<li class="item"><a href="#">3级导航栏 2</a></li>
<li class="item"><a href="#">3级导航栏 3</a></li>
<li class="item"><a href="#">3级导航栏 4</a></li>
<li class="item"><a href="#">3级导航栏 5</a></li>
</ul>
</li>
<li class="item"><a href="#">2级导航栏 2</a>
<ul class="nav">
<li class="item"><a href="#">3级导航栏 1</a></li>
<li class="item"><a href="#">3级导航栏 2</a></li>
<li class="item"><a href="#">3级导航栏 3</a></li>
<li class="item"><a href="#">3级导航栏 4</a></li>
<li class="item"><a href="#">3级导航栏 5</a></li>
</ul>
</li>
<li class="item"><a href="#">2级导航栏 3</a>
<ul class="nav">
<li class="item"><a href="#">3级导航栏 1</a></li>
<li class="item"><a href="#">3级导航栏 2</a></li>
<li class="item"><a href="#">3级导航栏 3</a></li>
<li class="item"><a href="#">3级导航栏 4</a></li>
<li class="item"><a href="#">3级导航栏 5</a></li>
</ul>
</li>
<li class="item"><a href="#">2级导航栏 4</a>
<ul class="nav">
<li class="item"><a href="#">3级导航栏 1</a></li>
<li class="item"><a href="#">3级导航栏 2</a></li>
<li class="item"><a href="#">3级导航栏 3</a></li>
<li class="item"><a href="#">3级导航栏 4</a></li>
<li class="item"><a href="#">3级导航栏 5</a></li>
</ul>
</li>
<li class="item"><a href="#">2级导航栏 5</a>
<ul class="nav">
<li class="item"><a href="#">3级导航栏 1</a></li>
<li class="item"><a href="#">3级导航栏 2</a></li>
<li class="item"><a href="#">3级导航栏 3</a></li>
<li class="item"><a href="#">3级导航栏 4</a></li>
<li class="item"><a href="#">3级导航栏 5</a></li>
</ul>
</li>
</ul>
</li>
<li class="item"><a href="#">1级导航栏 5</a>
<ul class="nav">
<li class="item"><a href="#">无子导航栏 1</a></li>
<li class="item"><a href="#">无子导航栏 2</a></li>
<li class="item"><a href="#">无子导航栏 3</a></li>
<li class="item"><a href="#">无子导航栏 4</a></li>
<li class="item"><a href="#">无子导航栏 5</a></li>
</ul>
</li>
</ul>
</body>
</html>

但是假如要讨论好用性的话,還是必须用JavaScript来适配IE6下li不适用hover伪类的BUG,修改也很简易,也来个Demo:
https://www.jb51.net/jiaoben/111260.html
上一篇:CSS的em、px、pt长度企业变换示例 返回下一篇:没有了