設計選單橫向隱藏與顯示的效果
1、在做選單動態效果之前，諸位應該首先需要知道，我們需要什麼元件，以最簡單的樣式來說，首先我們需要一個選單的動態面板，一個選單的顯示按鈕，一個選單的隱藏按鈕，若需要，還可增加一個選單的具體頁面。
2、選單與圖片的顯示，要按照自己的要求來設定，比如若想要進入頁面後，頁面的選單是顯示狀態的，則選單與選單隱藏按鈕直接顯示出來，選單的.顯示按鈕隱藏掉即可，反之，則要隱藏掉選單與選單隱藏按鈕，直接顯示出選單顯示按鈕，此外將選單的顯示/隱藏按鈕做成動態面板，透過點選來回切換，也是可行的。
3、設定好需要隱藏的選單後，將隱藏與顯示按鈕位置重合覆蓋掉後平移至需要的位置，比如x軸為0的位置後即可，此時需要開始新增動態事件。
4、動態效果需要對兩個按鈕分別新增，對隱藏按鈕來說，需要新增點選後，可將選單隱藏掉，可將自己隱藏掉，同事還可顯示出選單顯示按鈕的動態事件;對顯示按鈕來說，效果基本都是反向的，具體如圖所示
5、最終效果如下，可透過點選實現菜單向左隱藏，向右顯示的效果。
6、選單顯示隱藏的效果需要視情況而定，比如網頁版，像360導航首頁，右側本身有留白區域，選單的隱藏顯示基本與主頁面無關，但本人經歷過的OA、CRM等辦公系統，在設計選單隱藏顯示效果時一般都會要求頁面主要內容與選單隱藏顯示效果一起移動，這點應該在對應的系統設計中，按要求實現。
【設計選單橫向隱藏與顯示的效果】相關文章：