居中的菜单语义 UI

什么是居中的菜单语义 UI？

居中的菜单语义 UI 是一种通过语义化 HTML、CSS 和 JavaScript 实现的菜单 UI。与传统的菜单 UI 不同，它通过语义化标签和合理的结构来表达菜单的层级关系，通过 CSS 和 JavaScript 实现菜单的样式和交互效果。

为什么需要居中的菜单语义 UI？

• 提高可访问性： 通过语义化标签和合理的结构，可以为屏幕阅读器和搜索引擎提供更好的支持，提高网站的可访问性。
• 提高可维护性： 通过语义化标签和合理的结构，可以使代码更易于维护和扩展，减少代码的冗余和重复。
• 提高用户体验： 居中的菜单 UI 可以使菜单更加直观和易于使用，提高用户体验。

如何实现居中的菜单语义 UI？

HTML 结构

<nav class="menu">
  <ul>
    <li><a href="#">菜单1</a></li>
    <li><a href="#">菜单2</a></li>
    <li><a href="#">菜单3</a></li>
  </ul>
</nav>

使用 nav 标签表示菜单区域，使用 ul 和 li 标签表示菜单项和菜单项的子菜单项（如果有），使用 a 标签表示菜单项的链接。

CSS 样式

.menu {
  display: flex;
  justify-content: center;
}

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

.menu li {
  position: relative;
}

.menu li:hover > ul {
  display: block;
}

.menu ul {
  display: none;
  position: absolute;
}

.menu ul ul {
  position: static;
}

.menu ul li {
  width: 200px;
  text-align: center;
}

.menu a {
  display: block;
  padding: 12px;
}

使用 flex 布局实现菜单水平居中。使用 position 属性和 :hover 伪类实现子菜单的显示和隐藏。使用 text-align 属性实现子菜单项文本的居中。

JavaScript 交互

const menu = document.querySelector('.menu');
const menuItems = menu.querySelectorAll('a');
let activeMenuItem = null;

menuItems.forEach(item => {
  item.addEventListener('focus', e => {
    if (activeMenuItem) {
      activeMenuItem.nextElementSibling.style.display = 'none';
      activeMenuItem = null;
    }
    
    const currentMenuItem = e.target.parentNode;
    
    if (currentMenuItem.querySelector('ul')) {
      currentMenuItem.querySelector('ul').style.display = 'block';
      activeMenuItem = currentMenuItem;
    }
  });
});

menuItems.forEach(item => {
  item.addEventListener('blur', e => {
    setTimeout(() => {
      if (!menu.contains(document.activeElement) && activeMenuItem) {
        activeMenuItem.querySelector('ul').style.display = 'none';
        activeMenuItem = null;
      }
    }, 100);
  });
});

使用 JavaScript 实现菜单的键盘可访问性。使用 focus 事件监听菜单项的聚焦事件，根据菜单项是否包含子菜单决定是否显示子菜单，使用 blur 事件监听菜单项的失焦事件，根据是否聚焦到菜单项的子菜单内决定是否隐藏子菜单。