CSS vertical navigation bar

垂直导航栏

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

Example

width: 200px;
  li a {
  width: 60px;
}

Try it yourself

例子解释：

  • li a { - 将链接显示为块元素可以使整个链接区域都可以被单击（而不仅仅是文本），我们还可以指定宽度（如果需要，还可以指定内边距、外边距、高度等）。
  • width: 60px; - 默认情况下，块元素会占用全部可用宽度。我们需要指定 60 像素的宽度。

您还可以设置

width: 60px;

ການສະແດງນຳທາງທີ່ສະເພາະ

Example

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  ການສ້າງກະດານນຳທາງທີ່ສະເພາະສະເພາະສີສີນ້ອຍ ແລະ ປ່ຽນສີການເຊື່ອມຕໍ່ຂອງການນຳມາເມື່ອຜູ້ນຳການຕິດຕໍ່:
  background-color: #f1f1f1;
}
width: 200px;
  li a {
  display: block;
  color: #000;
  padding: 8px 16px;
}
text-decoration: none;
/* ການປ່ຽນສີການເຊື່ອມຕໍ່ເມື່ອຖືກນຳມາ */
  li a:hover {
  background-color: #4CAF50;
}

Try it yourself

background-color: #555;

ການເຊື່ອມຕໍ່ປະຈຸບັນ/ການເຊື່ອມຕໍ່ນຳທາງ

Example

ການເພີ່ມປະເພດ "active" ຕໍ່ການເຊື່ອມຕໍ່ປະຈຸບັນ ເພື່ອໃຫ້ຜູ້ນຳການຮັບຮູ້ວ່າລາວຢູ່ໃນເວລາທີ່ໃດ:
  .active {
  background-color: #4CAF50;
}

Try it yourself

color: white;

ການສະຖານທີ່ການເຊື່ອມຕໍ່ ແລະ ການເພີ່ມກະບຽນຂ້າງ text-align:center ການເພີ່ມໃສ່ <li> ຫຼື <a> ເພື່ອຫຼີກຫຼີງການສະຖານທີ່.

ການເພີ່ມ border ການເພີ່ມຜະສານ <ul> ໃນຮາງການນຳທາງ ແລະ ການເພີ່ມກະບຽນຂ້າງ. ຖ້າທ່ານຍັງຕ້ອງການການເພີ່ມກະບຽນຂ້າງໃນການນຳທາງ ການເພີ່ມຜະສານ border ສຳລັບທຸກ <li> ສິ່ງ. border-bottomແຕ່ບໍ່ມີສິ່ງສຸດທ້າຍ:

Example

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

Try it yourself

Full-height fixed vertical navigation bar

Create a full-height 'sticky' side navigation:

Example

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  height: 100%; /* Full height */
  position: fixed; /* Make it sticky, even when scrolling */
  overflow: auto; /* If the sidebar content is too much, enable the scrollbar */
}

Try it yourself

Note:This example may not work properly on mobile devices.