参考手册
CSS 导航栏
CSS 水平导航栏
返回 CSS 导航栏

CSS 垂直导航条

垂直导航条

如需构建垂直导航条，除了上一章中的代码外，还可以在列表中设置 <a> 元素的样式：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. ul {
  6.   list-style-type: none;
  7.   margin: 0;
  8.   padding: 0;
  9. }
  11. li a {
  12.   display: block;
  13.   width: 60px;
  14.   background-color: #dddddd;
  15. }
  16. </style>
  17. </head>
  18. <body>
  20. <ul>
  21.   <li><a href="#home">首页</a></li>
  22.   <li><a href="#news">新闻</a></li>
  23.   <li><a href="#contact">联系方式</a></li>
  24.   <li><a href="#about">关于我们</a></li>
  25. </ul>
  27. <p>背景色被添加到链接以显示链接区域。</p>
  28. <p>请注意，整个链接区域都是可单击的，而不仅仅是文本。</p>
  30. </body>
  31. </html>
运行一下
例子解释：

display: block; - 将链接显示为块元素可以使整个链接区域都可以被单击（而不仅仅是文本），我们还可以指定宽度（如果需要，还可以指定内边距、外边距、高度等）。

width: 60px; - 默认情况下，块元素会占用全部可用宽度。我们需要指定 60 像素的宽度。

您还可以设置 <ul> 的宽度，并删除 <a> 的宽度，因为当显示为块元素时，它们将占据可用的全部宽度。这将导致与我们之前的例子相同的结果：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. ul {
  6.   list-style-type: none;
  7.   margin: 0;
  8.   padding: 0;
  9.   width: 60px;
  10. }
  12. li a {
  13.   display: block;
  14.   background-color: #dddddd;
  15. }
  16. </style>
  17. </head>
  18. <body>
  20. <ul>
  21.   <li><a href="#home">首页</a></li>
  22.   <li><a href="#news">新闻</a></li>
  23.   <li><a href="#contact">联系方式</a></li>
  24.   <li><a href="#about">关于我们</a></li>
  25. </ul>
  27. <p>背景色被添加到链接以显示链接区域。</p>
  28. <p>请注意，整个链接区域都是可单击的，而不仅仅是文本。</p>
  30. </body>
  31. </html>
运行一下

垂直导航条实例

创建背景色为灰色的基础垂直导航条，并在用户将鼠标移到链接上时改变链接的背景色：

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. ul {
  6.   list-style-type: none;
  7.   margin: 0;
  8.   padding: 0;
  9.   width: 200px;
  10.   background-color: #f1f1f1;
  11. }
  13. li a {
  14.   display: block;
  15.   color: #000;
  16.   padding: 8px 16px;
  17.   text-decoration: none;
  18. }
  20. li a:hover {
  21.   background-color: #555;
  22.   color: white;
  23. }
  24. </style>
  25. </head>
  26. <body>
  28. <h1>垂直导航条</h1>
  30. <ul>
  31.   <li><a href="#home">首页</a></li>
  32.   <li><a href="#news">新闻</a></li>
  33.   <li><a href="#contact">联系方式</a></li>
  34.   <li><a href="#about">关于我们</a></li>
  35. </ul>
  37. </body>
  38. </html>
运行一下

活动/当前导航链接

向当前链接添加 "active" 类，以使用户知道他/她在哪个页面上：

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. ul {
  6.   list-style-type: none;
  7.   margin: 0;
  8.   padding: 0;
  9.   width: 200px;
  10.   background-color: #f1f1f1;
  11. }
  13. li a {
  14.   display: block;
  15.   color: #000;
  16.   padding: 8px 16px;
  17.   text-decoration: none;
  18. }
  20. li a.active {
  21.   background-color: #4CAF50;
  22.   color: white;
  23. }
  25. li a:hover:not(.active) {
  26.   background-color: #555;
  27.   color: white;
  28. }
  29. </style>
  30. </head>
  31. <body>
  33. <h1>垂直导航条</h1>
  34. <p>在此例中，我们创建一个具有绿色背景色和白色文本的 "active" 类。该类将添加到 "Home" 链接。</p>
  36. <ul>
  37.   <li><a class="active" href="#home">首页</a></li>
  38.   <li><a href="#news">新闻</a></li>
  39.   <li><a href="#contact">联系我们</a></li>
  40.   <li><a href="#about">关于我们</a></li>
  41. </ul>
  43. </body>
  44. </html>
运行一下

居中链接以及添加边框

把 text-align:center 添加到 <li> 或 <a>，使链接居中。

将 border 属性添加到 <ul>，在导航条周围添加边框。如果您还希望在导航条内添加边框，请为所有 <li> 元素添加 border-bottom，最后一个元素除外：

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. ul {
  6.   list-style-type: none;
  7.   margin: 0;
  8.   padding: 0;
  9.   width: 200px;
  10.   background-color: #f1f1f1;
  11.   border: 1px solid #555;
  12. }
  14. li a {
  15.   display: block;
  16.   color: #000;
  17.   padding: 8px 16px;
  18.   text-decoration: none;
  19. }
  21. li {
  22.   text-align: center;
  23.   border-bottom: 1px solid #555;
  24. }
  26. li:last-child {
  27.   border-bottom: none;
  28. }
  30. li a.active {
  31.   background-color: #4CAF50;
  32.   color: white;
  33. }
  35. li a:hover:not(.active) {
  36.   background-color: #555;
  37.   color: white;
  38. }
  39. </style>
  40. </head>
  41. <body>
  43. <h1>垂直导航条</h1>
  44. <p>在本例中，我们居中导航链接并为导航条添加边框：</p>
  46. <ul>
  47.   <li><a class="active" href="#home">首页</a></li>
  48.   <li><a href="#news">新闻</a></li>
  49.   <li><a href="#contact">联系方式</a></li>
  50.   <li><a href="#about">关于我们</a></li>
  51. </ul>
  53. </body>
  54. </html>
运行一下

全高固定垂直导航条

创建全高的“粘性”侧面导航：

代码如下：

  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <style>
  6.         html, body {
  7.             font-family: Verdana,sans-serif;
  8.             font-size: 15px;
  9.             line-height: 1.5
  10.         }
  12.         body {
  13.             margin: 0;
  14.         }
  16.         ul.vertical {
  17.             list-style-type: none;
  18.             margin: 0;
  19.             padding: 0;
  20.             width: 25%;
  21.             background-color: #f1f1f1;
  22.             position: fixed;
  23.             height: 100%;
  24.             overflow: auto;
  25.             min-width: 80px;
  26.         }
  28.             ul.vertical li a {
  29.                 display: block;
  30.                 color: #000;
  31.                 padding: 8px 16px;
  32.                 text-decoration: none;
  33.             }
  35.                 ul.vertical li a:hover:not(.active) {
  36.                     background-color: #555;
  37.                     color: white;
  38.                 }
  40.             ul.vertical a.active {
  41.                 background-color: #04AA6D;
  42.                 color: white;
  43.             }
  45.         .main {
  46.             margin-left: 25%;
  47.             padding: 1px 16px;
  48.             height: 500px;
  49.         }
  51.         @media screen and (max-width: 290px) {
  52.             .main {
  53.                 margin-left: 35%;
  54.             }
  55.         }
  56.     </style>
  57. </head>
  58. <body>
  61.     <ul class="vertical">
  62.         <li><a class="active" href="javascript:void(0)">首页</a></li>
  63.         <li><a href="javascript:void(0)">新闻</a></li>
  64.         <li><a href="javascript:void(0)">联系方式</a></li>
  65.         <li><a href="javascript:void(0)">关于我们</a></li>
  66.     </ul>
  67.     <div class="main">
  68.         <h2>固定高度的侧边导航条</h2>
  69.         <h3>试着滚动这个区域，看看侧边导航条是如何粘在页面上的</h3>
  70.         <p>一些文本..</p>
  71.         <p>一些文本..</p>
  72.         <p>一些文本..</p>
  73.         <p>一些文本..</p>
  74.         <p>一些文本..</p>
  75.         <p>一些文本..</p>
  76.         <p>一些文本..</p>
  77.         <p>一些文本..</p>
  79.     </div>
  80. </body>
  81. </html>
运行一下

注意：本例在移动设备上可能无法正常工作。

CSS 水平导航栏

分类导航