# Foundation 下拉菜單 Foundation 下拉菜單允許用戶從預定義的下拉列表中選取一個值： ### 實例 ``` <!-- 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> ``` ### 實例解析 `.dropdown` 類為按鈕添加一個向下的箭頭符號"圖標。 使用按鈕或鏈接的 `data-dropdown="_id_"` 屬性來打開下拉菜單。 _id_ 值需要與下拉菜單的內容 (id01) 匹配。 在 &lt;div&gt;, &lt;nav&gt;, `&lt;ul&gt;` 中添加 `.f-dropdown` 類和 `data-dropdown-content` 屬性來創建下拉菜單的內容。 最后初始化 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">.. ``` ## 下拉菜單邊距 可以使用 `.content` 類為下拉菜單添加內邊距： ### 實例 ``` <!-- Default Dropdown --> <ul id="id01" data-dropdown-content class="f-dropdown">.. <!-- Dropdown with padding --> <ul id="id02" data-dropdown-content class="f-dropdown content">.. ``` ## 其他實例 &lt;div&gt; 下拉菜單中添加多媒體元素： ### 實例 ``` <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> ``` ## 下拉菜單方向 默認情況下下拉菜單在底部，可以通過添加 `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> ``` ## 下拉菜單觸發條件 默認情況下，下拉菜單在點擊按鈕后顯示。如果你需要在鼠標移動上去后顯示，可以在按鈕上使用 `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> ``` ## 分割按鈕 我們可以在按鈕上添加 `.split` 類來設置一個分割效果的按鈕，分割后會在 &lt;span&gt; 元素上生成一個方向向下的圖標按鈕: ### 實例 ``` <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> ```