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

文章目录

CSS 导航栏

垂直和水平导航栏示例

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

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

导航栏 = 链接列表Links

导航栏需要标准 HTML 作为基础。
导航栏基本上是链接列表，因此使用

<ul>

和

<li> 

元素非常合理：

示例

<ul><li><ahref="default.asp">主页</a></li><li><ahref="news.asp">新闻</a></li><li><ahref="contact.asp">联系</a></li><li><ahref="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创建，如有问题欢迎私信和评论