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

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

碧海醫心

发布： 2025-03-16 09:14:01

原创

693人浏览过

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

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

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

设计思路

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

技术实现

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

HTML结构: 使用无序列表 <ul></ul> 包含左侧菜单项 <li>，每个 <li> 对应右侧一个

 内容区域。

<li>
CSS样式:  使用 position: fixed 将左侧菜单固定，并设置右侧内容区域的样式使其可滚动。
                    
                        
                            
                        
                        
                            表单大师AI
                            一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。
                            
                                
                                74
                            
                        
                        
                            查看详情
                            
                        
                    
                

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


以下是一个简化的示例代码：
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<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>

</body>
</html>
登录后复制
这段代码实现了基本的左侧菜单效果。您可以根据实际需求进行调整和完善。  记住，这只是一个简化的示例，实际应用中可能需要考虑更多细节，例如动画效果、响应式设计等。