CSS 导航栏

  • 导航栏

    对于任何网站而言,易于使用的导航都很重要。使用CSS,您可以将枯燥的HTML菜单转换为美观的导航栏。

  • 导航栏 - 链接列表

    导航栏需要标准HTML作为基础。在我们的示例中,我们将从标准HTML列表构建导航栏。导航栏基本上是一个链接列表,因此使用<ul>和<li>元素非常有意义:

    <ul>
                              <li><a href="#home">主页</a></li>
                              <li><a href="#news">新闻</a></li>
                              <li><a href="#contact">联系方式</a></li>
                              <li><a href="#about">关于我们</a></li>
                            </ul>
    尝试一下

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

    ul {
                              list-style-type: none;
                              margin: 0;
                              padding: 0;
                            }
    尝试一下

    示例说明:

    • list-style-type: none; - 移除子弹。导航栏不需要列表标记
    • 设置margin : 0;并padding : 0; 删除浏览器默认设置

    上例中的代码是垂直和水平导航栏中使用的标准代码。

  • 垂直导航栏

    要构建垂直导航栏,除了上面的代码之外,您还可以在列表中设置<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: #4CAF50;
                              color: white;
                            }
    尝试一下

    链接居中和添加边框

    添加text-align:center到<li>或<a>以使链接居中。将border属性添加到<ul>在导航栏周围添加边框。如果您还想在导航栏中添加边框,请border-bottom向所有<li>元素添加一个,但最后一个元素除外:

    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; /* 如果sidenav有太多内容,则启用滚动 */
                            }
    尝试一下

    注意:此示例可能无法在移动设备上正常运行。

  • 水平导航栏

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

    内联列表项

    构建水平导航栏的一种方法是将<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; - 由于块元素占用了可用的全宽度,因此它们不能彼此相邻浮动。因此,请指定一些填充以使其看起来很好
    • background-color: #dddddd; - 为每个元素添加灰色背景颜色
    提示:如果需要全角背景颜色,请将背景颜色添加到≪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;
                            }
    
                            li a:hover {
                              background-color: #111;
                            }
    尝试一下

    当前导航链接

    在当前链接中添加“active”类,让用户知道他/她所在的页面:

    .active {
                              background-color: #4CAF50;
                            }
    尝试一下

    右对齐链接

    通过将列表项浮动到右侧(float:right;)来右对齐链接:

    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;
                            }
    
                            li a:hover:not(.active) {
                              background-color: #111;
                            }
    
                            .active {
                              background-color: #4CAF50;
                            }
    尝试一下

    边境分隔线

    border-right属性添加到<li>以创建链接分隔符:

    <ul>
                              <li><a href="#home">主页</a></li>
                                <li><a href="#news">新闻</a></li>
                                <li><a href="#contact">联系方式</a></li>
                              <li style="float:right"><a href="#about">关于我们</a></li>
                            </ul>
    尝试一下

    固定导航栏 - 固定顶部

    ul {
                              position: fixed;
                              top: 0;
                              width: 100%;
                            }
                            
    尝试一下

    如果是要固定顶部,把top改成bottom

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

    灰色水平导航栏

    灰色水平导航栏的示例,带有浅灰色边框:

    ul {
                              border: 1px solid #e7e7e7;
                              background-color: #f3f3f3;
                            }
    
                            li a {
                              color: #666;
                            }
                            
    尝试一下
  • 响应导航栏

    如何使用CSS媒体查询来创建响应式导航。

    @media screen and (max-width: 600px) {
                              ul.topnav li.right,
                              ul.topnav li {float: none;}
                            }
                            
    尝试一下
  • 下拉导航栏

    如何在导航栏中添加下拉菜单。

    .dropdown-content {
                              display: none;
                              position: absolute;
                              background-color: #f9f9f9;
                              min-width: 160px;
                              box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                              z-index: 1;
                            }
                            
    尝试一下
  • 相关页面

    HTML教程:HTML样式