21xrx.com
2024-12-23 02:41:56 Monday
登录
文章检索 我的文章 写文章
JavaScript二级菜单：构建交互性强的网页导航
2023-06-14 22:06:05 深夜i     --     --
JavaScript 二级菜单 交互性强

一级菜单不再满足现代网站所需的导航方式，因为在页面上面就能显示所有的一级菜单，这导致视觉效果不佳，而且也限制了网页导航的发展空间。因此，二级菜单变得越来越常见。二级菜单不仅能够更好地组织信息，还可以将其所有链接内容汇聚到一个页面，从而增强页面的互动性。在本教程中，我们将利用 JavaScript 构建一个二级菜单的例子。

首先，我们将用 HTML 和 CSS 创建一个布局和美观的一级菜单。在 HTML 中，我们可以使用无序列表（ul）和链接（a）来创建菜单项。在 CSS 中设置菜单项样式，包括字体、背景和颜色等。






nav ul


 list-style: none;


 margin: 0;


 padding: 0;


nav li


 display: inline-block;


 margin-right: 20px;


nav a


 display: block;


 padding: 10px 20px;


 text-decoration: none;


 color: #333;


 background: #f2f2f2;


nav a:hover


 color: #fff;


 background: #ed1c24;

接下来，我们使用 JavaScript 来实现二级菜单的行为。我们将使用事件监听器来检测鼠标是否悬停在菜单上。如果鼠标悬停在菜单上，我们将显示下拉菜单。如果鼠标离开菜单，则隐藏下拉菜单。



// 获取菜单项列表和菜单项


const menuItems = document.querySelectorAll("nav ul li");


const subMenus = document.querySelectorAll("nav ul li ul");


// 为每个菜单项添加事件监听器


menuItems.forEach((menuItem, index) => {


 menuItem.addEventListener("mouseenter", () => {


  // 显示下拉菜单


  subMenus[index].style.display = "block";


 });


 menuItem.addEventListener("mouseleave", () => {


  // 隐藏下拉菜单


  subMenus[index].style.display = "none";


 });


});

这里有一个网页演示的效果，通过这个例子，你可以更好地了解如何使用 HTML、CSS 和 JavaScript 来构建一个交互性强的二级菜单。

三个

  
  

评论区

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