前端必知必会-CSS导航栏NavigationBar

---

CSS 导航栏

垂直和水平导航栏示例

对于任何网站来说，拥有易于使用的导航都很重要。

使用 CSS，您可以将枯燥的 HTML 菜单转换为美观的导航栏。

导航栏 = 链接列表Links

导航栏需要标准 HTML 作为基础。
导航栏基本上是链接列表，因此使用 <ul> 和 <li> 元素非常合理：

示例

<ul>
<li><a href="default.asp">主页</a></li>
<li><a href="news.asp">新闻</a></li>
<li><a href="contact.asp">联系</a></li>
<li><a href="about.asp">关于</a></li>
</ul>

现在让我们从列表中删除项目符号、边距和填充：

示例

ul {
list-style-type: none;
margin: 0;
padding: 0;
}

示例说明：

list-style-type: none; - 删除项目符号。导航栏不需要列表标记
设置边距：0；和填充：0；删除浏览器默认设置
上面示例中的代码是垂直和水平导航栏中使用的标准代码

CSS 垂直导航栏

要构建垂直导航栏，除了上一页的代码外，您还可以设置列表内的 <a> 元素的样式：

示例

li a {
display: block;
width: 60px;
}

示例说明：

display: block; - 将链接显示为块元素使整个链接区域可点击（而不仅仅是文本），并且允许我们指定宽度（以及填充、边距、高度等，如果您愿意）
width: 60px; - 默认情况下，块元素占据整个可用宽度。我们想指定 60 像素的宽度
您还可以设置 <ul> 的宽度，并删除 <a> 的宽度，因为它们在显示为块元素时将占据整个可用宽度。这将产生与我们之前的示例相同的结果：

示例

ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}

li a {
display: block;
}

垂直导航栏示例

创建一个具有灰色背景颜色的基本垂直导航栏，并在用户将鼠标移到链接上时更改链接的背景颜色：

示例

ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}

li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

/* 悬停时更改链接颜色 */
li a:hover {
background-color: #555;
color: white;
}

激活/当前导航链接
向当前链接添加“active”类，让用户知道他/她位于哪个页面：

示例

.active {
background-color: #04AA6D;
color: white;
}

居中链接并添加边框
向 <li> 或 <a> 添加 text-align:center 以使链接居中。

向 <ul> 添加 border 属性，在导航栏周围添加边框。如果您还想在导航栏内添加边框，请向所有 <li> 元素（最后一个元素除外）添加 border-bottom：

ul {
border: 1px solid #555;
}

li {
text-align: center;
border-bottom: 1px solid #555;
}

li:last-child {
border-bottom: none;
}

全高固定垂直导航栏
创建全高、“粘性”侧边导航：

示例

ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* 全高 */
position: fixed; /* 使其粘住，即使滚动时也是如此 */
overflow: auto; /* 如果侧边栏内容过多，则启用滚动 */
}

CSS 水平导航栏

有两种方法可以创建水平导航栏。使用内联或浮动列表项。

内联列表项
除了上一页的“标准”代码外，构建水平导航栏的一种方法是将 <li> 元素指定为内联：

示例

li {
display: inline;
}

示例说明：
display: inline; - 默认情况下，<li> 元素是块元素。在这里，我们删除每个列表项前后的换行符，以将它们显示在一行上

浮动列表项
创建水平导航栏的另一种方法是浮动 <li> 元素，并为导航链接指定布局：

示例

li {
float: left;
}

a {
display: block;
padding: 8px;
background-color: #dddddd;
}

示例说明：

float: left; - 使用 float 使块元素彼此相邻浮动
display: block; - 允许我们指定填充（以及高度、宽度、边距等，如果您愿意）
padding: 8px; - 在每个 <a> 元素之间指定一些填充，以使它们看起来不错
background-color: #dddddd; - 为每个 <a> 元素添加灰色背景颜色
提示：如果您想要全宽背景颜色，请将背景颜色添加到 <ul> 而不是每个 <a> 元素：

示例

ul {
background-color: #dddddd;
}

水平导航栏示例
创建一个具有深色背景颜色的基本水平导航栏，并在用户将鼠标移到链接上时更改链接的背景颜色：

示例

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* 悬停时将链接颜色更改为 #111（黑色）*/
li a:hover {
background-color: #111;
}

激活·/当前导航链接
向当前链接添加“active”类，让用户知道他/她在哪个页面上：

示例

.active {
background-color: #04AA6D;
}

右对齐链接
通过将列表项向右浮动 (float:right;) 来实现右对齐链接：

示例

<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系人</a></li>
<li style="float:right"><a class="active" href="#about">关于</a></li>
</ul>

边框分隔线
将 border-right 属性添加到 <li> 以创建链接分隔线：

示例

/* 为所有列表项添加灰色右边框，最后一个项 (last-child) 除外 */
li {
border-right: 1px solid #bbb;
}

li:last-child {
border-right: none;
}

固定导航栏
使导航栏停留在页面顶部或底部，即使用户滚动页面也是如此：

固定顶部

ul {
position: fixed;
top: 0;
width: 100%;
}

固定底部

ul {
position: fixed;
bottom: 0;
width: 100%;
}

注意：固定位置在移动设备上可能无法正常工作。

灰色水平导航栏
带有细灰色边框的灰色水平导航栏示例：

示例

ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}

li a {
color: #666;
}

粘性导航栏

将 position: sticky; 添加到 <ul> 以创建粘性导航栏。

粘性元素根据滚动位置在相对和固定之间切换。它处于相对定位状态，直到在视口中达到给定的偏移位置 - 然后它会“粘”在原位（如 position:fixed）。

示例

ul {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}

注意：Internet Explorer 不支持粘性定位。Safari 需要 -webkit- 前缀（参见上例）。您还必须至少指定 top、right、bottom 或 left 中的一个才能使粘性定位起作用。

---

总结

本文介绍了的CSS导航栏NavigationBar创建，如有问题欢迎私信和评论