前情提要： 去年在 mega menu 提案的同時，也規劃了 multi-level menu 改版提案。當時團隊初步設計規劃了兩個方案，一共顯示三個架構層級。（如下圖）
科目＋年段＆子項目，分兩次展開顯示 3 個層級
科目＋年段＋子項目，一次顯示一個層級
本次的設計將 mega menu 中的綠、橘黃等顏色捨棄，透過減少和統一用色，將視覺焦點集中在課程主頁面上，讓選單功能更融入多元特色內容版面中。
在將現下時空背景因素納入考量再評估後，決定以 方案2.2 為基礎進行更多細節上的優化調整。
在做案例搜集、研究時，我們發現市面上有許多網站服務進階展開選單，皆是以 hover 行為來觸發選單層級及內容的變化（以下以 Shoptify 為例）：
然而，有依據過往的開發經驗及長期與產品用戶的觀察、對話，我們發現學校老師、學生們年齡層分布甚廣，使得在硬體設備、線上服務、科技操作等面向的熟悉程度多有不同。為避免與減少可能因操作失誤所帶來的挫折體驗，團隊評估後決定延續前一版選單以點擊觸發展開的設計，採用動作明確、可持續行為狀態的 clicked，放棄能夠靈活互動切換內容的 hover 操作行為。
.gif)
承接前面所說，採用點擊行為來操作選單，除了可以減少操作失誤外，也能夠直接幫助我們統一在不同裝置上使用選單的操作行為，提升體驗上的一致性，讓用戶不需要學習或習慣不同的操作方式。
因此行動裝置版本盡可能地沿用相同的互動行為、顏色、分隔線、icon 等元素，來暗示內容展開的方向，引導使用者覺察可以怎麼進行操作使用。
而因應優雅降級的概念無法與電腦版相同的部分，我們則做出了以下調整：