使用原生JS和CSS创建响应式导航下拉菜单

该资源是一个教程，讲解如何使用原生JavaScript实现一个响应式的导航下拉菜单。这个菜单设计要求下拉菜单的宽度与浏览器视口相同，一级菜单有两个选项，当鼠标悬停在一级菜单上时，对应的二级菜单会显示或隐藏。教程涉及的技术包括CSS的`position`属性、JavaScript的定时器、事件处理（`mouseout`和`mouseover`）以及HTML结构设计。 在HTML和CSS部分，首先创建一个包含导航条的`div`，将其`position`设为`relative`，高度设为50px，并确保其宽度为100%，以占据整个视口宽度。导航条的结构由一个外层`ul`（`outer`类）和内部嵌套的`li`元素组成，每个`li`元素包含一级导航链接和对应的二级导航`ul`。二级导航`ul`的`position`被设置为`absolute`，并将其`top`值设为50px（即一级导航的高度），`left`和`right`均设为0，以填充整个视口宽度。使用`display: inline-block`和外层`div`的`text-align: center`来实现导航项的居中对齐。 CSS代码示例： ```css .header { position: relative; height: 50px; width: 100%; } .outer { display: flex; justify-content: center; } .outerList { display: inline-block; } .inter { position: absolute; top: 50px; left: 0; right: 0; visibility: hidden; /* 初始隐藏二级菜单 */ } ``` 在JavaScript部分，主要利用`mouseover`和`mouseout`事件监听一级导航项。当鼠标进入一级导航项时，显示对应的二级菜单，可能通过设置定时器来延迟显示，以防止鼠标快速移动时频繁切换。当鼠标离开一级导航项时，清除定时器并隐藏二级菜单。JavaScript代码示例： ```javascript const outerLists = document.querySelectorAll('.outerList'); const interMenus = document.querySelectorAll('.inter'); outerLists.forEach((outerList) => { outerList.addEventListener('mouseover', () => { const interMenu = outerList.nextElementSibling; setTimeout(() => { interMenu.style.visibility = 'visible'; }, 200); // 延迟200毫秒显示 }); outerList.addEventListener('mouseout', () => { const interMenu = outerList.nextElementSibling; clearTimeout(interMenu.timeoutId); interMenu.timeoutId = setTimeout(() => { interMenu.style.visibility = 'hidden'; }, 200); // 延迟200毫秒隐藏 }); }); ``` 在这个例子中，通过结合CSS和JavaScript，可以创建一个动态且响应式的导航下拉菜单，适应不同浏览器视口宽度，并且能优雅地处理鼠标悬停时的显示和隐藏效果。