21xrx.com
2024-12-23 08:23:25 Monday
登录
文章检索 我的文章 写文章
如何实现JavaScript二级导航菜单
2023-06-16 17:03:28 深夜i     --     --

在网页设计中，导航菜单是必不可少的组成部分。当导航菜单比较多时，为了方便用户的操作，常常采用二级甚至多级菜单的方式来组织导航。本文将介绍如何使用JavaScript实现一个二级导航菜单。

首先，我们需要用HTML和CSS构建一级导航菜单和二级菜单的样式。例如，以下代码展示了一个基本的导航菜单样式：






nav ul ul


 display: none;


nav ul li:hover > ul


 display: block;


nav ul


 background: #efefef;


 display: inline-block;


 list-style: none;


 position: relative;


nav ul li


 float: left;


nav ul li a


 display: block;


 padding: 10px 20px;


 text-decoration: none;


nav ul ul


 background: #fff;


 border-radius: 0px;


 padding: 0;


 position: absolute;


 top: 100%;


nav ul ul li


 float: none;


 position: relative;


nav ul ul li a


 padding: 10px 20px;


 text-decoration: none;

然后，我们需要针对二级菜单的显示与隐藏，添加一些JavaScript代码。以下是一个简单的实现：



var submenus = document.querySelectorAll('nav ul ul');


for (var i = 0; i < submenus.length; i++) {


 var parent = submenus[i].parentNode;


 parent.classList.add('parent');


 var link = parent.querySelector('a');


 link.addEventListener('click', showSubmenu);


}


function showSubmenu(event) {


 event.preventDefault();


 var submenu = this.parentNode.querySelector('ul');


 if (submenu) {


  submenu.classList.toggle('show');


 }


}

以上代码中，我们首先找到所有的二级菜单，然后为每个菜单的父级元素添加一个`parent`类名，并找到父级元素中的``标签，并添加一个点击事件监听器。当用户点击父级``标签时，会触发`showSubmenu`函数。这个函数首先阻止默认事件，然后查找当前父级元素下的`

  
  

评论区

{{item['qq_nickname']}}
()
回复
回复