导航下拉菜单 定位、事件
导航下拉菜单
HTML
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>导航下拉菜单</title><link rel="stylesheet" href="style.css" /></head><body><nav><ul><li><a href="#">首页</a></li><li><a href="">导航1</a><dl><dd>1项目1</dd><dd>1项目2</dd><dd>1项目3</dd><dd>1项目4</dd></dl></li><li><a href="">导航2</a><dl><dd>2项目1</dd><dd>2项目2</dd><dd>2项目3</dd><dd>2项目4</dd></dl></li><li><a href="">导航3</a></li><li><a href="">导航4</a></li><li><a href="">导航5</a></li></ul></nav></body><script src="script.js"></script></html>
CSS
nav {width: 100%;height: 60px;background-color: black;}li {list-style: none;float: left;width: 100px;height: 50px;line-height: 50px;position: relative;}a {color: gainsboro;text-decoration: none;}a:hover {color: white;}dl {display: none;position: absolute;top: 50px;width: 130px;border: 1px solid black;}
javascript
const navs = document.querySelectorAll("li");navs.forEach(function (nav) {nav.addEventListener("mouseover", showNextItem);nav.addEventListener("mouseout", closeNextItem);});function showNextItem(ev) {if (ev.target.nextElementSibling != null) {ev.target.nextElementSibling.style.display = "block";}}function closeNextItem(ev) {if (ev.target.nodeName === "A" && ev.target.nextElementSibling != null) {ev.target.nextElementSibling.style.display = "none";}}
运行截图
总结
- 下拉菜单在鼠标移出之后会立马消失
- 如果下拉菜单中是链接的话就无法点击
- 需要学习的内容还有很多
定位、事件
CSS position 属性
|属性|描述|
|—-|—-|
|absolute|脱离文档流，一定要有一个定位父级作为定位参照物，否则就相对于 body 进行定位|
|relative|相对于其正常位置进行定位|
|fixed|元素的位置相对于浏览器窗口是固定位置|事件 1.事件冒泡：事件最开始由最具体的元素接收 由内向外传播事件 2.事件捕获：与事件冒泡相反 由外向内传播事件