下拉菜单及相关基础知识点汇总 - html5

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 下拉菜单及相关基础知识点汇总

博主信息

博文 12

粉丝 0

访问量 14362

专题推荐

更多>

下拉菜单

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>下拉菜单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        a {
            color: #fff;
            text-decoration: none;
        }
        .clearfix{
            zoom:1;
        }
        .clearfix:after{
            content: '';
            clear: both;
            width: 0;
            height: 0;
            visibility: hidden;
            display: block;
        }
        li{
            list-style: none;
        }
        nav{
            background: #000000;
        }
        nav>ul>li{
            float: left;
            width: 200px;
            padding: 10px 0;
            text-align: center;
        }
        nav>ul>li{
            position: relative;
        }
        nav>ul>li>ul{
            display: none;
            position: absolute;
            /*z-index: -1;*/
            background: #f1f1f1;
            top: 40px;
            width: 100%;
        }
        nav>ul>li>ul>li{
            padding: 5px 10px;
            text-align: center;
        }
        nav>ul>li>ul a{
            color:#000;
        }
    </style>
</head>
<body>
<nav class="clearfix">
    <ul>
        <li>
            <a href="">一级菜单1</a>
            <ul>
                <li><a href="">二级菜单1</a></li>
                <li><a href="">二级菜单1</a></li>
                <li><a href="">二级菜单1</a></li>
                <li><a href="">二级菜单1</a></li>
            </ul>
        </li>
        <li>
            <a href="">一级菜单2</a>
            <ul>
                <li><a href="">二级菜单2</a></li>
                <li><a href="">二级菜单2</a></li>
                <li><a href="">二级菜单2</a></li>
                <li><a href="">二级菜单2</a></li>
            </ul>
        </li>
        <li>
            <a href="">一级菜单3</a>
        </li>
        <li>
            <a href="">一级菜单4</a>
            <ul>
                <li><a href="">二级菜单4</a></li>
                <li><a href="">二级菜单4</a></li>
                <li><a href="">二级菜单4</a></li>
                <li><a href="">二级菜单4</a></li>
            </ul>
        </li>
    </ul>
</nav>
<script>
    const navs = document.querySelectorAll("nav>ul>li");
    // console.log(navs);
    //forEach() 用于调用数组的每个元素并传递给函数
    navs.forEach(function (nav) {
        nav.addEventListener("mouseover", showMenu);
        nav.addEventListener("mouseout", hideMenu);
    });
    //显示二级菜单
    function showMenu(ev){
        if( ev.target.nodeName === "A" && ev.target.nextElementSibling !== null){
            ev.target.nextElementSibling.style.display = "block";
        }
    }
    //关闭二级菜单
    function hideMenu(ev) {
        if( ev.target.nodeName === "A" && ev.target.nextElementSibling !== null){
            ev.target.nextElementSibling.style.display = "none";
        }
        // console.log(ev.children)
        // if(ev.target.children.length > 1) {
        //     console.log(ev.target);
        //     ev.target.children[1].style.display = "none";
        // }
    }
</script>
</body>
</html>

引入外联样式的三种方法

1、<style>直接写入样式</style>
2、<link rel="stylesheet" href="style.css">
3、
    <style>
        @import url("style.css");
        @import "style.css";
    </style>

元素a的几种主要用法

<!--打开一个网页-->
<a href="https://www.baidu.com/">百度</a>
<!--下载文件-->
<a href="XXX.zip">下载该文档</a>
<!--发邮件-->
<a href="mailto: 111111@qq.com">点我发邮件</a>
<!--打电话-->
<a href="tel: 18055553333">18055553333</a>
<!--锚点-->
<div id="top">111</div>
<a href="#top">置顶</a>

a标签的几种常用属性

_blank      :在新窗口中打开被链接文档。
_self       :默认。在相同的框架中打开被链接文档。
_parent        :在父框架集中打开被链接文档。
_top        :在整个窗口中打开被链接文档。
framename    :在指定的框架中打开被链接文档。

元素的定位

position：元素默认在页面中按文档流的顺序进行排列
static      默认值。没有定位，元素出现在正常的流中。
absolute    生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fixed       生成绝对定位的元素，相对于浏览器窗口进行定位。
relative    生成相对定位的元素，相对于其正常位置进行定位。
inherit        规定应该从父元素继承 position 属性的值。

事件监听器（监听函数）

<button>按钮1</button>
<button>按钮2</button>
<button class="button">按钮3</button>
<script>
    //获取满足条件的所有元素 document.querySelectorAll("tag") document.querySelectorAll(".class") document.querySelectorAll("#id")
    const btn = document.querySelectorAll('button');
    console.log(btn);//NodeList(2) [button, button]
    //获取满足调价的第一个元素
    const btn1 = document.querySelector('button');
    console.log(btn1);//<button>按钮1</button>
    //addEventListener(事件类型，事件方法)；  event:事件   listener:监听（倾听者）
    //可以给一个元素多次添加同一个事件，并控制事件触发的阶段
    const btn2 = document.querySelector(".button");
    btn2.addEventListener("click", function(e){
        console.log(e.target);
    });
    btn2.addEventListener("click", function(e){
        console.log("111");
    })
</script>

事件冒泡、事件捕获

    冒泡：由内层向外层层层触发,false可省略
    e.addEventListener("click", fun, false);
    捕获；由外层向内层层层触发
    e.addEventListener("click", fun, true);

事件委托

<ul class="weituo">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
</ul>
<script>
    // 事件代理： 用父级代理所有子元素以及更下一级的元素上的同名事件
    document.querySelector(".weituo").addEventListener("click", function(ev){
        console.log(ev.target);//<li>...  返回的是当前正在触发事件的元素
        console.log(ev.currentTarget);//<ul>...  返回的是事件绑定者
    })
</script>