垂直导航

简介

垂直导航，又称左侧导航，是指网页或应用中放置在左侧的导航菜单，通常用于展示主要内容的分类或功能。垂直导航可以提高用户导航效率，使得用户更容易找到所需的信息。

实现方法

HTML

在 HTML 中，垂直导航可以使用 <ul> 和 <li> 标签结合使用，例如：

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS

使用 CSS 可以自定义垂直导航的样式，例如：

nav {
  width: 200px;
}

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

li {
  padding: 10px;
}

a {
  display: block;
  color: #333;
  text-decoration: none;
}

JavaScript

垂直导航的交互可以使用 JavaScript 实现，例如：

// 获取导航菜单
var nav = document.querySelector('nav');

// 获取导航菜单的所有项
var items = nav.querySelectorAll('li');

// 遍历所有项，为它们添加事件处理函数
for (var i = 0; i < items.length; i++) {
  items[i].addEventListener('click', function() {
    // 切换选中状态
    for (var j = 0; j < items.length; j++) {
      items[j].classList.remove('selected');
    }
    this.classList.add('selected');
  });
}

实例展示

以下是一个使用了垂直导航的 Demo，展示了如何实现一个简单的 Todo 管理应用：点击查看

总结

垂直导航是一种常见的网页或应用导航形式，具有方便用户使用、效率高等优点。其实现方法比较简单，但需要注意样式和交互的设计。