下拉菜单示例

最新推荐文章于 2023-05-14 11:06:07 发布
最新推荐文章于 2023-05-14 11:06:07 发布
阅读量1w 收藏
点赞数
分类专栏： # 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Walker7143/article/details/105690639
版权

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <script src="index.js" defer></script>
</head>
<body>
    <div class="content">
        <ul>
            <li>
                <a href="#">一级菜单1</a>
                <ul>
                    <li><a href="#">二级菜单1</a></li>
                    <li><a href="#">二级菜单2</a></li>
                    <li><a href="#">二级菜单3</a></li>
                </ul>
            </li>
            <li>
                <a href="#">一级菜单2</a>
                <ul>
                    <li><a href="#">二级菜单4</a></li>
                    <li><a href="#">二级菜单5</a></li>
                </ul>
            </li>
            <li>
                <a href="#">一级菜单3</a>
                <ul>
                    <li><a href="#">二级菜单1</a></li>
                </ul>
            </li>
            <li>
                <a href="#">一级菜单4</a>
            </li>
            <li>
                <a href="#">一级菜单5</a>
                <ul>
                    <li><a href="#">二级菜单1</a></li>
                    <li><a href="#">二级菜单2</a></li>
                    <li><a href="#">二级菜单3</a></li>
                    <li><a href="#">二级菜单4</a></li>
                    <li><a href="#">二级菜单5</a></li>
                    <li><a href="#">二级菜单6</a></li>
                    <li><a href="#">二级菜单7</a></li>
                    <li><a href="#">二级菜单8</a></li>
                </ul>
            </li>
            <li>
                <a href="#">一级菜单6</a>
                <ul>
                    <li><a href="#">二级菜单1</a></li>
                    <li><a href="#">二级菜单2</a></li>
                    <li><a href="#">二级菜单3</a></li>
                    <li><a href="#">二级菜单4</a></li>
                    <li><a href="#">二级菜单5</a></li>
                </ul>
            </li>
            <li>
                <a href="#">一级菜单7</a>
                <ul>
                    <li><a href="#">二级菜单1</a></li>
                    <li><a href="#">二级菜单2</a></li>
                    <li><a href="#">二级菜单3</a></li>
                </ul>
            </li>
            <li>
                <a href="#">一级菜单8</a>
                <ul>
                    <li><a href="#">二级菜单1</a></li>
                    <li><a href="#">二级菜单2</a></li>
                    <li><a href="#">二级菜单3</a></li>
                    <li><a href="#">二级菜单4</a></li>
                    <li><a href="#">二级菜单5</a></li>
                    <li><a href="#">二级菜单6</a></li>
                </ul>
            </li>

        </ul>
    </div>
</body>
</html>

css部分

*{
    margin: 0;
    padding: 0;
    transition: all 0.5s ease;
}
a{
    text-decoration: none;
}
ul{
    list-style: none;
}
.content{
    width: 80%;
    margin:0 auto;
    margin-top: 100px;
}
.content>ul{
    display: flex;
    justify-content: space-between;
}
.content>ul>li>a{
    display: block;
    padding: 10px 20px;
    color: skyblue;
}
.content>ul>li>a:hover{
    transition: 0.1s ease;
    border-bottom: 4px solid skyblue;
}
.content>ul>li>ul{
    height:0;
    overflow: hidden;
}
.content>ul>li>ul>li>a{
    display: block;
    padding: 10px 20px;
    background-color: skyblue;
    color: white;
}
.content>ul>li>ul>li>a:hover{
    opacity: 0.8;
}

js部分

var list = document.querySelectorAll(".content>ul>li");
for (let i = 0; i < list.length; i++) {
    if(list[i].querySelector("ul")){
        list[i].onmouseover = function(){
            this.querySelector("a").style.borderBottom = "4px solid skyblue";
            var y =this.querySelectorAll("ul>li").length;
            this.querySelector("ul").style.height = 41 * y +"px";
        }
        list[i].onmouseleave = function(){
            this.querySelector("a").style.borderBottom = "none";
            this.querySelector("ul").style.height = 0;
        }
    }
}
残·影
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 神器：用纯 CSS 实现可爱精致的扇形动画
canshanyin的博客
06-04 1510
CSS 是前端开发中不可或缺的重要工具，它可以让网页变得美丽而生动。今天我们将介绍如何使用纯 CSS 实现一个有趣的扇形动画。本文将从以下几个方面来讲解这个示例代码的实现过程：设计思路、HTML 结构、CSS 样式。
swift-iOSSwift下拉菜单列表
08-15
iOS Swift 下拉菜单列表
仿扇形菜单动画效果
03-29
写在Activity中的，已不推荐下载 博文链接：https://gundumw100.iteye.com/blog/1299953
js+css实现扇形导航效果
11-19
本文实例为大家分享了js+css实现扇形导航效果的具体代码，供大家参考，具体内容如下\ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>扇形导航</title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 100%; overflow: hidden; } #wrap{ height: 50px; width: 50px; /* background-color: pi
jquery中使用循环下拉菜单示例代码
10-25
在网页设计中，下拉菜单是一种常见的交互元素，它能够有效地节省空间并提供多选项的选择。在jQuery中，我们可以利用其强大的DOM操作功能来实现循环下拉菜单，使得用户在选择最后一个选项后能够重新回到第一个选项，...
css结合js制作下拉菜单示例代码
10-26
本文将详细介绍如何通过CSS（层叠样式表）和JavaScript结合来制作下拉菜单，并提供示例代码供参考。 首先，我们来看CSS部分。CSS用于定义下拉菜单的样式和布局。在提供的代码中，`ul#navmenu-h`是根菜单的ID选择器...
JS下拉缓冲菜单示例代码
10-26
下拉缓冲菜单效果想必大家都有见过吧，在本文使用JS轻松实现下，想学习的朋友可以参考下
组件Element-UI 2实现树形下拉选择框--详解（含代码&示例）
热门推荐
qq_53322872的博客
05-14 1万+
通过element-ui 2的方式实现树形下拉选择框的效果
vue+ElementUI el-select实现下拉列表分页的功能（下拉分页组件---新增多选功能及默认值回显示例）
wocwin的博客
02-28 1万+
vue+ElementUI el-select实现下拉列表分页的功能（下拉分页组件---新增多选功能及默认值回显示例）
一个很爽的下拉菜单示例
10-15
一个很爽html下拉菜单的例子，还是多级菜单。从那个什么网站下载下来的，在这里提供免费下载。 另外提供一个下拉菜单例子集合网页：http://paranimage.com/css-and-more-than-30-drop-down-menu-resources-js/
ul下拉菜单
11-15
五种实用简洁的系统头部下拉菜单框，使用ul列表实现。
WEB 扇形菜单
01-22
网页制作，扇形菜单，Web前端，源码共享，可在DW中直接运行
设置下拉菜单的几种方法
BambooStrip的博客
08-11 2401
下拉菜单实现方法
如何在Swift UI中创建下拉列表？
weixin_42610770的博客
12-01 533
我试图在Swift UI中创建一个下拉列表。文章的大部分建议使用覆盖来创建相同的内容。尝试了下面的一些示例代码，但是当下拉菜单出现时，它会出现在下一个内容的下面。如图所示，如何使其看起来像正常的下拉列表？我观察到，当我们添加HStack时，它会出现在其他视图的顶部，这是意料之中的，但当我尝试添加HStack时，它会出现在UI后面。
Select2下拉框示例
chengju7332的博客
05-19 228
在项目中，需要用到下拉框，于是找到了这个比较好用的select2插件，功能很强大，几乎能满足所有的下拉选择需求,选中之后可以点击取消选择的，另，本例连同ajax获取选择的数据一并提供。 <!DOCTYPE html> <html> <head> ...
Spring MVC下拉框示例
一名可爱的技术搬运工
05-22 1578
在Spring MVC中，表单标签– <form：select /> ， <form：option />或<form：options />用于呈现HTML下拉框。 请参阅以下示例： //SimpleFormController protected Map referenceData(HttpServletRequest request) throws Ex...
swift-MJRefresh下拉刷新,上拉加载(分页)
wa172126691的博客
05-09 7371
// // BannerViewController.swift // iosTest // // import UIKit import SwiftyJSON import Alamofire import MJRefresh //实现SliderGalleryControllerDelegate接口 class BannerViewController: UIViewControlle...
javascript下拉菜单示例
最新发布
06-24
在JavaScript中创建下拉菜单（通常称为`<select>`元素）非常简单。这里有一个基本的示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript下拉菜单示例</title> </head> <body> <label for="dropdown">请选择一个选项:</label> <select id="dropdown" onchange="showValue()"> <option value="">请选择</option> <option value="option1">选项1</option> <option value="option2">选项2</option> <option value="option3">选项3</option> </select> <p id="selectedValue"></p> <script> function showValue() { var dropdown = document.getElementById("dropdown"); var selectedOption = dropdown.options[dropdown.selectedIndex].value; document.getElementById("selectedValue").innerText = "你选择了: " + selectedOption; } </script> </body> </html> ``` 在这个例子中，我们创建了一个包含几个选项的下拉列表。当用户从下拉菜单中选择一个选项时，`onchange`事件会被触发，调用`showValue`函数。这个函数获取当前选中的`<option>`的值，并将其显示在页面上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值