Axure9制作導航吸頂效果
在用Axure9制作導航吸頂效果時,常常不知道如何下手,摸不著門路。作者結合自己的實戰,與大家分享制作導航吸頂效果的思路,一起來看看。
請注意查看本方案采用最簡潔快捷的方式,與已有文章實現方式不同,解決實現頁面向下移動時,頁面中部導航吸頂效果,(app/web全適用)直接上教程~
1、將下滑吸頂的導航復制一份,移動至頂部設置為動態面板;將復制的導航命名為“吸頂導航”。
2、設置導航頁面吸頂:選中頂部導航右鍵,選擇固定置到瀏覽器,點選「固定到瀏覽器窗口」,選擇置頂;后將其設置隱藏;
3、創建輔助元件:創建一個小熱區放置頁面左上角命名“固定某點”,將其轉換成動態面板,并且設置固定至瀏覽器頂部。下面再創建一個熱區長度至頁底命名為“滾動某點”。
4、創建吸頂導航顯示狀態:頁面全局交互設置,點擊「新建交互」,選擇窗口Scrolled,點擊「顯示/隱藏」,選擇目標“吸頂導航”
5、創建吸頂導航顯示條件:在全局交互-窗口Scrolled,點擊「啟用情形」;依次選擇“元件范圍”“滾動某點”“接觸”“元件范圍”“固定某點”,點擊確定;
6、創建吸頂導航隱藏條件:再次點擊「添加情形」,添加情形2如下圖,設置未接觸元件隱藏吸頂導航。
7、最后設置好的交互事件如下圖:
查過目前很多網站上推薦的實現教程,發現要么過于復雜不好理解,要么適用axure老版本;特此總結此方案,希望對你有幫助,若有疑問歡迎留言哦~
本文由 @禹霏 原創發布于人人都是產品經理,未經許可,禁止轉載
題圖來自Unsplash,基于 CC0 協議
該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。
評論
- 目前還沒評論,等你發揮!