JavaScript实现下拉菜单操作

JavaScript实现下拉菜单操作

案例分析:
(1)该操作分为两个部分,导航栏和下拉菜单部分,因此需要使用嵌套,一共使用两对ul和li标签,外面的ul构成导航栏框架,在li里面一一对应另一对ul和li,在内层中书写对应的下拉菜单项;
(2)在导航栏中,每个li都需要添加鼠标经过效果,因此需要用到循环注册鼠标事件;
(3)核心思想:添加点击事件,当鼠标经过 li 里面的第二个孩子(内层的ul)时,使ul显示出来,当鼠标离开时,再将对应的ul隐藏起来。

完整代码如下:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉菜单title>
    <style>
        * {
      
            margin: 0;
            padding: 0;
        }
        
        li {
      
            list-style-type: none;
        }
        
        a {
      
            text-decoration: none;
            font-size: 14px;
        }
        
        .nav {
      
            margin: 100px;
        }
        
        .nav li {
      
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
            background-color: #eee;
        }
        
        .nav li a {
      
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
            
        }
        
        .nav li a:hover {
      
            background-color: #808080;
        }
        
        .nav ul {
      
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        
        .nav ul li {
      
            border-bottom: 1px solid #FECC5B;
        }
        
        .nav ul li a:hover {
      
            background-color: #FFF5DA;
        }
    style>
head>

<body>
    <ul class="nav">
        <li>
            <a href="#">导航栏1a>
            <ul>
                <li>
                    <a href="">菜单1a>
                li>
                <li>
                    <a href="">菜单2a>
                li>
                <li>
                    <a href="">菜单3a>
                li>
            ul>
        li>
        <li>
            <a href="#">导航栏2a>
            <ul>
                <li>
                    <a href="">菜单1a>
                li>
                <li>
                    <a href="">菜单2a>
                li>
                <li>
                    <a href="">菜单3a>
                li>
            ul>
        li>
        <li>
            <a href="#">导航栏3a>
            <ul>
                <li>
                    <a href="">菜单1a>
                li>
                <li>
                    <a href="">菜单2a>
                li>
                <li>
                    <a href="">菜单3a>
                li>
            ul>
        li>
        <li>
            <a href="#">导航栏4a>
            <ul>
                <li>
                    <a href="">菜单1a>
                li>
                <li>
                    <a href="">菜单2a>
                li>
                <li>
                    <a href="">菜单3a>
                li>
            ul>
        li>
    ul>
    <script>
        // 1. 获取元素
        var nav = document.querySelector('.nav');
        var lis = nav.children; // 得到4个小li
        // 2.循环注册事件
        for (var i = 0; i < lis.length; i++) {
      
            lis[i].onmouseover = function() {
      
                this.children[1].style.display = 'block';  // 节点获取第二个子孩子,将ul显示出来
            }
            lis[i].onmouseout = function() {
      
                this.children[1].style.display = 'none';
            }
        }
    script>
body>

html>

你可能感兴趣的:(html,javascript)