无限级导航 纯CSS

  • 时间:
  • 浏览:1407
  • 来源:无双科技

网站的导航是最常见的吧,通常情况下都会分个二三级。甚至可能会更多。

所以有个无限级导航是最好不过了,不过无限级导航好像挺不好搞的,又好像挺容易的。

因为为了天朝的IE6/7/8,那个折磨啊。还要用上JS来计算一堆东西。但是现在天朝的IE6/7/8不搞了,太好了。

所以现在说说无限级导航的纯CSS写法。其实不难的。

无限级导航要注意以下几个方面:

1、结构必须保持一致。一致,一致,一致

2、层级之间不能有空隙。不能有空隙,不能有空隙,不能有空隙

3、重要的事说三遍。

附图效果:

09fc960895dc4536a1f9fb9bb1bab4a1.jpg

参考结构如下:

<a href="">颜值</a>

<ul>

<li><a href="">妹子</a></li>

<li><a href="">高富帅</a></li>

<li><a href="">吊丝</a></li>

<li><a href="">我勒个去</a></li>

</ul>

好咧,开始吧

先写基本的一级栏目,一步一步来:

HTML如下

<nav>

<ul class="clearfix">

<li><a href="#">颜值</a></li>

<li><a href="#">逗比</a></li>

<li><a href="#">约吗</a></li>

<li><a href="#">我想静静</a></li>

<li><a href="#">小鲜肉</a></li>

<li><a href="#">单身狗</a></li>

</ul>

</nav>

CSS如下:

nav { background: #ececec; }

nav > ul {position: relative;z-index: 100;width: 100%;}

nav > ul > li {float: left;position: relative;}

nav > ul > li > a {display: block;line-height: 114px;padding: 0px 18px;outline: none;text-decoration: none;font-size: 15px;color: #555555;}

nav > ul > li > a:hover {color: #28b7f9;}

这几个样式能看懂吧,很基础的东西。要注意一点。样式里面并没有设置高度哦!!而是在a里面设置了行高,撑出来的高度。

并注意样式中使用 “>” ,是指只取当前下一级,只取下一级,只取下一级,重要的事说三遍。还有就是IE6中不支持!!!

出来的效果如下:

QQ截图20200301201454.png

一级栏目搞定了,接下来就是二级栏目了。

把那个参考结构拿下来用就是了,注意“颜值”栏目,添加了东西。

<nav>

<ul class="clearfix">

<li>

<a href="">颜值</a>

<ul>

<li><a href="#">妹子</a></li>

<li><a href="#">高富帅</a></li>

<li><a href="#">吊丝</a></li>

<li><a href="#">逗逼</a></li>

</ul>

</li>

<li><a href="#">逗比</a></li>

<li><a href="#">约吗</a></li>

<li><a href="#">我想静静</a></li>

<li><a href="#">小鲜肉</a></li>

<li><a href="#">单身狗</a></li>

</ul>

</nav>

CS如下:

nav > ul > li > ul {position: absolute;top: 110px;left: 0;background-color: #042433;width: 260px;border-top: 3px solid #28b7f9;border-top-style: solid;z-index: 100;}

效果如下:

QQ截图20200301201535.png

再把里面的文字处理一下就好啦;CSS如下:

nav > ul > li > ul li {line-height: 40px;border-top: 1px solid #0b2b3a;}

nav > ul > li > ul a {color: #fff;padding: 0px 20px;display: block;text-decoration: none;font-size: 13px;}

nav > ul > li > ul a:hover {background: #28b6f6;}

注意:也没有高度哦,也是在A里面设置了内边距撑开的高度;

效果是这样的:

QQ截图20200301201616.png

然后用 display: none; 隐藏起来就好啦!再用 :hover 的时候,再显示出来就搞定了,CSS如下:

nav > ul > li > ul { display: none; }

nav > ul li:hover > ul { display: block; }

好了,第二级搞定了,接下来就是最终要做的无限级啦!!啦啦啦

<nav>

<ul class="clearfix">

<li>

<a href="">颜值</a>

<ul>

<li>

<a href="#">妹子</a>

<ul>

<li><a href="#">女汉子</a></li>

<li><a href="#">大妈</a></li>

<li><a href="#">绿茶婊</a></li>

</ul>

</li>

<li><a href="#">高富帅</a></li>

<li><a href="#">吊丝</a></li>

<li><a href="#">逗逼</a></li>

</ul>

</li>

<li><a href="#">逗比</a></li>

<li><a href="#">约吗</a></li>

<li><a href="#">我想静静</a></li>

<li><a href="#">小鲜肉</a></li>

<li><a href="#">单身狗</a></li>

</ul>

</nav>

结构是这样的,注意 “妹子” 那个栏目,里面又放了一个 ul 里面。是不是和最开始说的那个参考结构标准是一样的。

接下来就是CSS啦

nav > ul > li ul ul {width: 260px;left: 100%;top: 0;border: 0px solid #f00;position: absolute;background-color: #042433;border-top-width: 3px;border-top-style: solid;border-color: #28b7f9;list-style: none;margin: 0px;padding: 0px;}

看到这CSS一层一层的下来,是不是有点懵了。

解析一下:

nav > ul 这个是最外层那个灰色底的ul

nav > ul > li ul 这个ul,是二级栏目的 ul

nav > ul > li ul ul 这个ul,就是无限级的ul了。

最终效果就是这样的啦

1.png

如果想做的更人性一些,就需要在有下级菜单的位置加多一个箭头,就样就好识别啦!!

最终无限级循环,搞定

2.png

然后附上最终的源码:有点长哦;HTML如下:

<nav>

<ul class="clearfix">

<li><a href="">颜值</a><ul>

<li class="children"><a href="#">妹子</a>

<ul>

<li><a href="#">女汉子</a></li>

<li><a href="#">大妈</a></li>

<li class="children"><a href="#">绿茶婊</a>

<ul>

<li><a href="#">女汉子</a></li>

<li class="children"><a href="#">大妈</a>

<ul>

<li><a href="#">女汉子</a></li>

<li><a href="#">大妈</a></li>

<li><a href="#">绿茶婊</a></li>

</ul>

</li>

<li><a href="#">绿茶婊</a></li>

</ul>

</li>

</ul>

</li>

<li class="children"><a href="#">高富帅</a>

<ul>

<li><a href="#">女汉子</a></li>

<li><a href="#">大妈</a></li>

<li><a href="#">绿茶婊</a></li>

</ul>

</li>

<li><a href="#">吊丝</a></li>

<li><a href="#">逗逼</a></li>

</ul>

</li>

<li><a href="#">逗比</a></li>

<li><a href="#">约吗</a></li>

<li><a href="#">我想静静</a></li>

<li><a href="#">小鲜肉</a></li>

<li><a href="#">单身狗</a></li>

</ul>

</nav>

CSS如下:

body {font-family: "Raleway", Arial, Helvetica, sans-serif;font-size: 13px;line-height: 22px;margin: 0;padding: 0;color: #666666;background: #fff;text-shadow: none !important;}

* { padding: 0; margin: 0; }

li { list-style: none; }

a,a:focus,a:active {outline: none;}

h1,h2,h3,h4,h5,h6 {text-transform: uppercase;font-weight: bold;color: #333333;font-family: "Raleway", Arial, Helvetica, sans-serif;margin-top: 0px;}

.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}

.clearfix { display: inline-block; }

* html .clearfix { height: 1%; }

.clearfix { display: block; }

nav { background: #ececec; }

nav > ul {position: relative;z-index: 100;width: 100%;}

nav > ul > li {float: left;position: relative;}

nav > ul > li > a {display: block;line-height: 114px;padding: 0px 18px;outline: none;text-decoration: none;font-size: 15px;color: #555555;}

nav > ul > li > a:hover {color: #28b7f9;}

nav > ul > li > ul {position: absolute;top: 110px;left: 0;background-color: #042433;width: 260px;border-top: 3px solid #28b7f9;z-index: 100;}

nav > ul > li > ul li {position: relative;line-height: 40px;border-top: 1px solid #0b2b3a;}

nav > ul > li > ul a {color: #fff;padding: 0px 20px;display: block;text-decoration: none;font-size: 13px;}

nav > ul > li > ul a:hover {background: #28b6f6;}

nav > ul > li > ul { display: none; }

nav > ul li:hover > ul { display: block; }

nav > ul > li ul ul {width: 260px;left: 100%;top: 0;order: 0px solid #f00;position: absolute;background-color: #042433;border-top-width: 3px;border-top-style: solid;border-color: #28b7f9;list-style: none;margin: 0px;padding: 0px;display: none;}

.children:before {position: absolute;right: 10px;top: 50%;content: '';width: 8px;height: 8px;margin-top: -4px;border-top: 1px solid #fff;border-right: 1px solid #fff;-webkit-transform: rotate(45deg);}

猜你喜欢

Navicat 15 激活码终结无法使用解决方案及激活教程

Navicat 15 激活码终结无法使用解决方案及激活教程

最新版的NavicatPremium15已经发布了是一款数据库管理工具,是一个可多重连线资料库的管理工具,它可以让你以单一程式同时连线到MySQL、SQLite、Oracle及

2023-10-20

宝塔Apache环境设置url路径不区分字母大小写

宝塔Apache环境设置url路径不区分字母大小写

Linux服务器的大小写敏感有时候很不方便,在地址栏里一定要输入准确的URL才能访问,对搜索引擎和用户不是很友好,那么如何解决LINUX服务器URL的大小写问题今天同步碰到一个

2022-10-12

Nginx配置规则错误:unknown log format "main"

Nginx配置规则错误:unknown log format "main"

网站配置由apche换成nginx系统后,重启时出现错误提示Nginx配置规则错误:nginx:[emerg]unknownlogformat"main"in/www/serv

2022-10-12

thinkphp上线后 /captcha 验证码无法加载显示

thinkphp上线后 /captcha 验证码无法加载显示

ThinkPHP的验证码在本地就OK的显示正常,一上线就不显示也没有报500错,GD库安装正常线上错误显示结果为:找到你的验证码的控制器具体文件路径(下面是我的)vendor/

2021-09-28

怎样把抖音视频链接发到网站上去

怎样把抖音视频链接发到网站上去

抖音现在很火,很多朋友都知道手机能够看抖音视频和上传视频,但是如何把抖音视频加入到网站上来,接下来一起来看看吧:我们在抖音APP里,打开某一条视频,点击右侧下方的分享小图标,然

2021-09-19