The best Foundation drop-down menu Tutorial In 2024, In this tutorial you can learn
Size drop-down menu,Margins drop-down menu,Other examples,The direction of the pull-down menu,Pull-down menus trigger conditions,Split button,
Foundation drop-down menu
Foundation drop-down menu allows the user to select a value from the drop-down list of predefined's:
Examples
<-! 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>
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
<-! Tiny Dropdown: max- width is 200px ->
<Ul id = "id01" data -dropdown-content class = "f-dropdown tiny"> /en
<-! Small Dropdown: max- width is 300px ->
<Ul id = "id02" data -dropdown-content class = "f-dropdown small"> /en
<-! 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"> /en
<- Mega Dropdown:! 100% width ->
<Ul id = "id04" data -dropdown-content class = "f-dropdown mega"> /en
Margins drop-down menu
You can use .content
class to add padding to the drop-down menu:
Examples
<-! Default Dropdown ->
<Ul id = "id01" data -dropdown-content class = "f-dropdown"> /en
<-! Dropdown with padding ->
<Ul id = "id02" data -dropdown-content class = "f-dropdown content"> /en
Other examples
<Div> drop-down menu to add multimedia elements:
Examples
<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 /en some text /en </ p>
<Img src = "paris.jpg" alt = "Paris" width = "400" height = "300">
<P> Paris, je t'aime. </ P>
</ Div>
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 = "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>
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
<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 the button .split
class to set a split effect button will generate a downward direction icon button on the <span> element of segmentation:
Examples
<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>