前端 - 如何实现饿了么点餐左侧菜单效果？

Question

Answer 1

饿了么点餐左侧菜单效果可以通过使用 HTML、CSS 和 JavaScript 来实现。下面是一个简单的示例，展示了如何创建一个基本的左侧菜单效果：

HTML 结构：

<div class="menu">  <ul>    <li>菜单1</li>    <li>菜单2</li>    <li>菜单3</li>    <li>菜单4</li>  </ul></div>

CSS 样式：

.menu {  width: 200px; /* 左侧菜单的宽度 */  background-color: #f1f1f1; /* 背景颜色 */  overflow: auto; /* 防止菜单超出容器 */}.menu ul {  list-style-type: none; /* 去掉列表前的默认标记 */  padding: 0; /* 去掉列表的默认内边距 */}.menu li {  padding: 10px; /* 列表项的内边距 */  border-bottom: 1px solid #ccc; /* 列表项的底部边框 */}

JavaScript 代码：

// 获取左侧菜单元素const menu = document.querySelector('.menu');// 当鼠标悬停在菜单上时，展开或收起菜单menu.addEventListener('mouseover', function() {  menu.style.height = 'auto'; // 展开菜单的高度根据内容自动调整});menu.addEventListener('mouseout', function() {  menu.style.height = '0'; // 收起菜单的高度为0，隐藏菜单});

这是一个简单的示例，只包含了一个基本的左侧菜单效果。你可以根据实际需求进行扩展和定制。例如，你可以添加更多的菜单项、自定义样式、添加点击事件等。希望这个示例能对你有所帮助！