📅  最后修改于: 2023-12-03 15:25:23.686000             🧑  作者: Mango
居中的菜单语义 UI 是一种通过语义化 HTML、CSS 和 JavaScript 实现的菜单 UI。与传统的菜单 UI 不同,它通过语义化标签和合理的结构来表达菜单的层级关系,通过 CSS 和 JavaScript 实现菜单的样式和交互效果。
<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
标签表示菜单项的链接。
.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
属性实现子菜单项文本的居中。
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
事件监听菜单项的失焦事件,根据是否聚焦到菜单项的子菜单内决定是否隐藏子菜单。