Blogger Information
Blog 3
fans 0
comment 0
visits 2433
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
简单导航的简单实现
Aloc
Original
749 people have browsed it

简单导航的实现

html主要部分

  1. <header class="head">
  2. <ul class="head-ul clear">
  3. <li><a href="">首页</a></li>
  4. <li><a href="">关于前端</a></li>
  5. <li>
  6. <a href="">前端三宝</a>
  7. <ul class="submenu">
  8. <li><a href="">html</a></li>
  9. <li><a href="">css</a></li>
  10. <li><a href="">javascript</a></li>
  11. </ul>
  12. </li>
  13. <li>
  14. <a href="">资源下载</a>
  15. <ul class="submenu">
  16. <li><a href="">php工具</a></li>
  17. <li><a href="">php手册</a></li>
  18. <li><a href="">php课件</a></li>
  19. </ul>
  20. </li>
  21. <li><a href="tel: 182****">电话联系</a></li>
  22. <li><a href="mailto: 182***@qq.com">邮件联系</a></li>
  23. </ul>
  24. </header>

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


css主要部分

  1. /* css reset */
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. box-sizing: border-box;
  6. }
  7. li {
  8. list-style: none;
  9. }
  10. a {
  11. text-decoration: none;
  12. }
  13. .clear {
  14. zoom: 1;
  15. }
  16. .clear:after {
  17. visibility: hidden;
  18. display: block;
  19. content: " ";
  20. clear: both;
  21. height: 0;
  22. font-size: 0;
  23. }
  24. /* css reset end */
  25. .head {
  26. position: fixed;
  27. left: 0;
  28. top: 0;
  29. width: 100%;
  30. height: 50px;
  31. background: #000;
  32. }
  33. .head-ul {
  34. position: absolute;
  35. left: 50%;
  36. top: 50%;
  37. transform: translate(-50%, -50%);
  38. }
  39. /* 父级li设置相对定位 */
  40. .head-ul > li {
  41. position: relative;
  42. float: left;
  43. margin: 0 20px;
  44. }
  45. .head-ul > li > a {
  46. display: block;
  47. font-size: 16px;
  48. line-height: 50px;
  49. color: #f7f7f7;
  50. }
  51. .head-ul .submenu {
  52. display: none;
  53. position: absolute;
  54. left: 50%;
  55. top: 50px;
  56. min-width: 100px;
  57. padding: 10px 20px;
  58. transform: translateX(-50%);
  59. background: #000;
  60. }
  61. .head-ul .submenu a {
  62. display: block;
  63. font-size: 14px;
  64. text-align: center;
  65. line-height: 30px;
  66. color: #f7f7f7;
  67. }

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


js主要部分

  1. // 获取元素
  2. const lis = document.querySelectorAll(".head-ul>li");
  3. // 遍历元素
  4. lis.forEach(function (li) {
  5. // 添加鼠标移入监听事件
  6. li.addEventListener("mouseover", showSubMenu);
  7. // 添加鼠标移入监听事件
  8. li.addEventListener("mouseout", hideSubMenu);
  9. });
  10. // 显示二级菜单,showSubMenu
  11. function showSubMenu(ev) {
  12. // 判断是否有二级菜单,触发目标a标签后面是否有相邻元素
  13. if (ev.target.nextElementSibling !== null) {
  14. ev.target.nextElementSibling.style.display = "block";
  15. }
  16. }
  17. // 关闭二级菜单,hideSubMenu
  18. function hideSubMenu(ev) {
  19. if (
  20. ev.target.nodeName === "A" &&
  21. ev.target.nextElementSibling !== null
  22. ) {
  23. ev.target.nextElementSibling.style.display = "none";
  24. }
  25. }

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


小结

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

Correcting teacher:WJWJ

Correction status:qualified

Teacher's comments:功能实现了,最好附上效果图!
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post