HTML5多功能粘性页脚导航菜单特效_html5页脚菜单-优快云博客

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多功能粘性页脚导航菜单</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}

body {
min-height: 100vh;
display: flex;
flex-direction: column;
background: #f5f5f5;
padding-bottom: 80px; /* 为页脚留出空间 */
}

.content {
flex: 1;
padding: 20px;
}

h1 {
text-align: center;
margin: 30px 0;
color: #333;
}

p {
margin-bottom: 20px;
line-height: 1.6;
}

/* 粘性页脚导航样式 */
.footer-nav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: linear-gradient(135deg, #6e8efb, #a777e3);
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
border-radius: 20px 20px 0 0;
overflow: hidden;
transition: all 0.3s ease;
}

.footer-nav:hover {
box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.2);
}

.nav-items {
display: flex;
justify-content: space-around;
padding: 10px 0;
}

.nav-item {
display: flex;
flex-direction: column;
align-items: center;
color: white;
text-decoration: none;
padding: 10px 15px;
transition: all 0.3s ease;
position: relative;
opacity: 0.8;
}

.nav-item:hover {
opacity: 1;
transform: translateY(-5px);
}

.nav-item.active {
opacity: 1;
}

.nav-item i {
font-size: 24px;
margin-bottom: 5px;
}

.nav-item span {
font-size: 12px;
}

.nav-item.active::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 6px;
height: 6px;
background: white;
border-radius: 50%;
}

.footer-info {
text-align: center;
padding: 5px 0;
background: rgba(0, 0, 0, 0.1);
color: white;
font-size: 12px;
}

/* 图标使用Unicode字符代替字体图标 */
.icon-home::before { content: "🏠"; }
.icon-search::before { content: "🔍"; }
.icon-heart::before { content: "❤️"; }
.icon-cart::before { content: "🛒"; }
.icon-user::before { content: "👤"; }
</style>
</head>
<body>
<div class="content">
<h1>多功能粘性页脚导航菜单</h1>
<p>向下滚动页面，可以看到页脚导航始终固定在底部。</p>
<p>这是一个具有悬停效果和活动状态指示的现代化导航菜单。</p>
<p>技术支持由 www.chuanqisifu.site 提供。</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
</div>


<nav class="footer-nav">
<div class="nav-items">
<a href="#" class="nav-item active">
<i class="icon-home"></i>
<span>首页</span>
</a>
<a href="#" class="nav-item">
<i class="icon-search"></i>
<span>搜索</span>
</a>
<a href="#" class="nav-item">
<i class="icon-heart"></i>
<span>收藏</span>
</a>
<a href="#" class="nav-item">
<i class="icon-cart"></i>
<span>购物车</span>
</a>
<a href="#" class="nav-item">
<i class="icon-user"></i>
<span>我的</span>
</a>
</div>
<div class="footer-info">

</div>
</nav>