右侧可伸展浮动菜单

最新推荐文章于 2025-12-03 23:30:00 发布

原创最新推荐文章于 2025-12-03 23:30:00 发布 · 428 阅读

CC 4.0 BY-SA版权

文章标签：

<!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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
padding: 20px;
color: #333;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

header {
text-align: center;
margin-bottom: 40px;
padding: 20px;
background: rgba(255, 255, 255, 0.8);
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

h1 {
color: #2c3e50;
margin-bottom: 10px;
font-size: 2.5rem;
}

.subtitle {
color: #7f8c8d;
font-size: 1.2rem;
}

.content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-bottom: 40px;
}

.card {
background: white;
border-radius: 10px;
padding: 25px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}

.card:hover {
transform: translateY(-5px);
}

.card h2 {
color: #3498db;
margin-bottom: 15px;
border-bottom: 2px solid #f0f0f0;
padding-bottom: 10px;
}

.card p {
line-height: 1.6;
color: #555;
}

.features {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
margin-top: 20px;
}

.feature {
background: #3498db;
color: white;
padding: 8px 15px;
border-radius: 20px;
font-size: 0.9rem;
}

/* 右侧浮动菜单样式 */
.floating-menu {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 60px;
background: #2c3e50;
border-radius: 10px 0 0 10px;
box-shadow: -3px 0 15px rgba(0, 0, 0, 0.2);
transition: width 0.3s ease;
z-index: 1000;
overflow: hidden;
}

.floating-menu:hover {
width: 200px;
}

.menu-header {
display: flex;
align-items: center;
padding: 15px;
color: white;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.menu-header i {
font-size: 24px;
margin-right: 15px;
flex-shrink: 0;
}

.menu-header h3 {
font-size: 16px;
white-space: nowrap;
}

.menu-items {
list-style: none;
padding: 10px 0;
}

.menu-item {
display: flex;
align-items: center;
padding: 12px 15px;
color: #ecf0f1;
text-decoration: none;
transition: background 0.3s ease;
white-space: nowrap;
}

.menu-item:hover {
background: rgba(255, 255, 255, 0.1);
}

.menu-item i {
font-size: 18px;
margin-right: 15px;
width: 24px;
text-align: center;
flex-shrink: 0;
}

.menu-item span {
opacity: 0;
transition: opacity 0.3s ease;
}

.floating-menu:hover .menu-item span {
opacity: 1;
}

footer {
text-align: center;
margin-top: 40px;
padding: 20px;
color: #7f8c8d;
font-size: 0.9rem;
}

@media (max-width: 768px) {
.floating-menu {
width: 50px;
}

.floating-menu:hover {
width: 180px;
}
}
</style>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<div class="container">
<header>
<h1>右侧可伸展浮动菜单</h1>
<p class="subtitle">鼠标悬停查看菜单展开效果</p>
</header>

<div class="content">
<div class="card">
<h2>设计特点</h2>
<p>这个浮动菜单固定在页面右侧，默认状态下只显示图标，当鼠标悬停时会平滑展开显示完整的菜单项。</p>
<div class="features">
<div class="feature">响应式设计</div>
<div class="feature">平滑动画</div>
<div class="feature">优雅美观</div>
</div>
</div>

<div class="card">
<h2>技术实现</h2>
<p>使用HTML、CSS和jQuery实现。CSS处理样式和动画效果，jQuery处理交互逻辑，确保菜单在不同设备上都能良好工作。</p>
<div class="features">
<div class="feature">HTML5</div>
<div class="feature">CSS3</div>
<div class="feature">jQuery</div>
</div>
</div>

<div class="card">
<h2>使用场景</h2>
<p>这种菜单非常适合用作网站的快捷导航、重要链接入口或功能菜单，既节省空间又提供良好的用户体验。</p>
<div class="features">
<div class="feature">网站导航</div>
<div class="feature">工具菜单</div>
<div class="feature">快捷链接</div>
</div>
</div>
</div>

<footer>
<p>© 2023 右侧浮动菜单示例 | 所有代码包含在一个HTML文件中</p>
</footer>
</div>


<div class="floating-menu">
<div class="menu-header">
<i class="fas fa-bars"></i>
<h3>快捷菜单</h3>
</div>
<ul class="menu-items">
<a href="#" class="menu-item">
<i class="fas fa-home"></i>
<span>首页</span>
</a>
<a href="#" class="menu-item">
<i class="fas fa-user"></i>
<span>个人中心</span>
</a>
<a href="#" class="menu-item">
<i class="fas fa-cog"></i>
<span>设置</span>
</a>
<a href="http://www.jnanyuda.com" class="menu-item" target="_blank">
<i class="fas fa-external-link-alt"></i>
<span>外部链接</span>
</a>
<a href="#" class="menu-item">
<i class="fas fa-envelope"></i>
<span>联系我们</span>
</a>
<a href="#" class="menu-item">
<i class="fas fa-info-circle"></i>
<span>关于我们</span>
</a>
</ul>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 添加菜单项点击效果
$('.menu-item').click(function(e) {
e.preventDefault();

// 添加点击反馈
$(this).css({
'background': 'rgba(52, 152, 219, 0.3)'
});

setTimeout(() => {
$(this).css({
'background': ''
});
}, 300);

// 如果是外部链接，则跳转
if($(this).attr('href') === 'http://www.jnanyuda.com') {
window.open($(this).attr('href'), '_blank');
}
});

// 添加菜单展开/收缩的平滑效果
let menuTimer;
$('.floating-menu').hover(
function() {
clearTimeout(menuTimer);
$(this).stop().animate({width: '200px'}, 300);
},
function() {
menuTimer = setTimeout(() => {
$(this).stop().animate({width: '60px'}, 300);
}, 100);
}
);

// 响应式调整
function adjustMenu() {
if($(window).width() <= 768) {
$('.floating-menu').css('width', '50px');
$('.floating-menu').hover(
function() {
clearTimeout(menuTimer);
$(this).stop().animate({width: '180px'}, 300);
},
function() {
menuTimer = setTimeout(() => {
$(this).stop().animate({width: '50px'}, 300);
}, 100);
}
);
} else {
$('.floating-menu').css('width', '60px');
$('.floating-menu').hover(
function() {
clearTimeout(menuTimer);
$(this).stop().animate({width: '200px'}, 300);
},
function() {
menuTimer = setTimeout(() => {
$(this).stop().animate({width: '60px'}, 300);
}, 100);
}
);
}
}

// 初始调整和窗口调整时重新调整
adjustMenu();
$(window).resize(adjustMenu);
});
</script>
</body>
</html>