打造流暢的餓了么風格左側菜單
本文將指導您如何創建一個類似餓了么點餐應用的左側菜單，兼顧美觀和用戶體驗。該菜單是一個可滾動的列表，每個菜單項對應右側內容區域，點擊菜單項后，右側內容會平滑滾動到相應位置。
我們將使用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代碼，根據滾動位置動態更新菜單項的樣式。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
