CSS导航栏制作总结

时间：2023-07-26 18:12:02 | 来源：网站运营

时间：2023-07-26 18:12:02 来源：网站运营

CSS导航栏制作总结：首先导航栏可以叫做链接列表。这样我们就能够清楚的知道，该如何进行制作了。

我们使用列表元素 + 链接元素 = 列表链接（导航栏）

为此 我制作了一个demo，效果展示在这里

点击三种导航栏的制作

前言

在进行导航栏制作之前。我们需要知道，html中的列表中有一个默认的样式。如图所示




对于ol和ul两种标签，有个默认的属性，padding-left=40px而margin-top和margin-bottom为16px。




对于dl这种元素来说。dl标签 有margin-top和 margin-bottom均为16px。对于dd有margin-left为40px。

水平导航栏

由于使用列表元素，都会有一个默认的样式，所以我们在进行导航栏制作的时候，一定要将这些样式去除掉

ul { list-style-type: none; padding: 0; margin: 0;}li a { text-decoration: none;}


两种方式创建水平导航栏，一种是display:inline-block一种是 float

display:inline-block

同样的

/*修改默认样式*/ul { list-style-type: none; padding: 0; margin: 0; background-color: #333;}​/*修改链接样式*/li a { color: white; display: inline-block;/*注意如果要更改a链接的尺寸，必须给他block化*/ width: 50px; text-decoration: none;}/*将列表水平化*/li{ display: inline-block; text-align: center;}​/*更改悬浮状态*/li a:hover { background-color: #111;}/*给出一个active类 进行导航激活状态显示*/li a.active { background-color: #4CAF50;}我们可以看上面的demo第一个效果。

需要注意的是 ，我们在进行display:inline-block的时候发现，block 和 block之间会有一个空格显示，之前的文章探究过这个问题，这是由于<li>元素与<li>元素中间的回车符导致的。所以我们需要将html的代码写成这样。

<ul class = "menu1"> <li><a class = "active" href="#">首页</a></li><li><a href="#">发现</a></li><li><a href="#">关于</a></li></ul>这样就可以解决了！效果：点击三种导航栏的制作

float

将上面的导航栏，用float实现一下。由于我们这里面有浮动元素，所以需要清除浮动。需要在ul标签中增加overflow: hidden;

sli { float: left; text-align: center;}​li a { color: white; display:inline-block; width: 50px; text-decoration: none;}li a:hover{ background-color: #111;}li a.active{ background-color: #4CAF50;}效果见demo。

垂直导航栏

和前面有些不同的是，我们可以通过ul来直接设置他的宽度了，因为此时的宽度就是垂直导航的宽度！

/*垂直导航栏的实现*/ul { width: 100px;}li { background-color: #111; text-align: center; border-bottom: 1px solid #333;}li a { display: inline-block; width: 100px; color: white; text-decoration: none;}​li a:hover{ background-color: aquamarine;}li a.active { background-color: #4CAF50;}效果如上面的demo点击三种导航栏的制作

京东导航栏制作项目实例

点开京东的首页，即可发现京东首页。他有两个导航栏，一个是左侧垂直的导航栏，在进行悬浮的时候，出现右面的二级菜单目录。

CSS基本的思路如下




我们首先进行页面的基本结构书写。左边的垂直导航栏应该不是问题了。

一级菜单样式

<!--左侧一级导航栏布局--><div class="wrap"> <ul class="main"> <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> <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> <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></div>首先进行wrap 我们将其定宽为220px。同时后面的二级菜单需要用到绝对定位，所以需要将wrap进行relative化。

.wrap { width: 220px; font-size: 14px; position: relative;}之后就是将一些默认样式更改。

由于之后要和二级菜单进行配合，所以在进行li 悬浮的时候，需要用到js的配合，所以不适用hover，而是使用active类，来进行。




.wrap { width: 220px; font-size: 14px;}​.wrap .main { list-style-type: none; margin: 0; overflow: hidden;​}​.wrap li { padding: 2px 0 2px 20px;​}​.wrap li a { text-decoration: none; color: #636363;}.wrap li.active { background-color: #d9d9d9;}.wrap li a:hover { color: #c81623;}接下来进行二级菜单的书

2. 二级菜单样式

上面我们已经大体画出来了，可以使用dl来实现。

html可以这样写。由于这里是默认需要隐藏的，所以可以在里面添加一个none 类。

<div id="sub" class="none"> <div id="a" class="sub_content none"> <dl> <dt><a href="#">冰箱</a></dt> <dt> <a>xxx</a> <a>xxx</a> <a>XXX</a> <div id="sub" class="none"> <div id="a" class="sub_content none"> <dl> <dt><a href="#">冰箱</a></dt> <dt> <a>xxx</a> <a>xxx</a> <a>XXX</a> </dt> </dl> <dl> <dt></dt> <dd> <a></a> <a></a> </dd> </dl> </div> <div id="b" class="sub_content none"> </div> </div> </dt> </dl> <dl> <dt></dt> <dd> <a></a> <a></a> </dd> </dl> </div></div>​进行二级菜单的布局。

首先将sub绝对定位到相应的位置。并设置相应的宽度。和相应的背景，边框。以及字体等等 。

#sub { position: absolute; width: 620px; left: 220px; top:0; border: 1px solid #f7f7f7; background-color: white; box-shadow: 2px 0 5px rgba(0,0,0,.3); margin: 0; padding: 10px; }


之后进行链接默认样式的更改

#sub .sub_content a { font-size: 12px; text-decoration: none; color: #666;}由于我们之后进行的都是有浮动的，所以需要在其父元素下进行清除浮动。

.sub_content dl { overflow: hidden;}进行dt 和 dd的修改。首先需要将dt和dd在同一条线上进行排布，所以使其向左浮动。设置宽度，让箭头定位。同时我们需要将它的元素默认属性margin-left40px 改成 0

.sub_content dt { float: left; width: 70px position: relative；}.sub_content dd { margin: 0; padding-left: 80px;//让其自己对齐}之后，需要将 dd中的a元素进行浮动定位，从而能够使得不自动换行，完整的a标签不被拆分成两行。同时还需要加入一些样式。border-left

.sub_content dd a { float: left; padding: 0 10px; margin: 4px 0; border-left: 1px solid #e0e0e0;}到此为止。只需要加入箭头的定位即可。我们可以看出来，我们是可以通过i来设置宽高的。之后进行垂直居中，由前面可以推断出dt的高度为12px（字体高度）+ 2 X 4px(a元素的margin)=20px

所以我们将i元素的高度设置为14px,需要将top偏移3px即可！需要注意i元素内部也要居中，只要将line-height: 14px;即可

.sub_content dt i { position: absolute; height: 14px; font: 9px/14px Consolas;/*字体在a 元素垂直居中*/ top: 3px; right: 0;}至此，我们的就全部样式表就完成了，还需要将none的类隐藏掉display: none

目前没有做交互页面，接下来会更新，也在慢慢学习中。

代码如下

float和display: inline-block到底有什么区别？

float和inline-block的区别就在于：inline-block是基于line box模型的，可以通过vertical-align: top/bottom/center来更改对齐方式。

如果我们试图去设计这样一个导航栏。




如果我们使用的是float对齐（已修改默认样式，未在代码中体现)：

<style> .wrap { width: 100%; background-color: #66BB33; } .wrap ul { overflow: auto; } .wrap li { width: 20px; height: 50px; background-color: #B2DD99; float: left; line-height: 50px; text-align: center; } .wrap li.active { padding-top: 20px; background-color: white; } .wrap li:hover { background-color: white; padding-top: 20px; }​</style> <div class="wrap"> <ul> <li>1</li> <li class="active">2</li> <li>3</li> <li>4</li> </ul> </div> 效果是这样的(没有百分百还原，未添加边距，只提供效果)：







这种情况下，就需要用到inline-block来进行line-box模型布局。

如下只需要将上述的float：left改为display:inline-block;父元素不需要清除浮动。效果如图（如果需要清除空格的影响，ul需要设置font-size: 0 li部分重新设置字体大小即可：




（完）