響應式折疊導航欄(折疊式車載導航)
本篇文章給大家談談響應式折疊導航欄,以及折疊式車載導航對應的知識點,希望對各位有所幫助,不要忘了收藏本站喔。
本文目錄一覽:
手機端底部導航欄響應式怎么設置
第一步,打開手機“設置”選項。
第二步,在設置列表頁面中,打開“系統(tǒng)”選項。
第三步,在系統(tǒng)設置頁面中,打開“系統(tǒng)導航”選項。
第四步,在系統(tǒng)導航設置頁面中,打開“導航欄”選項。
第五步,在導航欄設置頁面中,選擇合適“導航欄樣式”即可。
折疊形左側(cè)導航欄
一、準備元件
1、打開 Axure 新建文件,從元件欄拖出4個矩形1,左對齊從上往下擺放。寬度一致,為 200 px。高度分別為 80 px,45?px,30 px,30 px;
2、雙擊矩形,在矩形內(nèi)分別輸入“后臺管理”,“用戶管理”,“角色列表”,“賬戶列表”;
3、第2個矩形是一級導航欄,設置背景顏色為 #545C64,字體顏色為 #FFFFF。接著添加1個icon圖標,w 30px,h 20px。然后選中矩形、圖標,右鍵組合,并命名為“一級導航_用戶管理組合”。
4、第3個矩形是二級導航欄,設置背景色為?#FFFFFF,字體顏色為 #333333.。
5、第4個矩形同樣設置。
完成了以上動作,就可以得到一下的展示,看圖:
二、設置交互樣式
1、全選“角色列表、賬戶列表 ”,右鍵點擊 交互樣式設置 ,選擇鼠標懸停 – 填充顏色 – 色值為 #F2F2F2,然后再選 選中 – 填充顏色 – 色值 #AAAAAA 。如圖:
2、繼續(xù)全選“角色列表、賬戶列表 ”,右鍵點擊設置選項組名稱 ,命名為“二級導航_用戶管理選項組合”。選擇“角色列表”,右鍵點擊 選中( 默認選中 ),完成 。
三、設置交互用例
1、選擇“角色列表 ”,設置鼠標點擊時 – 選中 – 選擇 This 為 ture ,點擊確定。添加目標,選中元件“一級導航_用戶管理組合”,選擇為true,點擊確定。
2、 “賬戶列表”同上設置,復制粘貼過去即可 。
完成以上設置,我們的選項就可以點擊切換的效果了。
3、把 “角色列表、賬戶列表 ” 選中,右鍵點擊 轉(zhuǎn)換為動態(tài)面板,命名為 “二級導航_用戶管理選項動面?” ,點擊把該面板隱藏。
4、選中“一級導航_用戶管理組合” ,新建交互?–?設置鼠標單擊時 – 顯示/隱藏 ,選擇目標元件“二級導航_用戶管理選項組合”;選擇:切換,動畫:顯示時向下滑動 / 隱藏時向上滑動,動畫為:線性,250 毫秒 ; 勾上置于頂層 ; 選擇:推動元件,方向為下方,動畫為:線性,250毫秒。
4、選中“一級導航_用戶管理組合” , 單擊時 增加動作:旋轉(zhuǎn) ,選擇目標元件“用戶管理展開”;選擇:順時針 180 度,動畫:線性,250 毫秒 。
完成以上的制作,我們會看到了單個導航欄已經(jīng)完成。我們可以給它復制多個這樣的導航欄在一起,就可以實現(xiàn)多個并用了。
四、進階
1、全選除“后臺管理”外的所有元件,然后我們給它復制粘貼 1 個(根據(jù)需要可以粘貼n個),并把元件的名稱修改為需要的名稱。這里修改為“日志管理” 。按照以下方式排列:
2、因前面設置“用戶管理”的時候,我們已經(jīng)把 “推動元件 ” 設置好了 ,所以后面無需再設置。但前面我們把 “角色列表 ” 設置為默認選中狀態(tài),這里我們又復制了1個,所以我們需要把多復制出來的1個 “系統(tǒng)日志 ”去掉默認選中狀態(tài) 。
3、選中“一級導航_用戶管理組合”和“一級導航_日志管理組合”(如有多個一級導航,則全部選中),右鍵選中“選項組”,命名為“一級導航_選項組”。
到這里就完成所有制作了,如有相關(guān)問題或建議請在下方留言,謝謝大家觀看。
附參考:
響應式折疊導航欄的介紹就聊到這里吧,感謝你花時間閱讀本站內(nèi)容,更多關(guān)于折疊式車載導航、響應式折疊導航欄的信息別忘了在本站進行查找喔。
掃描二維碼推送至手機訪問。
版權(quán)聲明:本文由飛速云SEO網(wǎng)絡優(yōu)化推廣發(fā)布,如需轉(zhuǎn)載請注明出處。