首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js原生二级菜单

在JavaScript中实现原生二级菜单通常涉及到HTML、CSS和JavaScript的结合使用。以下是一个简单的示例,展示如何创建一个基本的二级菜单。

HTML结构

代码语言:txt
复制
<!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>
    <ul class="menu">
        <li><a href="#">菜单1</a>
            <ul class="submenu">
                <li><a href="#">子菜单1-1</a></li>
                <li><a href="#">子菜单1-2</a></li>
            </ul>
        </li>
        <li><a href="#">菜单2</a>
            <ul class="submenu">
                <li><a href="#">子菜单2-1</a></li>
                <li><a href="#">子菜单2-2</a></li>
            </ul>
        </li>
    </ul>
    <script src="script.js"></script>
</body>
</html>

CSS样式

代码语言:txt
复制
/* styles.css */
.menu {
    list-style-type: none;
    padding: 0;
}

.menu > li {
    display: inline-block;
    position: relative;
}

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

.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    list-style-type: none;
    padding: 0;
    min-width: 150px;
}

.submenu li {
    display: block;
}

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

JavaScript交互

代码语言:txt
复制
// script.js
document.addEventListener('DOMContentLoaded', function() {
    const menuItems = document.querySelectorAll('.menu > li');

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

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

解释

  1. HTML结构:创建一个包含主菜单和子菜单的列表结构。
  2. CSS样式:设置菜单的基本样式,并使用.submenu类来控制子菜单的显示和隐藏。
  3. JavaScript交互:添加事件监听器,当鼠标悬停在主菜单项上时显示子菜单,当鼠标离开时隐藏子菜单。

应用场景

  • 网站导航:在网站的顶部或侧边栏中使用二级菜单来组织内容。
  • 应用界面:在桌面或移动应用中使用二级菜单来提供额外的功能选项。

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

  1. 子菜单不显示:确保CSS中的.submenu类设置了display: none;,并且在JavaScript中正确地切换了display属性。
  2. 子菜单定位问题:确保子菜单的position属性设置为absolute,并且父元素具有position: relative;
  3. 兼容性问题:测试在不同浏览器中的显示效果,确保CSS和JavaScript在所有目标浏览器中都能正常工作。

通过这种方式,你可以创建一个简单而有效的二级菜单,提升用户体验。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • JS-鼠标经过显示二级菜单

    会在加完120后再执行,没想到他先执行的这个,并且弹出ullistElement,即说明他找到了subNav的ul, 问题来了,当加载完成后,请你尝试把鼠标再放到二级菜单上移动一下,你没选择一个二级菜单...,他就是把这三个alert再执行一遍,然后你就会看到ul的长度又加了20,当你不停的上下晃动鼠标,二级菜单就会不停的添加。...原因:这里,通过这个代码:alert(aLi.length);原因就明显了,因为开头的aLi,获得的是body中所有的li,包括二级菜单的。...就是说你在二级菜单的每一个li上晃一下,他都会认为你是在重新执行了aLi.onmouseover这个代码,流程就再走了一遍。...} } }   后来我也发现了收缩不干净,总是多出外面几像素,但是我把border删掉他就收缩干净了,我不知道在js

    8.2K100

    html二级菜单:DIV+CSS制作二级菜单(横排二级下拉菜单)以及二级菜单出现错位怎么解决「建议收藏」

    html二级菜单制作(横排二级下拉菜单)以及二级菜单出现错位怎么解决 摘要:DIV+CSS制作二级菜单(横排二级下拉菜单)以及二级菜单出现错位怎么解决(解决办法放在代码下面) 1.先看一下最终的效果图...布局思路:通过 ul li ul li的嵌套以及使用div 、css 、a三种标签来一起实现二级菜单。 具体步骤如下: 1....3.接着在一级菜单里嵌入二级菜单即一级菜单二级菜单 4.嵌入后接下来控制二级菜单的样式,通过绝对定位使二级菜单出现在一级菜单下然后隐藏即...5.最后,当鼠标移动到一级菜单上时二级菜单这时时显示不出来的,还需要添加“ul li:hover ul{ display:block}”使二级菜单显示出来;下面的文字部分和图片部分是用两个小盒子,通过类选择器独立控制各自的样式...注意点:盛放二级菜单的盒子宽度,要根据标签的宽度来决定 ;比如你的ul li {width: 60px;height:30px} 有六个一级菜单,那么60*6=360那么你的盒子的宽度要至少大于300左右

    5.7K10

    纵向、横向导航菜单及二级弹出菜单

    一、纵向导航菜单及二级弹出菜单 首先在body中添加一个div标签,其中包含ulli ul的标签结构存放网站菜单,效果如下: <%@ page language="java" import="java.util...a{color:#000;text-decoration:none;} /*设置鼠标悬浮超链接上时改变字体颜色*/ a:hover{color:#F00;} 下面是将同一子菜单下的菜单移动位置变为父级菜单的一部分...我们要实现的效果是子菜单不占据空间,所以可以使用position:absolute;让子元素脱离文档流,使用left和top属性确定子菜单相对于父级菜单的位置。...,当鼠标离开父级菜单时隐藏子菜单,因此可以使用display的none属性隐藏菜单,当鼠标移动到父级菜单上时使用display:block显示菜单。...li>合作媒体 二、横向导航菜单及二级菜单

    5.4K30

    jQuery二级菜单的显示隐藏

    在jQuery中创建二级菜单的显示和隐藏可以通过使用事件处理函数和CSS样式来实现。HTML 结构 首先,需要创建适当的HTML结构来表示二级菜单。一种常见的方法是使用嵌套的和元素。...上述示例中,我们创建了一个包含两个菜单项和对应的二级菜单的导航栏。...每个菜单项都包含一个链接,以及一个嵌套的无序列表来表示二级菜单。CSS 样式 接下来,需要使用CSS样式来控制二级菜单的显示和隐藏。可以通过设置样式的display属性来实现。...然后,通过为父级菜单项设置:hover伪类选择器,当鼠标悬停在菜单项上时,显示相应的二级菜单。...当鼠标进入菜单项时,使用slideDown()方法显示相应的二级菜单。当鼠标离开菜单项时,使用slideUp()方法隐藏二级菜单。

    3.3K30
    领券