Axure實例:創建瀏覽器頂部固定菜單及子菜單

14 評論 30987 瀏覽 31 收藏 4 分鐘

文章分享了一個運用Axure創建瀏覽器頂部固定菜單及子菜單的例子,和各位PM分享,希望能幫到一些需要的朋友。

在下是個axure新手,要用axure實現下面一個功能:

1.讓菜單固定在瀏覽器頂部(如果僅僅是這個功能,那么可以用動態面板里面裝Menu item直接固定在瀏覽器頂部);

2.菜單有下拉的子菜單(如果用了動態面板,除非動態面板的高度大于子菜單彈出時的高度,否則顯示不出子菜單,但是如果一開始把動態面板的高度設置的很高,就會導致擋住網頁正文的內容,導致網頁的正文內容無法選中,無法復制)。

我就試著尋找,除了動態面板,是否有其他組件,可以固定在瀏覽器頂部,且不影響菜單的下拉子菜單彈出,但是我并沒有找到。

后來,我想到了一個解決的辦法:

還是用動態面板,包裹Menu item,然后給Menu item設置子菜單,然后在axure中 選中某個菜單項目,就會彈出子菜單

(圖1,選中其中一個菜單項目,彈出了子菜單)

然后選中整個子菜單:

(圖2,這是選中子菜單后,子菜單周圍有一個邊框包裹著它)

然后在右邊的屬性窗口,做如下設置:

(圖3,子菜單的屬性 設置窗口)

這里的【頂部菜單按鈕】就是我包裹菜單的動態面板的名稱,當鼠標移動到Menu item上,會自動顯示出子菜單,那么我們讓子菜單在顯示的時候,改變包裹菜單的動態面板的高度,從而讓整個菜單能完整的顯示出來,然后當我們的鼠標離開子菜單的時候,子菜單就會自動隱藏,從而觸發 【隱藏時】這個事件,然后設置動態面板的尺寸回到原始尺寸,這時候,就不會影響我們選擇頁面其他元素了。

update:2017-02-22

最新研究出的方法,快速調整動態面板的寬度:

直接選中 包裹菜單的動態面板, 鼠標右鍵,設置 【自動調整為內容尺寸】

完畢。

我學做PM的時候,woshipm上很多朋友熱心幫過我,現在分享下,希望能幫到一些需要的朋友。

 

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

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 謝謝樓主的辦法,但是我遇到一個問題,如果在子菜單中,設置了case,那么這個case會因為“頂部菜單”的作用尺寸的范圍擴大并覆蓋而無法正常使用,這個有什么解決辦法嗎?另外你更新的方法是不需要在子菜單的屬性中設置顯示/隱藏時,頂部菜單的尺寸就可以實現同樣的效果么,我試了好像沒什么效果。

    來自云南 回復
    1. 我這個文章的主要關鍵詞是【讓菜單固定且浮動在頂部】,為了滿足這個需求,這時候必須要借助動態面板,而加了動態面板,如果面板過大,會遮擋網頁正常的內容,過小,會讓子菜單顯示不出來,如果你只是普通菜單,不需要固定且浮動在頂部,那就按照普通菜單處理即可, case里隱藏和顯示是為了動態改變面板的尺寸,讓子菜單彈出的時候有空間顯示, 讓他隱藏是為了不擋住網頁菜單下面的內容, 后面更新的方法 是最優的方案,讓axure自動處理, 另外你的問題描述我不是很理解究竟是什么意思,麻煩你盡量詳細的描敘下你的需求、場景,我好幫你解答

      來自廣東 回復
    2. 恩,我按照作者的方法實現了相關的效果。但是我的子菜單中有一個文本,點擊可以連接到其他頁面,用了這個方法,就沒法正常點擊那個文本跳轉到對應的頁面了,希望作者解答,謝謝。還有就是我在用的時候發現作者說的那個最優方法,自動調整為內容尺寸已經默認勾選上了,但是好像沒什么用

      來自云南 回復
    3. 發你的原型文件,我幫你看看

      來自廣東 回復
  2. 不是很懂啊,不是有“菜單”這個元件嗎,為啥還要另外畫一個呢????直接放個菜單,然后設置界面滾動時菜單移動不就好了???

    來自北京 回復
    1. 意思是,菜單固定浮動在瀏覽器頂部, 然后還有二級菜單, ,用了個笨辦法讓子菜單能顯示出來,如果看不懂,表示你沒有遇到類似的問題,這個問題比較小眾

      來自廣東 回復
    2. axure8里有一個元件叫“菜單”,可以添加子菜單,默認鼠標懸浮時顯示出來,而且他們是一體的

      來自北京 回復
    3. 嗯 ,這個我知道, 我這里一定要實現,讓菜單固定且浮動在頂部,這時候必須要借助動態面板,而加了動態面板,如果面板過大,會遮擋網頁正常的內容,過小,會讓子菜單顯示不出來,如果你只是普通菜單,不需要固定且浮動在頂部,就不需要看這個文章,這個文章是比較小眾的需求 ??

      來自廣東 回復
    4. “菜單”再加上頁面滾動到一定范圍時移動元件到指定位置不就好了? 就好比這個網站頂部這個菜單欄一樣的效果

      來自北京 回復
    5. 這個“菜單” 我設置成了母板,多個頁面共用,菜單還有背景色,比較復雜,似乎無法用移動到具體位置(比較麻煩),我文章給出的第二個方案則相對來說是最優方案,設置也方便

      來自廣東 回復
    6. 窗口滾動—添加條件–當前位置大于元件位置—移動元件到—-當前位置 Y左標變量[[Window.scrollY]]

      來自北京 回復
  3. 最新研究出的方法: 直接選中 包裹菜單的動態面板, 鼠標右鍵,設置 【自動調整為內容尺寸】,請點贊,頂上去

    來自廣東 回復
  4. 請問 axure7怎么實現?

    來自北京 回復
    1. 最新研究出的方法: 直接選中 包裹菜單的動態面板, 鼠標右鍵,設置 【自動調整為內容尺寸】

      來自廣東 回復