Foundation drop-down menu
The Foundation drop-down menu allows users to select a value from a predefined drop-down list:
Instance
<!-- 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
>
Try it out . . .
Instance resolution
.dropdown
class adds a down arrow symbol "icon" to the button.
Open the drop-down menu
data-dropdown="
id
"
property.
The id
value needs to match the contents of the drop-down menu (id01).
Add the
.f-dropdown
class and
data-dropdown-content
<ul>
to create the contents of the drop-down menu in the .
Finally, initialize Foundation JS.
Note: On
the small screen, the width of all drop-down menus is 100%.
Drop-down menu size
Use
.tiny
.small
.medium
.large
.mega
modify the width of the drop-down menu.
Note: On
the small screen, the width of all drop-down menus is 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"
>
..
尝试一下 »
其他实例
<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.. s
ome text..
<
/p
>
<
img
src=
"paris.jpg"
alt=
"Paris"
width=
"400"
height=
"300"
>
<
p
>
Paris, je t'aime.
<
/p
>
<
/div
>
尝试一下 »
Drop-down menu orientation
By default, the drop-down menu is at the bottom, and you can modify its orientation by
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
>
尝试一下 »
The drop-down menu triggers the condition
By default, the drop-down menu appears when you click the button.
If you need to display it after you move the mouse up, you can
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 button
We can add a
.split
to the button to set a button for the split effect, which, after splitting, generates a downward icon button on the element:
实例
<
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
>
尝试一下 »