Foundation drop-down menu
Foundation drop-down menu allows the user to select a value from the drop-down list of predefined's:
Examples
<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"
Examples of analytical
.dropdown class as a down arrow button to add the symbol "icon.
Use the buttons or links data-dropdown=" id " attribute to open the drop-down menu.
id value needs to match the contents (id01) pull-down menu.
In <the div>, <NAV>, <ul> add .f-dropdown classes and data-dropdown-content attribute to create content drop-down menu.
Last initialization Foundation JS.
Note: On the small screen, all of the width of the drop-down menu is 100%.
Size drop-down menu
Use .tiny , .small , .medium , .large or .mega to modify the width of the drop-down menu.
Note: On the small screen, all of the width of the drop-down menu is 100%.
Examples
<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"> ..
try it"
Margins drop-down menu
You can use .content class to add padding to the drop-down menu:
Examples
<Ul id = "id01" data -dropdown-content class = "f-dropdown"> ..
<-! Dropdown with padding ->
<Ul id = "id02" data -dropdown-content class = "f-dropdown content"> ..
try it"
Other examples
<Div> drop-down menu to add multimedia elements:
Examples
<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>
try it"
The direction of the pull-down menu
By default, the drop-down menu at the bottom, you can add data-options="align:left|right|top" | right | top" to change its direction:
Examples
<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>
try it"
Pull-down menus trigger conditions
By default, the drop-down menu is displayed on the button is clicked. If you need to move the mouse up display, you can use the button data-options="is_hover:true" " attribute:
Examples
<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>
try it"
Split button
We can add the button .split class to set a split effect button will generate a downward direction icon button on the <span> element of segmentation:
Examples
<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>
try it"