本文将指导您如何创建一个类似饿了么点餐应用的左侧菜单，兼顾美观和用户体验。该菜单是一个可滚动的列表，每个菜单项对应右侧内容区域，点击菜单项后，右侧内容会平滑滚动到相应位置。
我们将使用HTML、CSS和JavaScript来实现此效果。HTML构建菜单结构，CSS控制样式和布局，JavaScript处理点击事件和滚动效果。
HTML结构:
<div class="menu">
<ul>
<li>菜单项1</li>
<li>菜单项2</li>
<li>菜单项3</li>
</ul>
</div>CSS样式:
.menu {
width: 200px;
height: 100vh;
overflow-y: auto;
background-color: #f0f0f0;
}
.menu ul {
list-style: none;
padding: 0;
}
.menu li {
padding: 10px;
border-bottom: 1px solid #e0e0e0;
cursor: pointer;
}
.menu li:hover {
background-color: #e0e0e0;
}JavaScript交互:
document.querySelectorAll('.menu li').forEach((item, index) => {
item.addEventListener('click', () => {
const content = document.getElementById('content'); // 假设右侧内容区域ID为'content'
const targetSection = content.children[index];
targetSection.scrollIntoView({ behavior: 'smooth' });
});
});以上代码实现了基本的左侧菜单效果。 为了提升用户体验，可以考虑在右侧内容滚动时，高亮显示对应的左侧菜单项，从而增强用户位置感知。 这需要进一步完善JavaScript代码，根据滚动位置动态更新菜单项的样式。
以上就是如何实现饿了么点餐应用左侧菜单效果？的详细内容，更多请关注php中文网其它相关文章！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
171
收藏
