以前写的两个CSS树形菜单

当初写两个CSS树形菜单的时候，主要考虑的是可扩展性、易用性和可读性，这里提供一份完整的建议和攻略，方便您学习和使用。

CSS树形菜单

HTML结构

首先，我们需要准备合适的HTML结构，来实现树形菜单。一般而言，在HTML结构中，我们需要使用ul（unordered list，无序列表）元素和li（list item，列表项）元素来搭建树形结构。

示例代码：

<ul class="menu">
  <li class="menu-item">
    <a href="#">菜单项1</a>
    <ul>
      <li><a href="#">子菜单1</a></li>
      <li><a href="#">子菜单2</a></li>
      <li><a href="#">子菜单3</a></li>
    </ul>
  </li>
  <li class="menu-item">
    <a href="#">菜单项2</a>
    <ul>
      <li><a href="#">子菜单4</a></li>
      <li><a href="#">子菜单5</a></li>
      <li><a href="#">子菜单6</a></li>
    </ul>
  </li>
</ul>

在这个示例中，我们可以看到，菜单项1和菜单项2均是li元素，在li元素中，我们使用a元素来实现菜单项的链接。如果需要添加子菜单，我们可以在li元素中添加一个嵌套的ul元素，在其中添加子菜单项的列表项。

CSS样式

一般而言，我们需要使用CSS来为树形菜单定义样式。在这里，我们需要使用一些CSS技能来实现不同效果。

1. 展开和收缩
   在树形菜单中，我们经常需要实现展开和收缩的效果，在CSS中可以使用“white-space: nowrap;”样式来避免文本换行，同时，利用伪类选择器“:before”或“:after”，在菜单项前或后添加“+”或“-”表示展开和收缩状态。

示例代码：

/* 菜单项前加符号 */
.menu-item:before {
  content: "+";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
}

/* 展开后改变符号 */
.menu-item.expanded:before {
  content: "-";
}

/* 让文本不换行 */
.menu-item > a {
  white-space: nowrap;
}

1. 子菜单项样式
   在树形菜单中，我们还需要定义子菜单的样式，一般使用CSS中的“display”属性来切换子菜单项的显示状态。

示例代码：

/* 隐藏子菜单项 */
.menu-item ul {
  display: none;
}

/* 显示子菜单项 */
.menu-item.expanded ul {
  display: block;
  margin-left: 1em;
}

1. 鼠标悬停效果
   如果需要添加菜单项的鼠标悬停效果，我们可以使用CSS中的伪类选择器“:hover”。

示例代码：

/* 鼠标悬停样式 */
.menu-item:hover > a {
  color: #f00;
}

JavaScript交互

最后，我们可以使用JavaScript来实现树形菜单的交互功能，包括展开和收缩子菜单项等。

示例代码：

var menuItems = document.querySelectorAll('.menu-item');

Array.prototype.forEach.call(menuItems, function(item) {
  var toggle = item.querySelector(':before');

  if (!toggle) {
    toggle = document.createElement('span');
    toggle.innerHTML = '+';
    item.insertBefore(toggle, item.firstChild);
  }

  var subMenu = item.querySelector('ul');
  if (subMenu) {
    toggle.addEventListener('click', function(event) {
      event.stopPropagation();
      event.preventDefault();
      item.classList.toggle('expanded');
    }, false);
  }
});

在这个示例中，我们使用querySelectorAll查询到所有的菜单项，然后为每个菜单项添加一个展开和收缩的按钮。使用classList属性来添加或移除“expanded”类，以实现子菜单项的展开和收缩。

总结：

本文介绍了CSS树形菜单的相关知识，包括HTML结构、CSS样式和JavaScript交互。希望对您有所帮助。