模板:菜單欄

萌娘百科,萬物皆可萌的百科全書!轉載請標註來源頁面的網頁連結,並聲明引自萌娘百科。內容不可商用。
貢獻者:
Template-info.svg 模板文檔  [查看] [] [歷史] [刷新]

構建一個菜單工具條。

參數

主要參數

本模板的參數格式可以採用定義ul相同,即*號。自動產生菜單。

{{菜單欄|
*菜單1
*菜單2
**菜單2-1
**菜單2-2
*菜單3
}}

將產生一個擁有3個菜單項,第二個菜單項擁有兩個子項的菜單。其中,連結將在菜單項點擊時觸發。

#號與*號效果類似,但其中的[[參數1|參數2|參數3]]將被解釋為{{摺疊標籤/高級|參數1(標籤名)|參數2(默認文本)|參數3(激活文本)}}。同樣,標籤將在菜單項點擊時觸發摺疊。

可選參數

  • 菜單
    • 菜單寬度width):默認為auto,指定為min-content,使菜單不再佔滿整行。
    • 菜單背景色back-color):默認為white
    • 菜單框架寬度border-width):默認為1px
    • 菜單框架色border-color):默認為green
    • 菜單開端寬度left-width):默認為15px
    • 菜單彈出方向pop-direction):指定一級菜單的彈出方向。默認為down。方向可選值為left right up down
    • 菜單項排列方向flex-direction):默認為rigth。方向可選值為left right up down
    • 菜單項分割線item-split):菜單項間默認存在框架同色分割線,指定為false取消。
  • 菜單項
    • 菜單項最小寬度item-min-width):默認為50px
    • 菜單項選擇色select-color):默認為菜單框架色
    • 菜單項選擇框架寬度select-border-width):默認為0。若不為零則使菜單懸停時顯示框架而不是全部高亮。
    • 排列flex):默認為auto。產生菜單項填滿菜單效果。
    • 菜單文字位置child-text-align):默認為center文字居中。可選left right
  • 子菜單
    • 子菜單背景色child-back-color):默認為菜單背景色
    • 子菜單框架寬度child-border-width):默認為菜單框架寬度
    • 子菜單框架色child-border-color):默認為菜單框架色
    • 子菜單展開方向child-flex-direction):默認為菜單彈出方向
    • 子菜單彈出方向child-pop-direction):指定多級菜單的彈出方向。默認為right
    • 子菜單項分割線item-split):子菜單項間默認存在框架同色分割線,指定為false取消。
  • 子菜單項
    • 子菜單項最小寬度item-min-width):
    • 子菜單項選擇色child-select-color):默認為子菜單框架色
    • 子菜單項選擇框架寬度child-select-back-color):默認為3px
    • 子菜單文字位置child-text-align):默認為菜單文字位置文字居中。

示例

直接使用

默認參數將得到一個萌百風格的菜單。

{{菜單欄|
*菜單1
*菜單2
**菜單2-1
**菜單2-2
***菜單2-2-1
*菜單3
}}
菜單1

菜單2
菜單2-1

菜單2-2
菜單2-2-1

菜單3

系統風格

{{菜單欄|菜單背景色=#F0F0F0|菜單框架色=#BEBEBE|菜單項選擇色=blue|菜單寬度=min-content|子菜單項選擇框架寬度=0|子菜單項選擇色=blue|子菜單文字位置=left|
*文件(F)
**打開(O)
**保存(S)
**關閉(C)
*編輯(E)
*工具(T)
*幫助(H)
}}
文件(F)
打開(O)

保存(S)

關閉(C)

編輯(E)

工具(T)

幫助(H)

功能使用

{{菜單欄|
*[[這是一個鏈接]]
*這是一個菜單
**[[這是一個鏈接]]
##[[摺疊|這是一個名字為“摺疊”的摺疊標籤|點擊後顯示這樣]]
**這是一個子菜單
###[[-非摺疊|但本摺疊名是“非摺疊”而不是“-非摺疊”|這個標籤默認顯示取反]]
***菜單能無限的循環下去
****這裡就是盡頭
#[[這是一個摺疊標籤]]
}}

這是一個菜單

這是一個名字為「摺疊」的摺疊標籤
_

這是一個子菜單
這個標籤默認顯示取反
_

菜單能無限的循環下去
這裡就是盡頭

這是一個摺疊標籤
_


不同方向

向上

{{菜單欄|菜單彈出方向=up|
*項1
*項2
**項2-1
**項2-2
***項2-2-1
***項2-2-2
*項3
}}
項1

項2
項2-1

項2-2
項2-2-1

項2-2-2

項3

向右

{{菜單欄|菜單寬度=min-content|菜單項排列方向=down|菜單彈出方向=rigth|子菜單展開方向=down|
*項1
*項2
**項2-1
**項2-2
***項2-2-1
***項2-2-2
*項3
}}
項1

項2
項2-1

項2-2
項2-2-1

項2-2-2

項3

摺疊菜單高級運用

使父菜單作為全選性摺疊按鈕。

{{菜單欄|
#[[RPG#ACT#SLG|單機遊戲]]
##[[RPG]]
##[[ACT]]
##[[SLG]]
#網絡遊戲
#小遊戲
}}
單機遊戲
_
RPG
_

ACT
_

SLG
_

網路遊戲

小遊戲
此頁面最後編輯於 2020年9月27日 (週日) 07:37。
搜尋萌娘百科 (按"/"快速搜尋)
有新的未讀公告

阅读更多:Template:菜單欄(http://mzh.moegirl.tw/Template%3A%E8%8F%9C%E5%96%AE%E6%AC%84 )
本文引自萌娘百科(http://mzh.moegirl.tw ),文字内容默认使用《知识共享 署名-非商业性使用-相同方式共享 3.0 中国大陆》协议。