譯文僅為團隊內部分享,對外不對質量負責。
期望:多層級菜單,延遲滑動動畫效果,附送面包屑功能以及返回按鈕。
Demo:http://tympanus.net/Blueprints/MultiLevelMenu/
這個多層級菜單的設計目的為:展開子級時,父級隱藏,并且有過渡動畫;動畫從所點對象開始,由它引領,其他鄰居節點跟隨其運動產生延遲特效。子級菜單的特效跟隨與父級相同的邏輯。更深層的子菜單使用 data 屬性來引用和關聯。
其他可選元素包括:1) 面包屑;2) 回退鈕(demo內暫未顯示)。
移動端使用媒體查詢的方法將菜單縮為左上角的 toggle menu。
末尾可以使用簡易的 callback。
原代碼
編輯器插入代碼段落不便的原因,請直接到原頁面正文后參考相關 HTML/CSS/JavaScript:
http://tympanus.net/codrops/2015/11/17/multi-level-menu/
代碼包下載:
http://tympanus.net/Blueprints/MultiLevelMenu/MultiLevelMenu.zip