?
Ce document utilise Manuel du site Web PHP chinois Libérer
Foundation 下拉菜單
Foundation 下拉菜單允許用戶從預(yù)定義的下拉列表中選取一個(gè)值：
實(shí)例
?<!--?Trigger?the?Dropdown?-->
<a?href="#"?data-dropdown="id01"?class="button?dropdown">Dropdown?Button</a>
<!--?Dropdown?content?-->
<ul?id="id01"?data-dropdown-content?class="f-dropdown">
??<li><a?href="#">Link?1</a></li>
??<li><a?href="#">Link?2</a></li>
??<li><a?href="#">Link?3</a></li>
</ul>
<!--?Initialize?Foundation?JS?-->
<script>
$(document).ready(function()?{
????$(document).foundation();
})
</script>實(shí)例預(yù)覽 ?實(shí)例解析
.dropdown 類(lèi)為按鈕添加一個(gè)向下的箭頭符號(hào)"圖標(biāo)。
使用按鈕或鏈接的 data-dropdown="id" 屬性來(lái)打開(kāi)下拉菜單。
id 值需要與下拉菜單的內(nèi)容 (id01) 匹配。
在 <div>, <nav>, <ul> 中添加 .f-dropdown 類(lèi)和 data-dropdown-content 屬性來(lái)創(chuàng)建下拉菜單的內(nèi)容。
最后初始化 Foundation JS。
注意: 在小屏幕上，所有的下拉菜單的寬度是100%。
下拉菜單尺寸
使用 .tiny, .small, .medium, .large 或 .mega 來(lái)修改下拉菜單的寬度。
注意: 在小屏幕上，所有的下拉菜單的寬度是100%。
實(shí)例
<!--?Tiny?Dropdown:?max-width?is?200px?--> <ul?id="id01"?data-dropdown-content?class="f-dropdown?tiny">.. <!--?Small?Dropdown:?max-width?is?300px?--> <ul?id="id02"?data-dropdown-content?class="f-dropdown?small">.. <!--?Medium?Dropdown:?max-width?is?500px?--> <ul?id="id03"?data-dropdown-content?class="f-dropdown?medium"> <!--?Large?Dropdown:?max-width?is?800px?--> <ul?id="id04"?data-dropdown-content?class="f-dropdown?large">.. <!--?Mega?Dropdown:?100%?width?--> <ul?id="id04"?data-dropdown-content?class="f-dropdown?mega">..實(shí)例預(yù)覽 ?
下拉菜單邊距
可以使用 .content 類(lèi)為下拉菜單添加內(nèi)邊距：
實(shí)例
<!--?Default?Dropdown?--> <ul?id="id01"?data-dropdown-content?class="f-dropdown">.. <!--?Dropdown?with?padding?--> <ul?id="id02"?data-dropdown-content?class="f-dropdown?content">..實(shí)例預(yù)覽 ?
其他實(shí)例
<div> 下拉菜單中添加多媒體元素：
實(shí)例
<a?href="#"?data-dropdown="id01"?class="button?dropdown">Dropdown?Button</a> <div?id="id01"?data-dropdown-content?class="f-dropdown?medium?content"> ??<h4>Paris?Title</h4> ??<p>Some?text..?some?text..</p> ??<img?src="paris.jpg"?alt="Paris"?width="400"?height="300"> ??<p>Paris,?je?t'aime.</p> </div>實(shí)例預(yù)覽 ?
下拉菜單方向
默認(rèn)情況下下拉菜單在底部，可以通過(guò)添加 data-options="align:left|right|top" 來(lái)修改其方向：
實(shí)例
<a?href="#"?data-dropdown="id01"?data-options="align:right"?class="button?dropdown">Right</a> <a?href="#"?data-dropdown="id02"?data-options="align:top"?class="button?dropdown">Top</a> <a?href="#"?data-dropdown="id03"?data-options="align:bottom"?class="button?dropdown">Bottom</a> <a?href="#"?data-dropdown="id04"?data-options="align:left"?class="button?dropdown">Left</a>實(shí)例預(yù)覽 ?
下拉菜單觸發(fā)條件
默認(rèn)情況下，下拉菜單在點(diǎn)擊按鈕后顯示。如果你需要在鼠標(biāo)移動(dòng)上去后顯示，可以在按鈕上使用 data-options="is_hover:true" 屬性:
實(shí)例
?<a?href="#"?data-dropdown="id01"?data-options="is_hover:true"?class="button?dropdown">Hover?over?me</a> <ul?id="id01"?data-dropdown-content?class="f-dropdown"> ??<li><a?href="#">Link?1</a></li> ??<li><a?href="#">Link?2</a></li> ??<li><a?href="#">Link?3</a></li> </ul>實(shí)例預(yù)覽 ?
分割按鈕
我們可以在按鈕上添加 .split 類(lèi)來(lái)設(shè)置一個(gè)分割效果的按鈕，分割后會(huì)在
<span> 元素上生成一個(gè)方向向下的圖標(biāo)按鈕:
實(shí)例
<button?class="button?split">Split?Button?
??<span?data-dropdown="id01"></span>
</button>
<ul?id="id01"?data-dropdown-content?class="f-dropdown">
??<li><a?href="#">Link?1</a></li>
??<li><a?href="#">Link?2</a></li>
??<li><a?href="#">Link?3</a></li>
</ul>
<!--?Initialize?Foundation?JS?-->
<script>
$(document).ready(function()?{
????$(document).foundation();
})
</script>實(shí)例預(yù)覽 ?關(guān)于我們 聯(lián)系我們 留言板
手冊(cè)網(wǎng)