很實用的干貨|浮動固定菜單與樓層導航實踐

分類:設計 時間:2016-10-14

今天,我們結合浮動固定菜單欄和樓層導航,實現同一界面內的錨點定位。

想必很多人已經見過浮動固定菜單和樓層導航的案例,浮動固定菜單的場景非常的常見,人人都是產品經理的產品經理導航( http://dh.woshipm.com/ )就是一個典型的浮動固定菜單的場景,當窗口向下滾動超過一定距離時,菜單欄固定在瀏覽器窗口的最上方:

當一個頁面內容較多時,我們又經常以樓層的方式快速導航,并且在頁面的右下角有一個返回到頂部的按鈕。單擊對應的樓層按鈕,快速定位到該樓層,這在一些電商網站中出現較多,例如京東網首頁:

今天,我們結合浮動固定菜單欄和樓層導航,實現同一界面內的錨點定位,完成后的效果圖如下:

單擊這里 查看在線演示

從這個例子里,我們可以掌握的知識點有如下幾個:

  • 關于動態面板“固定到瀏覽器”屬性的應用
  • 浮動固定菜單欄的設置技巧
  • 滾動到元件動作的應用
  • 窗口滾動時事件的處理
  • 自動適應窗口寬度的設置

一、界面布局

1、標題欄

添加一個無邊框灰色矩形框,大小1250*66,命名title,位置在(0,80),模擬菜單欄。

復制這個矩形框,命名為menu,模擬位于頂部的浮動固定菜單,位置在(0,0)右鍵轉換為動態面板,命名為float_title,右鍵設置順序為置于頂層,完成后的效果如下:

2、樓層導航按鈕

添加一個矩形框,大小80*50,雙擊設置文字為“一樓”,右鍵設置交互樣式鼠標經過時填充色為深灰色:

再設置選中狀態的樣式為藍底白字:

復制這個按鈕7個,分別修改文字內容為“二樓”到“八樓”,自上而下順序排列:

給8個按鈕分別命名button1到button8,選中這8個矩形,右鍵設置選項組為buttons:

然后再右鍵轉換為動態面板,命名為float_panel,放在(0,475)處。

3、樓層內容

我們使用大的矩形塊來模擬每一個樓層,添加一個矩形框,大小900*220,雙擊設置文字內容為“一樓”,命名為floor1,復制floor1總共7個(復制這么多是讓窗口在垂直方向有足夠多的樓層,讓頁面出現垂直滾動條),修改名稱分別為“二樓”到“八樓”,依次從上到下排列,間距設置為60。選中這8個矩形,右鍵轉換為動態面板,命名為floors,放在(160,185)處,完成后的效果圖如下:

4、返回頂部按鈕

添加一個矩形,大小70*60,右鍵轉換為動態面板,命名為back_top,移動(1100,754)處,完成后的效果圖如下:

在初始狀態下,頂部浮動固定菜單欄和回到頂部按鈕是不可見的,只有在窗口向下滾動一定距離后才出現,因此我們先將這兩個動態面板隱藏起來(淺黃色部分是隱藏的動態面板):

到這里我們已經完成示例中所有的布局部分,下面來開始處理事件。

二、動態面板屬性設置

有幾個動態面板的“固定到瀏覽器”屬性需要設置一下,以便于在顯示時能按照設置的屬性顯示。

頂部菜單欄的“固定到瀏覽器”屬性:水平居中,垂直居上

左側樓層導航按鈕的“固定到瀏覽器”屬性:水平居左,垂直居中

返回頂部按鈕的“固定到瀏覽器”屬性:水平居右,邊距20,垂直居下,邊距20

三、事件處理

這里包括以下幾個事件需要處理:

1、頁面載入時事件

為了界面更加美觀點,在頁面初始化事件里,我們將菜單欄設置和當前窗口一樣的大小,將樓層內容的大小設置為比窗口寬度小一點并且居中顯示。

因為有8個樓層,我們通過一個全局變量來設置一下值,所有樓層寬度減去這個值,設置統一寬度,全局變量名為distance,默認值為400:

在頁面空白處點擊,在右側屬性里給頁面添加頁面載入時事件:

  1. 添加頁面載入時事件
  2. 先顯示左側的樓層導航動態面板
  3. 設置菜單欄title和隱藏的浮動菜單欄的menu的大小,寬度為窗口寬度Window.width,高度66保持不變
  4. 設置8個樓層的寬度為窗口寬度關于distance值,即[[Window.width-distance]],高度保持不變為220。
  5. 移動8個樓層所在的動態面板位置在水平中央位置
  6. 通過變量設置樓層的水平位置
  7. 添加局部變量LVAR1,指向樓層所在的動態面板
  8. 水平位置計算方式為[[(Window.width-LVAR1.width)/2]],即窗口寬度減去樓層寬度再除以2

2、窗口滾動事件

窗口在滾動起過標題欄的位置后,顯示浮動固定菜單欄和返回頂部按鈕:

  1. 添加窗口滾動時事件
  2. 添加條件,如果窗口滾動距離Window.scrollYgt;=80
  3. 則顯示浮動固定菜單欄和回到頂部的按鈕
  4. 觸發控制按鈕control的單擊事件(見后面說明)

否則就隱藏浮動固定菜單欄和回到頂部的按鈕:

添加個熱點區域control,大小10*10,添加單擊事件,判斷窗口滾動位置,設置對應按鈕為選中狀態:

3、樓層導航按鈕單擊事件

給樓層導航的第一個按鈕添加單擊事件,單擊后滾動元件到頂部菜單title,配合線性動畫:

  1. 選擇導航一樓按鈕
  2. 添加鼠標單擊事件
  3. 設置滾動到元件動作
  4. 選擇滾動到floor1
  5. 設置僅垂直滾動,配合線性動畫
  6. 設置當前按鈕為選中狀態

其它7個按鈕依次選擇滾動到floor2到floor8。

4、回到頂部單擊事件

回到頂部按鈕事件與導航按鈕事件相同,只是滾動到標題欄title:

四、F5預覽

所有布局和事件都已經處理完成,可以F5預覽一下看看效果了!

源文件下載地址: http://pan.baidu.com/s/1boDEPJp

如果覺得有幫助就贊一下哦^_^

本文由 @原型設計工場原創發布于人人都是產品經理。未經許可,禁止轉載。


Tags: 設計

文章來源:http://www.woshipm.com/rp/425850.html


ads
ads

相關文章
ads

相關文章

ad