js下划线跟随导航菜单
在JavaScript中实现下划线跟随导航菜单的效果，通常涉及到CSS和JavaScript的结合使用。以下是一个简单的示例，展示了如何实现这一效果：
基础概念
- CSS选择器：用于选择HTML元素并应用样式。
- JavaScript事件监听：用于监听用户的交互行为，如鼠标移动。
- DOM操作：用于动态修改HTML文档的结构、样式或内容。
相关优势
- 用户体验：动态效果可以吸引用户注意力，提升导航的直观性。
- 响应式设计：适应不同屏幕尺寸和设备，保持良好的交互体验。
类型与应用场景
- 水平导航菜单：常见于网站顶部或侧边栏。
- 垂直导航菜单：适用于侧边栏或移动端应用。
示例代码
HTML结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Menu</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="navbar">
<ul class="nav-list">
<li class="nav-item"><a href="#home">Home</a></li>
<li class="nav-item"><a href="#about">About</a></li>
<li class="nav-item"><a href="#services">Services</a></li>
<li class="nav-item"><a href="#contact">Contact</a></li>
</ul>
<div class="underline"></div>
</nav>
<script src="script.js"></script>
</body>
</html>CSS样式
/* styles.css */
body {
font-family: Arial, sans-serif;
}
.navbar {
position: relative;
display: flex;
justify-content: center;
}
.nav-list {
list-style: none;
display: flex;
padding: 0;
}
.nav-item {
margin: 0 15px;
}
.nav-item a {
text-decoration: none;
color: #333;
font-size: 18px;
}
.underline {
position: absolute;
bottom: 0;
height: 3px;
background-color: #007bff;
transition: all 0.3s ease;
}JavaScript代码
// script.js
document.addEventListener('DOMContentLoaded', function() {
const navItems = document.querySelectorAll('.nav-item');
const underline = document.querySelector('.underline');
navItems.forEach(item => {
item.addEventListener('mouseenter', function() {
const link = this.querySelector('a');
const linkRect = link.getBoundingClientRect();
underline.style.width = `${linkRect.width}px`;
underline.style.left = `${linkRect.left - document.querySelector('.navbar').offsetLeft}px`;
});
});
navItems.forEach(item => {
item.addEventListener('mouseleave', function() {
underline.style.width = '0';
underline.style.left = '0';
});
});
});解释与解决方法
- HTML结构：创建一个基本的导航菜单，包含一个用于显示下划线的
<div>。 - CSS样式：设置导航菜单的基本样式，并定义下划线的初始状态。
- JavaScript代码：
- 监听每个导航项的
mouseenter事件，计算当前链接的位置和宽度，并更新下划线的位置和宽度。 - 监听每个导航项的
mouseleave事件，重置下划线的位置和宽度。
- 监听每个导航项的
遇到的问题及解决方法
- 下划线位置不准确：确保在计算下划线位置时，考虑了父容器的偏移量。
- 性能问题：如果导航项很多，可以考虑使用节流（throttling）或防抖（debouncing）技术来优化事件处理。
通过上述方法，可以实现一个简单的下划线跟随导航菜单效果，提升用户体验。
相关·内容
2回答
我正在通过以下设置侧菜单但是，当我从侧菜单返回到同一个视图控制器或任何其他控制器或任何其他页面时，它不会跟随(.menuslide)我已经通过分配导航来尝试
浏览 3提问于2019-09-05得票数 0
2回答
我正在寻找一个简单的jQuery或Javascript解决方案，使导航侧栏顺畅地跟随用户时，他向下滚动页面。如下所示：
任何想法都是值得感谢的。
浏览 3提问于2011-08-10得票数 0
回答已采纳
我正在创建一个自定义的可湿性粉剂主题，我正在使用Wordpress导航栏。当在不同页面之间切换时，WP会在与当前页面相对应的导航栏中添加一个“当前菜单项”类来链接。然而，如果页面/帖子没有出现在导航栏中，它就不会向任何导航栏项目添加“当前菜单项”。我的问题是，当用户访问“博客”页面(实际上是一个分类页面)并点击打开single.php模板的某个帖子时，我希望导航栏项目“博客”像访问者访问博客页面时那样加下划线。有时我会希望另一个导航<
浏览 0提问于2014-01-09得票数 7
1回答
我创建了一个导航条，在按钮悬停时显示下拉菜单。这是代码：
带下拉式菜单的锚标签正在接受它的下拉菜单的宽度，而我希望它的宽度是正常的，当这个锚标签悬停在导航栏上时，除了下拉菜单出现外，导航栏中不应该有任何变化。具有下拉菜单的锚标签下面的红色下划线被移位，其宽度等于下拉菜单宽度的30% (下划线的宽度等于锚标签宽度的30%，但锚标签的宽度以某种方式等于下拉菜单的宽度
浏览 7提问于2022-07-29得票数 0
回答已采纳
给定这个字符串the symbol for four is 4 like in 34. _1234_。正则表达式如何匹配单独的4和34中的4，而不是_1234_中的两个_字符之间的匹配。
浏览 5提问于2015-10-24得票数 0
回答已采纳
我想在导航栏中添加一个菜单，其要求如下: 1.背景:灰色2.分隔每个菜单项的分隔符，3.菜单项没有下划线
#导航li:在{ content：“而今”之前；}
不对菜单</e
浏览 1提问于2012-10-02得票数 0
1回答
我将代码复制粘贴到WordPress主题下划线。$(document).ready(function(){ interval: 5000 /
浏览 1提问于2015-09-30得票数 0
important; }
对整个站点和导航栏的链接仍然下划线:(这是一个单页站点，所以当你滚动导航项目时会高亮显示，但它们也会下划线:(请帮助。编辑:菜单项在列表中，但某些列表项与一个页面没有关联，它们是外部链接。
浏览 0提问于2015-05-07得票数 0
1回答
我需要能够访问应用程序菜单仅使用键盘的统一，因为我的鼠标指针已经开始卡住在手图标，我不能点击任何东西。正如键盘快捷键所建议的(按住超级键查看)，我可以按住ALT键，打开应用程序菜单标题，但是我不能选择其中的任何一个？
浏览 0提问于2015-02-03得票数 0
回答已采纳
导航菜单由顶层项目组成，其中一项被称为“商店”。我使用的是WordPress和WooCommerce。
浏览 2提问于2014-01-06得票数 0
3回答
我正在尝试让导航栏中的当前选定菜单加下划线，但它不起作用。navbar-nav .nav-item:focus .nav-link { background-color: yellow;
} 在选定的菜单链接下划线或以某种方式突出显示似乎很常见
浏览 17提问于2021-11-08得票数 0
回答已采纳
2回答
如何在下拉菜单中下划线？
、、、、
我正在构建一个使用引导的网页，在我的导航栏，我有三个下拉菜单。我希望对页面进行编程，以便当前加载的页面及其相应的下拉菜单有下划线或高亮显示，以便用户知道他们在哪个页面上。在我的html文件中，下拉菜单导航栏如下： <li><a href="#'>item1</li>
<li><a href='
浏览 2提问于2015-11-05得票数 0
回答已采纳
我必须添加一个新的内容类型到我的网站一个新的功能，我被要求。我之前已经添加了其中的两个(事实上，在构建站点的早期)，它运行得很好，但是这次，当我想添加一个新节点时，我的新内容类型不会出现在内容类型列表(节点/添加)中。我清除了缓存并重新生成权限，但什么也没有发生。早些时候在这个论坛上的一次交流表明，它不太可能是分类法访问控制模块。
如果我干净地安装了drupal并创建了一个新的内容类型，它可以工作，但是在我的站点上，我不能这样做，所以我不认为它是因
浏览 0提问于2016-07-08得票数 1
回答已采纳
3回答
在下面页面的导航栏中:我的例子是，当菜单处于活动状态时，我希望每个菜单都有一个下划线。
我试图在CSS中设置以下内容，但是当我单击菜单选项时仍然没有得到任何下划线。
浏览 3提问于2017-04-26得票数 0
回答已采纳
1回答
当导航栏中的链接处于活动状态时，链接上有下划线。这里是"Formidling“active:示例站点。问题是，当我单击左侧边栏中的fx："Kurser“时，下划线正在消失。我希望当你点击侧边栏中的子菜单时，下划线将停留在菜单中。
我试图用下面的代码来解决这个问题，但我认为我走错了路？
浏览 7提问于2017-04-26得票数 1
回答已采纳
我已经创建了一个侧导航栏，我正在使用jquery在两个html页面上使用它。导航栏中还有一个下划线，该下划线根据选定的导航链接移动。下面是导航栏和html页面的代码：<script type="text/javascript" src="script.js"></script>
<link href="design.cssscript.
浏览 1提问于2022-06-27得票数 0
1回答
我已经开发了单页网站，我使用Bootstrap滚动间谍在标题导航时，向下滚动特定部分导航菜单项得到下划线。滚动时，我使用了四个菜单项，第一个菜单项和最后一个菜单项带有下划线。但我们滚动的第三部分第二部分菜单项是下划线的。请任何人帮助我如果我点击定价菜单项功能项目获得下划线，但定价菜单应下划线请帮助先生
.navbrdr .active
浏览 0提问于2018-09-19得票数 1
我想要一个顶部的栏和导航菜单附加到该栏。我已经做过了，没问题。我希望条和导航菜单跟随我，如果我向上和向下滚动。我可以做到这一点与一个固定的位置。但是，如果我有一个固定的位置，那么当我从左向右滚动时，它们就会跟随。我想让顶部栏和导航菜单都跟随用户向上和向下滚动，但如果他们从左到右滚动，我希望它像一个绝对位置，并成为部分或完全隐藏(取决于用户滚动的程度)。
这个是可能的吗？
浏览 2提问于2013-07-22得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
