亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

characters

Foundation 下拉菜單

Foundation 下拉菜單允許用戶從預(yù)定義的下拉列表中選取一個值：

實例

?<!--?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>
實例預(yù)覽 ?

實例解析

.dropdown 類為按鈕添加一個向下的箭頭符號"圖標(biāo)。

使用按鈕或鏈接的 data-dropdown="id" 屬性來打開下拉菜單。

id 值需要與下拉菜單的內(nèi)容 (id01) 匹配。

在 <div>, <nav>, <ul> 中添加 .f-dropdown 類和 data-dropdown-content 屬性來創(chuàng)建下拉菜單的內(nèi)容。

最后初始化 Foundation JS。

注意: 在小屏幕上，所有的下拉菜單的寬度是100%。

下拉菜單尺寸

使用 .tiny, .small, .medium, .large 或 .mega 來修改下拉菜單的寬度。

注意: 在小屏幕上，所有的下拉菜單的寬度是100%。

實例

<!--?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">..
實例預(yù)覽 ?

下拉菜單邊距

可以使用 .content 類為下拉菜單添加內(nèi)邊距：

實例

<!--?Default?Dropdown?-->
<ul?id="id01"?data-dropdown-content?class="f-dropdown">..

<!--?Dropdown?with?padding?-->
<ul?id="id02"?data-dropdown-content?class="f-dropdown?content">..
實例預(yù)覽 ?

其他實例

<div> 下拉菜單中添加多媒體元素：

實例

<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>
實例預(yù)覽 ?

下拉菜單方向

默認(rèn)情況下下拉菜單在底部，可以通過添加 data-options="align:left|right|top" 來修改其方向：

實例

<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>
實例預(yù)覽 ?

下拉菜單觸發(fā)條件

默認(rèn)情況下，下拉菜單在點擊按鈕后顯示。如果你需要在鼠標(biāo)移動上去后顯示，可以在按鈕上使用 data-options="is_hover:true" 屬性:

實例

?<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>
實例預(yù)覽 ?

分割按鈕

我們可以在按鈕上添加 .split 類來設(shè)置一個分割效果的按鈕，分割后會在 <span> 元素上生成一個方向向下的圖標(biāo)按鈕:

實例

<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>
實例預(yù)覽 ?


關(guān)于我們 聯(lián)系我們 留言板

手冊網(wǎng)

Previous article： Next article：