简单导航的简单实现

• 简单导航的实现
  • html主要部分
  • css主要部分
  • js主要部分
  • 小结

简单导航的实现

html主要部分

<header class="head">
    <ul class="head-ul clear">
        <li><a href="">首页</a></li>
        <li><a href="">关于前端</a></li>
        <li>
            <a href="">前端三宝</a>
            <ul class="submenu">
                <li><a href="">html</a></li>
                <li><a href="">css</a></li>
                <li><a href="">javascript</a></li>
            </ul>
        </li>
        <li>
            <a href="">资源下载</a>
            <ul class="submenu">
                <li><a href="">php工具</a></li>
                <li><a href="">php手册</a></li>
                <li><a href="">php课件</a></li>
            </ul>
        </li>
        <li><a href="tel: 182****">电话联系</a></li>
        <li><a href="mailto: 182***@qq.com">邮件联系</a></li>
    </ul>
</header>

以上html涉及到了a标签的几种用法，链接、电话、邮件

---

css主要部分

/* css reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
.clear {
    zoom: 1;
}
.clear:after {
    visibility: hidden;
    display: block;
    content: " ";
    clear: both;
    height: 0;
    font-size: 0;
}
/* css reset end */
.head {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 50px;
    background: #000;
}
.head-ul {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
/* 父级li设置相对定位 */
.head-ul > li {
    position: relative;
    float: left;
    margin: 0 20px;
}
.head-ul > li > a {
    display: block;
    font-size: 16px;
    line-height: 50px;
    color: #f7f7f7;
}
.head-ul .submenu {
    display: none;
    position: absolute;
    left: 50%;
    top: 50px;
    min-width: 100px;
    padding: 10px 20px;
    transform: translateX(-50%);
    background: #000;
}
.head-ul .submenu a {
    display: block;
    font-size: 14px;
    text-align: center;
    line-height: 30px;
    color: #f7f7f7;
}

以上css主要涉及到了浮动，清浮动，定位

---

js主要部分

// 获取元素
const lis = document.querySelectorAll(".head-ul>li");
// 遍历元素
lis.forEach(function (li) {
    // 添加鼠标移入监听事件
    li.addEventListener("mouseover", showSubMenu);
    // 添加鼠标移入监听事件
    li.addEventListener("mouseout", hideSubMenu);
});
// 显示二级菜单，showSubMenu
function showSubMenu(ev) {
    // 判断是否有二级菜单,触发目标a标签后面是否有相邻元素
    if (ev.target.nextElementSibling !== null) {
        ev.target.nextElementSibling.style.display = "block";
    }
}
// 关闭二级菜单，hideSubMenu
function hideSubMenu(ev) {
    if (
        ev.target.nodeName === "A" &&
        ev.target.nextElementSibling !== null
    ) {
        ev.target.nextElementSibling.style.display = "none";
    }
}

以上js主要涉及到了获取dom元素，遍历，添加事件监听，事件代理

---

小结

另外，本demo，有个bug，即无论如何也点不了二级菜单，因为鼠标一离开a标签，二级导航就隐藏掉了，后续待完善，将触发目标转移到li上即可