jQuery鼠标悬停动画导航条-优快云博客

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148794284

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery鼠标悬停动画导航条</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
background-color: #f5f5f5;
color: #333;
}

.navbar-container {
width: 100%;
background: linear-gradient(135deg, #1a1a2e, #16213e);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}

.navbar {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}

.logo {
color: white;
font-size: 1.5rem;
font-weight: bold;
text-decoration: none;
padding: 20px 0;
transition: all 0.3s ease;
}

.logo:hover {
color: #4CAF50;
}

.nav-links {
display: flex;
list-style: none;
}

.nav-item {
position: relative;
}

.nav-link {
color: white;
text-decoration: none;
padding: 25px 20px;
display: block;
font-weight: 500;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.nav-link:hover {
color: #4CAF50;
}

/* 悬停动画效果 */
.nav-link::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 3px;
background-color: #4CAF50;
transition: all 0.3s ease;
}

.nav-link:hover::before {
width: 80%;
}

/* 下拉菜单 */
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background-color: white;
width: 200px;
border-radius: 0 0 5px 5px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.3s ease;
z-index: 100;
}

.nav-item:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

.dropdown-menu li {
list-style: none;
}

.dropdown-menu a {
color: #333;
padding: 12px 20px;
display: block;
text-decoration: none;
transition: all 0.3s ease;
border-bottom: 1px solid #f0f0f0;
}

.dropdown-menu a:hover {
background-color: #f5f5f5;
color: #4CAF50;
padding-left: 25px;
}

/* 移动端菜单按钮 */
.menu-toggle {
display: none;
cursor: pointer;
padding: 10px;
}

.menu-toggle span {
display: block;
width: 25px;
height: 3px;
background-color: white;
margin: 5px 0;
transition: all 0.3s ease;
}

/* 内容区域 */
.content {
max-width: 1200px;
margin: 100px auto;
padding: 0 20px;
}

.content h1 {
font-size: 2.5rem;
margin-bottom: 20px;
color: #333;
}

.content p {
font-size: 1.1rem;
line-height: 1.6;
color: #666;
margin-bottom: 20px;
}

/* 页脚 */
.footer {
background: linear-gradient(135deg, #1a1a2e, #16213e);
color: white;
text-align: center;
padding: 30px 0;
margin-top: 50px;
}

.credit {
margin-top: 20px;
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
}

.credit a {
color: #4CAF50;
text-decoration: none;
transition: color 0.3s;
}

.credit a:hover {
color: #FFD700;
}

/* 响应式设计 */
@media (max-width: 768px) {
.menu-toggle {
display: block;
}

.nav-links {
position: fixed;
top: 70px;
left: -100%;
width: 80%;
height: calc(100vh - 70px);
background: linear-gradient(135deg, #1a1a2e, #16213e);
flex-direction: column;
align-items: center;
padding: 20px 0;
transition: all 0.5s ease;
}

.nav-links.active {
left: 0;
}

.nav-item {
width: 100%;
text-align: center;
}

.nav-link {
padding: 15px;
}

.dropdown-menu {
position: static;
width: 100%;
opacity: 1;
visibility: visible;
transform: none;
display: none;
background-color: rgba(0, 0, 0, 0.1);
box-shadow: none;
border-radius: 0;
}

.nav-item:hover .dropdown-menu {
display: block;
}

.dropdown-menu a {
color: white;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dropdown-menu a:hover {
background-color: rgba(255, 255, 255, 0.1);
}
}
</style>
</head>
<body>
<div class="navbar-container">
<nav class="navbar">
<a href="#" class="logo">LOGO</a>

<div class="menu-toggle" id="mobile-menu">
<span></span>
<span></span>
<span></span>
</div>

<ul class="nav-links" id="nav-links">
<li class="nav-item">
<a href="#" class="nav-link">首页</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">产品</a>
<ul class="dropdown-menu">
<li><a href="#">产品1</a></li>
<li><a href="#">产品2</a></li>
<li><a href="#">产品3</a></li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">服务</a>
<ul class="dropdown-menu">
<li><a href="#">服务1</a></li>
<li><a href="#">服务2</a></li>
<li><a href="#">服务3</a></li>
<li><a href="#">服务4</a></li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">关于我们</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">联系我们</a>
</li>
</ul>
</nav>
</div>

<div class="content">
<h1>jQuery鼠标悬停动画导航条</h1>
<p>这是一个使用jQuery实现的具有悬停动画效果的导航条。当鼠标悬停在导航链接上时，会有平滑的下划线动画效果。</p>
<p>导航条还包含下拉菜单功能，在移动设备上会自动调整为适合小屏幕的样式。</p>
<p>尝试将鼠标悬停在导航链接上，查看动画效果。</p>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function() {
// 移动端菜单切换
$('#mobile-menu').click(function() {
$(this).toggleClass('active');
$('#nav-links').toggleClass('active');
});

// 导航链接悬停动画增强
$('.nav-link').hover(
function() {
// 鼠标进入
$(this).css('color', '#4CAF50');
$(this).find('+ .dropdown-menu a').css('color', '#4CAF50');
},
function() {
// 鼠标离开
$(this).css('color', 'white');
$(this).find('+ .dropdown-menu a').css('color', '#333');
}
);

// 下拉菜单项悬停效果
$('.dropdown-menu a').hover(
function() {
$(this).css({
'background-color': '#f5f5f5',
'color': '#4CAF50',
'padding-left': '25px'
});
},
function() {
$(this).css({
'background-color': 'transparent',
'color': '#333',
'padding-left': '20px'
});
}
);

// 响应式调整
function checkScreenSize() {
if ($(window).width() > 768) {
$('#nav-links').removeAttr('style');
}
}

$(window).resize(checkScreenSize);
checkScreenSize();

// 添加点击关闭菜单功能（移动端）
$(document).click(function(event) {
if (!$(event.target).closest('#mobile-menu').length &&
!$(event.target).closest('#nav-links').length &&
$('#nav-links').hasClass('active')) {
$('#mobile-menu').removeClass('active');
$('#nav-links').removeClass('active');
}
});

// 平滑滚动
$('a[href*="#"]').on('click', function(e) {
e.preventDefault();

$('html, body').animate(
{
scrollTop: $($(this).attr('href')).offset().top - 70,
},
500,
'linear'
);

// 如果是移动端，点击后关闭菜单
if ($(window).width() <= 768) {
$('#mobile-menu').removeClass('active');
$('#nav-links').removeClass('active');
}
});
});
</script>
</body>
</html>