search

博客列表 >导航菜单栏

导航菜单栏

零龙
零龙原创
2020年06月15日 23:39:00681浏览
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <style>
  9.    *{
  10.        margin: 0px;
  11.        padding: 0px;
  12.    }
  13.    a
  14.    {
  15.        color: #fff;
  16.        text-decoration: none;
  17.    }
  18.    #nav {width: 100%;
  19.       height: 50px;
  20.       line-height: 50px;
  21.       background: #000;
  22.    }
  23.    li {
  24.        float: left;
  25.        margin-left: 10px;
  26.        list-style: none;
  27.    }
  28.    #nav > li > a:hover
  29.    {
  30.        color: #F00;
  31.    }
  32.    #nav > li {
  34.        position: relative;
  36.    }
  38.    #nav > li > ul
  39.    {
  40.        position: absolute;
  41.        top:50px;
  42.        width: 180px;
  43.        border: 1px solid #bbb;
  44.        border-top:none;
  45.    }
  46.    #nav > li > ul > li a 
  47.    {
  48.        display: inline-block;
  49.        height: 50px;
  50.        color: steelblue;
  51.    }
  52.    ul.sub li:hover
  53.    {
  54.        background-color: violet;
  55.    }
  56.    #nav > li > ul{
  57.     display: none;
  58.    }
  59. </style>
  61. <body>
  62.     <ul id="nav">
  63.          <li><a href="">首页</a></li>
  64.          <li><a href="">视频教程</a></li>
  65.          <li><a href="">资源下载</a>
  66.          <ul>
  67.             <li><a href="">PHP工具</a></li>
  68.             <li><a href="">在线手册</a></li>
  69.             <li><a href="">学习课件</a></li>
  70.             <li><a href="">网站源码</a></li>
  71.          </ul>
  72.         </li>
  73.         <li><a href="">社区问答</a></li>
  74.         <li><a href="">技术文章</a>
  75.          <ul>
  76.             <li><a href="">头条</a></li>
  77.             <li><a href="">博客</a></li>
  78.             <li><a href="">PHP教程</a></li>
  79.             <li><a href="">PHP框架</a></li>
  80.          </ul>
  81.         </li>
  82.     </ul>
  83. </body>
  84. <script>
  86.     const navs = document.querySelectorAll("#nav > li");
  88.     navs.forEach(function(nav){
  90.         nav.addEventListener("mouseover",showSubMenu);
  92.         nav.addEventListener("mouseout",closeSubMenu);
  93.     });
  95.     function showSubMenu(ev)
  96.     {
  97.           if(ev.target.nextElementSibling !==null)
  98.           {
  99.               ev.target.nextElementSibling.style.display = "block";
  100.           }
  101.     }
  102.     function closeSubMenu(ev)
  103.     {
  104.       if (ev.target.nodeName === "A" && ev.target.nextElementSibling !== null) 
  105.       {
  106.         ev.target.nextElementSibling.style.display = "none";
  107.       }
  108.     }
  109. </script>
  110. </html>
上一条：选择器的学习与案例下一条：事件代理冒泡与捕捉，css元素定位，鼠标经过事件实现下拉菜单
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多