开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js实现简单三级菜单

基础概念

三级菜单通常指的是一个嵌套的导航结构，其中包含三个层级的菜单项。在前端开发中，这种结构可以通过HTML、CSS和JavaScript来实现。

相关优势

用户体验：清晰的层级结构有助于用户更好地理解和导航网站内容。
可维护性：使用模块化的方式编写代码，便于后期维护和扩展。
灵活性：可以根据需求动态地添加或删除菜单项。

类型

静态菜单：菜单内容和结构在HTML中预先定义好。
动态菜单：菜单内容和结构通过JavaScript动态生成。

应用场景

电商网站：分类导航。
企业官网：服务或产品分类。
管理后台：功能模块导航。

实现示例

以下是一个简单的三级菜单的实现示例：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三级菜单示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav class="menu">
        <ul>
            <li>
                <a href="#">菜单1</a>
                <ul>
                    <li>
                        <a href="#">子菜单1-1</a>
                        <ul>
                            <li><a href="#">子菜单1-1-1</a></li>
                            <li><a href="#">子菜单1-1-2</a></li>
                        </ul>
                    </li>
                    <li><a href="#">子菜单1-2</a></li>
                </ul>
            </li>
            <li>
                <a href="#">菜单2</a>
                <ul>
                    <li><a href="#">子菜单2-1</a></li>
                    <li><a href="#">子菜单2-2</a></li>
                </ul>
            </li>
        </ul>
    </nav>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

.menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu > ul > li {
    position: relative;
}

.menu ul ul {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.menu li:hover > ul {
    display: block;
}

.menu a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #333;
}

.menu a:hover {
    background-color: #f0f0f0;
}

JavaScript (script.js)

document.addEventListener('DOMContentLoaded', function() {
    const menuItems = document.querySelectorAll('.menu > ul > li');

    menuItems.forEach(item => {
        item.addEventListener('mouseenter', function() {
            const subMenu = this.querySelector('ul');
            if (subMenu) {
                subMenu.style.display = 'block';
            }
        });

        item.addEventListener('mouseleave', function() {
            const subMenu = this.querySelector('ul');
            if (subMenu) {
                subMenu.style.display = 'none';
            }
        });
    });
});

可能遇到的问题及解决方法

问题1：菜单展开和收起不流畅

原因：可能是由于CSS过渡效果未设置或JavaScript事件处理不当。

解决方法：

添加CSS过渡效果：
添加CSS过渡效果：
确保JavaScript事件处理逻辑正确。

问题2：菜单在不同屏幕尺寸下显示异常

原因：可能是由于CSS媒体查询未设置或布局方式不适应响应式设计。

解决方法：

添加响应式设计的CSS媒体查询：
添加响应式设计的CSS媒体查询：

通过以上示例和解决方法，可以实现一个简单且功能完善的三级菜单。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Python实现简单的三级菜单

while Tag: print('\033[31m%s \033[0m' % '请输入序号'.ljust(20, '*')) print('\033[31m***输入back返回上一级菜单...current_layer = parent_layer.pop() else: print('\033[31m%s \033[0m' % '已经到达最上级菜单

2.3K9 0

两、三级联动菜单，简单的实现（2）

在上一篇文章中两个联动菜单，简单的实现我写了一个插件，但是只支持两个链接，完好下支持二、三级联动 /** * jQuery Linkage Menu * * Copyright 2014, sunyingyuan...* QQ: 1586383022 * Email: yingyuansun@163.com * * 二级/三级联动菜单 * 支持二级或三级联动。...支持页面静态json和AJAX动态从后台获取值 * * 简单用法介绍： * HTML代码： * * 一级菜单默认显示名称...假设有三级菜单，同上 * * JS代码: * 引入jQuery和jquery.linkageMenu.js后 * 当中jquery.linkageMenu.js必须在jQuery之后引入 *...': '', //三级菜单option值 'selectOneParam': 'selectOneValue', //向后台获取二级菜单的值时，一级菜单的參数名称，默认是

2.1K2 0

python 字典实现三级菜单

简介：1.用字典建立一个省市县的三级菜单　　　2.开始显示所有的省份，输入要进入的省份之后，显示该省份下的所有市，输入市显示该市下的所有县　　　3.在每一级菜单下都可以返回到上一层菜单　　　4.随时可以退出..."保定2县": {}, 49 "保定3县": {} 50 } 51 } 52 } 53 54 current_layer = menu # 实现动态循环...current_layer = parent_layers.pop() # 取出列表的最后一个元素，因为它就是当前层的父级 69 else: 70 print("无此项") 三级菜单

1.2K1 0

Python下三级菜单实现

今天学了一个三级菜单，甚是开心！！！ 1.流程图 2.代码如下： #!

9771 0

java使用递归实现三级菜单

java使用递归实现三级菜单 javaCopy codeimport java.util.*; public class Menu { private static Map<String...input.equals("back")) { System.out.println("请选择三级菜单（输入数字 1/2/3）或返回上一级（输入 back）：");...菜单数据使用一个 Map 存储，键为一级菜单项，值为该菜单项下的二级菜单列表。在 main 方法中调用 printMenu 方法开始执行程序。...如果用户选择了一个有效的二级菜单项，则调用 printSubSubMenu 方法打印该二级菜单项的三级菜单。 printSubSubMenu 方法同样循环等待用户输入三级菜单项或返回上一级。...在这个示例中，三级菜单项是固定的，因此只需要打印三个选项。如果用户选择了一个有效的三级菜单项，则显示所选项的信息。在这个示例中，使用了递归方法来实现三级菜单的显示。

1.5K6 0

python 三级菜单

三级菜单: 打印省、市、县三级菜单。...], '宁波' : ['海曙','江东','江北','镇海','余姚'], '温州' : ['鹿城','龙湾','乐清','瑞安','永嘉'] } } 打印1级菜单...print(zone.keys()) 对于zone而言，只有3个key,分别是山东，江苏，浙江执行输出 dict_keys(['山东', '江苏', '浙江']) 用户选择菜单的时候，如果输入中文，...打字比较麻烦，菜单列表需要有一个编号。...转换为列表 #省列表 province_list = list(zone.keys()) print(province_list) 执行输出 ['山东', '江苏', '浙江'] 下一步，需要打印1级菜单

1.2K2 0

实现一个三级菜单小功能

/usr/bin/env python3 2 ''' 3 需求：三级菜单 4 三级菜单，依次进入子菜单 5 ''' 6 City = { 7 '北京':{ 8

6372 0

layui三级菜单渲染

今天给大家讲解一下layui的三级动态加载菜单含后端代码。我是最近刚学的layui，非常感谢贤心大神。开发出这么牛逼ui的框架。...声明：KingYiFan前段是渣渣，本次讲解用的前端js并非KingYiFan亲自封装只是稍作修改，非常感谢封装三级菜单CSDN的大神：yufengaotian 下图就是三级菜单效果。... 三级菜单展示...class="layui-nav-more">'; ulHtml += ''; //三级菜单...list); List trees_ = TreeBuilder.buildByRecursive(list); } } ---- 这就是layui动态三级菜单渲染

2.4K1 0

基于jQuery的AJAX实现三级联动菜单

最近学习jQuery，所以就写了一个关于中国省市县/区的三级联动菜单，权当相互学习，相互促进，特此记录。下面是嵌套js的html文件：三级联动菜单 js"> //生命一个xml变量，用于存储ajax请求返回的xml信息...="' + id + '">' + name + ''); }); } 地区显示的三级联动菜单

6.5K2 0

最简单的纯js实现点击展开二级菜单功能

我最近就遇到做个点击展开二级菜单的要求，当然只能用原生的JS去写来实现，我借鉴了网上的一个案例，补充一下，分享一下：如果，默认打开页面进来时二级菜单是隐藏的，需要点击才能展现二级菜单，再点击就是隐藏二级菜单...这里有两个点，实现展现和隐藏用display=”block“和display=”none”,另外就是要做一个判断，if else的判断当前是block还是none。 <!...li:hover{ cursor: pointer; } 一级菜单...2 二级菜单2 二级菜单2 二级菜单2 二级菜单2...如果，你的页面默认进来二级菜单是展现的，点击时才关闭。直接把style标签的样式display=”none”去掉就可以。同时需要修改一下js。

4.3K2 0

Python——三级菜单（字典的应用）

最近几天在做的一个题目：三级菜单，按省、市、县三级做一个查询菜单，要求如下， 1.可逐级查询（比如输入山东省，跳出山东所有市，再输入青岛市，可展示青岛所有县） 2.输入b可以返回上一层，比如莱西一级，...想了许久，感觉这题目用函数，递归思路很简单。但是如果还没学函数的情况下，写了n个小时，我崩溃了，各种循环，跳转。一定是哪里出问题了，果然，积硅步至千里之外。...1002——>100202-——>10020203，下一级比上一级多2位数，前面n位相同；如果要返回上一级，就更简单了，位数少2个，父层键值也相应少2位。

1.1K2 0

Python——三级菜单（字典＋文件读写）

三级菜单，按省、市、县三级做一个查询菜单，要求如下， 1.可逐级查询（比如输入山东省，跳出山东所有市，再输入青岛市，可展示青岛所有县） 2.输入b可以返回上一层，比如莱西一级，输入b返回上级青岛，再输入...这个是上上期的三级菜单的题目。...后来呢，又学了文件读写的章节，然后题目又延伸了一下，延伸内容如下： 1.将三级菜单存入文本文件中 2.展示省市县，数据存在文本中； 3.对菜单实现增删改，删、改容易理解，增么，就是用户增加一个城市...第3条中的增乍一看挺简单，琢磨一下，要处理文本，还有编码貌似挺复杂的。...parent_layers: current_layer = parent_layers.pop() else: print('目前为最上级菜单

1.3K4 0

Vue+abp增加三级菜单

categories: Vue+abp增加三级菜单 position: problem --- 原生vue版的abp只支持2级菜单，项目需要增加成3级菜单，一番搜索。...，则遍历三级菜单 if (!...，则第三级菜单无法用权限控制，第二级菜单也必须定义权限才能显示。...如果第二级菜单只是目录，第三级菜单都没有权限，那么第二级目录是不应该显示出来的。...，在二级菜单下像第一级菜单下增加二级菜单一样增加三级菜单了，二级菜单的权限可以是undefined，二级菜单的component要定义成刚才增加的路由组件,这样不需要在后端定义具体的权限，自动根据三级菜单的权限决定是否显示二级菜单

1.3K1 0

js代码实现下拉菜单

效果 js代码： function ShowSub(li) {//函数定义 var subMenu = li.getElementsByTagName

8.3K3 0

利用JS实现一个简单的二级联动菜单

前几天在看js的相关内容，所以就简单写了一个二级联动菜单。分享一下。 1 2 3 4 5 JS实现二级联动菜单</title...['广州市','惠州市','汕头市','珠海市','佛山市','中山市','东莞市'] 25 ]; 26 //网页加载完成，初始化菜单

3.3K2 0

yii2实现三级菜单及以上(只提供核心代码)

'trees'=>$trees, 'articleCates'=>$articleCates ]); 视图：一级菜单...： $val['title'] 二级菜单： $vall['title] 三级菜单： $valll['title']

3452 0

三级侧边栏-树形菜单案例效果

sec-class > li { 80 padding-left: 12px; 81 } 82 83 .sec-class > li:hover { 84 color: #fff; 85 } js...45 } 46 }) 47 48 }) js懒得整理了。。。

4.9K5 0

项目实践，实现一个简单前端js树状竖型风格导航菜单

在项目开发过程中，有时候会遇到一些需要开发人员实现的一些js效果，大公司会有专业的前端设计人员设计界面，而小公司可能就需要后端开发工程师自己来实现，下面是一个我用过的一个js树状竖型风格导航菜单代码。...2.熟练使用SQL语法及mysql或oracle、sql server数据库应用开发； 3.熟练运用 js、html、css 等前端开发技术； 4.熟悉tomcat、jetty等服务器软件； 5.良好的工作态度.../1999/xhtml"> 导航菜单特效.../jquery-2.1.0.min.js" type="text/javascript"> $(document).ready...--nav--> 这是一个简单前端代码实例，注意要自己下载jquery引入项目，代码仅供参考。

2K1 0

js树形菜单

DOCTYPE html> 树形菜单 js/tree.js"> <!...cover; background-repeat: no-repeat; } /*.test{display: block;background-repeat: no-repeat;}*/ 第三部：JS...设计 /*树形菜单：冒泡排序*/ var menu,subMenus,menuIcon; function init(){ menuArray=document.getElementById('outerul

591 0

python3 三级菜单-基础版

data = { "北京":{ "东城区":{ "安定门":["国子监","孔庙","钟楼"], "建国门":["金宝街","长安街","西街"], "朝阳门"...

6711 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭