首页 > 文章 > 前端

如何在移动端应用中实现类似饿了么点餐页面左侧菜单的效果？

时间：2025-03-24 21:36:35 277浏览收藏

推广推荐

支持 PC / 移动端，安全直达

今天golang学习网给大家带来了《如何在移动端应用中实现类似饿了么点餐页面左侧菜单的效果？》，其中涉及到的知识点包括等等，无论你是小白还是老手，都适合看一看哦~有好的建议也欢迎大家在评论留言，若是看完有所收获，也希望大家能多多点赞支持呀！一起加油学习~

打造移动端应用的饿了么式左侧菜单

本文将指导您如何在移动端应用中构建类似饿了么点餐页面左侧菜单的交互效果。这种菜单通常固定在屏幕左侧，并根据内容滚动动态高亮当前选中项。

设计思路

饿了么的点餐页面左侧菜单是一个垂直滚动列表，每个菜单项对应右侧的不同内容区域。用户选择左侧菜单项时，右侧内容区域会相应滚动，同时左侧选中项高亮显示。

技术实现

实现该效果，我们需要结合HTML、CSS和JavaScript：

HTML结构: 使用无序列表
包含左侧菜单项
，每个
对应右侧一个 内容区域。
CSS样式: 使用 position: fixed 将左侧菜单固定，并设置右侧内容区域的样式使其可滚动。



JavaScript逻辑:  通过JavaScript监听右侧内容区域的滚动事件，根据滚动位置动态高亮左侧菜单项。同时，点击左侧菜单项时，需使对应右侧内容区域平滑滚动到视图中。


以下是一个简化的示例代码：
<!DOCTYPE html>


<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>饿了么式左侧菜单</title><style>
body { margin: 0; padding: 0; }
.container { display: flex; }
.left-menu { position: fixed; left: 0; top: 0; width: 100px; height: 100vh; overflow-y: auto; background-color: #f0f0f0; }
.left-menu ul { list-style: none; padding: 0; margin: 0; }
.left-menu li { padding: 10px; cursor: pointer; }
.left-menu li.active { background-color: #ddd; }
.right-content { margin-left: 100px; width: calc(100% - 100px); overflow-y: auto; }
.content-section { height: 500px; padding: 20px; }
</style><div class="container">
  <div class="left-menu">
    <ul><li data-target="section1">菜单1</li>
      <li data-target="section2">菜单2</li>
      <li data-target="section3">菜单3</li>
    </ul></div>
  <div class="right-content">
    <div class="content-section" id="section1">内容1</div>
    <div class="content-section" id="section2">内容2</div>
    <div class="content-section" id="section3">内容3</div>
  </div>
</div>

<script>
// JavaScript代码 (与原文代码基本一致，略作调整)
const leftMenuItems = document.querySelectorAll('.left-menu li');
const rightContent = document.querySelector('.right-content');
const sections = document.querySelectorAll('.content-section');

leftMenuItems.forEach(item => {
  item.addEventListener('click', () => {
    const targetId = item.getAttribute('data-target');
    const targetSection = document.getElementById(targetId);
    targetSection.scrollIntoView({ behavior: 'smooth' });
    highlightActiveMenu(item);
  });
});

rightContent.addEventListener('scroll', () => {
  const scrollTop = rightContent.scrollTop;
  sections.forEach((section, index) => {
    const sectionTop = section.offsetTop;
    const sectionBottom = sectionTop + section.offsetHeight;
    if (scrollTop >= sectionTop && scrollTop < sectionBottom) {
      highlightActiveMenu(leftMenuItems[index]);
    }
  });
});

function highlightActiveMenu(activeItem) {
  leftMenuItems.forEach(item => item.classList.remove('active'));
  activeItem.classList.add('active');
}
</script>
这段代码实现了基本的左侧菜单效果。您可以根据实际需求进行调整和完善。  记住，这只是一个简化的示例，实际应用中可能需要考虑更多细节，例如动画效果、响应式设计等。
理论要掌握，实操不能落！以上关于《如何在移动端应用中实现类似饿了么点餐页面左侧菜单的效果？》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！