文章/答案/技术大牛

发布

js横向二级导航菜单

基础概念

JavaScript 横向二级导航菜单是一种常见的网页交互元素，它允许用户通过点击主菜单项来展开或收起对应的子菜单项。这种菜单通常用于网站的导航栏，以提高用户体验和网站的可访问性。

类型

静态菜单：菜单内容和结构在页面加载时就已经确定。
动态菜单：菜单内容通过 JavaScript 动态生成，通常与后端数据交互。

应用场景

企业网站：展示不同部门或服务的项目。
电商网站：分类展示商品。
博客平台：分类文章或标签。

示例代码

以下是一个简单的横向二级导航菜单的 JavaScript 实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>横向二级导航菜单</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }
        li {
            float: left;
        }
        li a, .dropbtn {
            display: inline-block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        li a:hover, .dropdown:hover .dropbtn {
            background-color: #111;
        }
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1;
        }
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: left;
        }
        .dropdown-content a:hover {
            background-color: #f1f1f1;
        }
        .dropdown:hover .dropdown-content {
            display: block;
        }
    </style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Services</a>
    <div class="dropdown-content">
      <a href="#">Service 1</a>
      <a href="#">Service 2</a>
      <a href="#">Service 3</a>
    </div>
  </li>
  <li><a href="#contact">Contact</a></li>
</ul>

</body>
</html>

遇到的问题及解决方法

问题1：二级菜单无法展开或收起

原因：可能是 JavaScript 代码中的事件绑定或样式设置不正确。

解决方法：

确保 .dropdown:hover .dropdown-content 的样式正确设置为 display: block;。
检查是否有其他 JavaScript 代码干扰了事件绑定。

问题2：菜单在不同设备上显示不一致

原因：可能是 CSS 样式在不同屏幕尺寸下的适应性不佳。

解决方法：

使用媒体查询（Media Queries）来调整不同屏幕尺寸下的样式。
确保使用响应式设计原则，如 flexbox 或 grid 布局。

问题3：菜单项过多导致页面布局混乱

原因：可能是菜单项的数量超过了页面的可用宽度。

解决方法：

使用 CSS 的 flex-wrap 属性来允许菜单项换行。
考虑使用下拉菜单或侧边栏导航来优化布局。

通过以上方法，可以有效解决常见的横向二级导航菜单问题，提升用户体验和网站的整体质量。

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

有帮助

没帮助

横向切换导航无法滚动

jquery、html、css

在横向视图中，我有一个移动导航，可以打开，但不能向下滚动查看更多菜单选项。当导航完全关闭时，这在某种程度上是可以的，但是我在一个项目上进行了二级切换，从而阻止了我向下滚动。它的样式并没有什么特别之处-- jQuery会在汉堡菜单图标上打开/关闭，并通过“太阳能服务”链接来打开它。菜单打开

浏览 0提问于2016-03-17得票数 0

1回答

Bootstrap子菜单放置错误

css、drop-down-menu、twitter-bootstrap、submenu

第二级子菜单被放置在第一级子菜单的第一元素旁边，当具有较少的第二级子菜单元素的第一级子菜单的较低元素时，由于鼠标悬停在菜单之外，用户不能导航到新的第二级子菜单。如何将第二级子菜单放在每个第一级子菜单所选元素的旁边？这里是JSFiddle，检查元素，并尝试导航到它们的子菜单:内存设备，打印机，笔记本电脑包，投影仪等。

浏览 1提问于2013-03-16得票数 1

回答已采纳

1回答

将缩略图添加到二级wordpress导航菜单

wordpress、menu、thumbnails

我想知道有什么方法可以在wordpress导航菜单的二级子页中添加缩略图。下面是wordpress导航菜单的结构带标题的菜单第二级>>>缩略图请查看截图。简而言之，我想使相同的功能，我可以通过wp菜单选项控制。谢谢

浏览 3提问于2012-11-30得票数 3

回答已采纳

4回答

什么是针对导航栏/菜单的符合WAI的实现？

menu、navigation、menubar、wai-aria

我们正在实现(即增加)WAI支持到一个门户网站的主导航菜单。菜单如下所示：菜单是通过经典的<ul> / <li> / <a> DOM树来实现的，它使用CSS样式，看起来像水平选项卡。在这样的CSS导航菜单上，我找不到任何特定目标的示例。我经常发现的最近的小部件是菜单、MenuBar和TabPanel。当然，我还查看了 (这个问题最初是在这里发布的)。我想说的是，这些小部件中没有一个与(CSS)导

浏览 3提问于2012-09-05得票数 42

回答已采纳

1回答

在菜单块中显示二级导航的问题

7、routes、blocks、navigation

我有一个主导航菜单，它也通过菜单块为所有二级页面提供导航。这很好--我有一个额外的主导航菜单，可以在用户的自由裁量权下与主导航进行切换，-this也可以正常工作。然而，在菜单块中显示第二个菜单是很困难的。我已经匹配了两个菜单块的设置，因此它们分别与正确的菜单相关联，但是在第二个菜单块上，只有在包含顶级链接的情况下才会显示。所以，如果我只想显示第二级</em

浏览 0提问于2012-11-05得票数 1

1回答

我已经按我想要的方式设置了导航菜单(top nav = main-nav)，但是我一直想不出一种方法来将下拉菜单(第二级导航)居中对齐到其父导航项目，而不影响当前的布局或功能。导航列表很难用中间的菜单设置，而且通过Wordpress仍然是动态的。我使用了display:table和display:table-cell的组合来完成此操作。导航的顶层看起来很棒，但下拉的二级却不对齐。任何建议都将不胜感激。提前感谢！干杯

浏览 1提问于2013-08-22得票数 0

1回答

当二级UL滑下时的滴答背景

jquery、html、css

我正在尝试制作一个2级的垂直导航菜单。现在发生的事情是，当二级导航所属的一级导航悬停时，我可以显示二级导航。我的问题是，当二级菜单滑下时，使其看起来像丝带的元素的背景不会以块的形式显示，它看起来会先滑下，然后当它完成效果时背景会显示出来。

浏览 1提问于2012-05-14得票数 0

回答已采纳

1回答

水平滚动菜单的问题

html、css、bootstrap-modal

我面临的问题与横向滚动菜单进入我的网站。 

浏览 2提问于2020-10-16得票数 0

回答已采纳

1回答

下拉所有图像...就快成功了。如何操作

css

在上，当你将鼠标悬停在导航标题“服务”上时，会出现一个下拉列表。然后，当你将鼠标悬停在导航和鼠标标题“修复”上时，你会看到一个二级菜单出现。我想将第二个黄色的子菜单向上移动，使其与其父菜单“修复”对齐。但是，将top:0和/或任何页边距添加到nav li ul li ul会导致二级黄色子导航始终显示，而不是仅在悬停时显示。有什么建议吗？

浏览 1提问于2011-01-13得票数 0

2回答

Twitter引导程序菜单-响应问题

javascript、html、css、twitter-bootstrap、responsive-design

有没有办法使它在导航缩小时，所有或任何下拉菜单都会展开？因此，当用户触摸导航并下拉时，所有的下拉导航项目都已经完全展开了吗？我必须将鼠标悬停在菜单项上才能获得二级菜单。有没有办法让这个和所有其他的下拉菜单都已经展开？

浏览 4提问于2012-11-29得票数 3

回答已采纳

1回答

OracleAPEX5.1侧导航栏图标不垂直对齐

html、css、oracle-apex-5.1

在这个应用程序中，我使用侧导航菜单作为主菜单。第二级菜单、列表项和图标不是垂直对齐的。为了解决这个问题，我尝试拦截模板默认值，但它不起作用。我认为，我需要添加style="vertical-align:middle;"到二级菜单项的图标跨度，但我不知道我可以把这些代码放在哪里。有人能帮我吗？

浏览 4提问于2017-03-09得票数 1

回答已采纳

1回答

在现有jQuery折叠下拉菜单的内容上添加下拉框，该下拉框可将内容向下推

javascript、jquery、css、jquery-ui、accordion

我正在尝试找到一种方法，有一个二级下拉菜单位于一个风格的下拉菜单下的内容的顶部。jQuery accordion style下拉菜单故意下拉下面的内容；但是，我不希望第二级下拉菜单下拉下拉内容。这个页面上的主导航就是我想要找到的解决方案：

浏览 2提问于2011-04-05得票数 1

1回答

如何触发javascript响应式菜单在单击时隐藏？

javascript、responsive-design

我使用下面的JS来显示和配置一个特定于响应的菜单。基本上，当一个h4被点击时，一个带有my my an #二级导航的列表就会向下滑动。我在带有页面锚点的页面上使用此菜单，因此我希望在单击其中一个菜单项时菜单变为slideUp。我该如何使用下面的代码来实现这一点呢？谢谢你的帮助。

浏览 3提问于2013-04-24得票数 0

回答已采纳

1回答

如何使用adf导航窗格创建菜单和子菜单

oracle-adf

我正在尝试使用adf导航窗格创建一个带有子菜单的完整菜单。我已经有一个无界的adf任务流，它的adf菜单模型是正确生成的。但是导航窗格只生成第一个导航级别，而不是更低的级别。是否存在使用adf导航窗格实现菜单和子菜单的方法？

浏览 5提问于2013-08-20得票数 1

1回答

我需要一些简单的设置html/css菜单或js

html、css、menu、sticky

你好，我正在尝试做一个粘性的菜单，“粘”到窗口的顶部后，让我们说150px。这是我的二级菜单，在用户滚动过我的标题和导航栏之后，我希望它停留在我想要的地方，然后用滚动条停留在窗口的顶部。webkit-sticky;position: -ms-sticky;position: sticky;但我希望二级菜单的“粘性”从我的标题和导航栏开始。

浏览 1提问于2014-03-18得票数 0

2回答

发行Bootstrap Navbar css

html、css、twitter-bootstrap-3、navbar

我有一个引导导航栏与一些自定义代码，以便能够使用二级子菜单。我遇到的问题是，当我单击菜单项1，然后子1(或子2)打开第二级子菜单时，包含子1或子2的li项显示一个白色背景，每当鼠标离开这个子项或子2项时。任何帮助删除这白色背景将是非常感谢。

浏览 1提问于2015-08-05得票数 1

回答已采纳

4回答

触摸友好的嵌套导航菜单的解决方案？

html、css、responsive-design、navigation

在创建响应式网站时，我遇到的一个常见问题是如何制作一个适用于触摸设备的多级导航菜单(3级或更多)。我见过很多插件和技术，但它们中的大多数都失败了，因为它们不允许二级页面既充当指向页面的链接，又充当子菜单中的子菜单中的子项的父项。一些技术通过在单击父页面名称转到实际页面时显示子菜单项的箭头图标来解决此问题。但在移动设备上，这些图标通常是非常小的目标，因此很难使用。这个问题有没有其他的解决方案( jquery或javascript插件，或者直接的CSS/JS代码)

浏览 1提问于2014-05-30得票数 0

1回答

office中的上下文菜单问题-结构-第二次单击时的ui

javascript、office-ui-fabric

我们正在开发Office UI Fabric JS 1.2.0。问题与具有子菜单项的上下文菜单有关。当您打开第二级菜单，然后单击菜单上的任意位置时，第一级菜单将关闭，第二级菜单将重新对齐到页面的左上角。我们在下一个版本的fabric中也找不到解决方案。

浏览 20提问于2017-07-19得票数 1

回答已采纳

2回答

如何处理依赖于URL参数的导航

php、url、menu、navigation、parameter-passing

在我的PHP应用程序中，我有一个主导航，它指向不同的“跟踪器”，例如，我在URL的末尾添加了一个参数"?trk=1“。我有一个二级导航，我需要不同的“跟踪器”在系统中。从主跟踪器页面，我可以很容易地获得"trk“参数的id，并在此基础上创建二级导航。但是，我的应用程序在"Tracker“级别下有很多子页面。例如，每个Tracker都有程序，其中程序有项目，等等。这样，我的tracker.header.php文件(在我的应用程序中运行在跟踪器级别以下的所有级别上)可以正确地为

浏览 0提问于2011-03-12得票数 0

1回答

Liferay 7.2打印自定义菜单

themes、liferay

我在后端创建了一个自定义导航菜单"link-utili“ 我有主导航，但我需要在页脚之前的辅助导航，但我没有任何解决方案。

浏览 20提问于2020-10-21得票数 0

点击加载更多

js横向二级导航菜单

基础概念

相关优势

类型

应用场景

示例代码

遇到的问题及解决方法

问题1：二级菜单无法展开或收起

问题2：菜单在不同设备上显示不一致

问题3：菜单项过多导致页面布局混乱

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐