menu déroulant Fondation
Fondation menu déroulant permet à l'utilisateur de sélectionner une valeur dans la liste déroulante des prédéfini de:
Exemples
<A Href = "#" données -dropdown = "id01" class = "button dropdown"> Dropdown Bouton </ a>
<! - Contenu Dropdown ->
<Ul id = données "ID01" -dropdown contenu class = "f-déroulant">
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> Link 3 </ a> </ li>
</ Ul>
<! - Initialisation Fondation JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
Essayez »
Des exemples d'analyses
.dropdown classe comme un bouton de flèche vers le bas pour ajouter l'icône de symbole ".
Utilisez les boutons ou liens de data-dropdown=" id " attribut pour ouvrir le menu déroulant.
identifiant doit correspondre au contenu (ID01) de menu déroulant.
Dans <div>, <NAV>, <ul> ajouter .f-dropdown classes et data-dropdown-content attribut pour créer du contenu menu déroulant.
Dernière Fondation d'initialisation JS.
Remarque: Sur le petit écran, la totalité de la largeur du menu déroulant est de 100%.
Taille Menu déroulant
Utilisez .tiny , .small , .medium , .large ou .mega pour modifier la largeur du menu déroulant.
Remarque: Sur le petit écran, la totalité de la largeur du menu déroulant est de 100%.
Exemples
<ul id = données "ID01" -dropdown contenu class = "f-déroulant minuscule"> ..
<! - Petit Dropdown: mum largeur est 300px ->
<ul id = données "ID02" -dropdown contenu class = "f-déroulant small"> ..
<! - Medium Dropdown: mum largeur est 500px ->
<Ul id = données "ID03" -dropdown contenu class = "medium f-déroulant">
<! - Grand Dropdown: mum largeur est 800px ->
<ul id = données "id04" -dropdown contenu class = "f-menu déroulant large"> ..
<- Mega 100% :! Dropdown largeur ->
<ul id = données "id04" -dropdown contenu class = "f-déroulant méga"> ..
Essayez »
Marges le menu déroulant
Vous pouvez utiliser .content classe pour ajouter le remplissage dans le menu déroulant:
Exemples
<ul id = données "ID01" -dropdown contenu class = "f-déroulantes"> ..
<! - Dropdown avec rembourrage ->
<ul id = données "ID02" -dropdown contenu class = "contenu f-menu déroulant"> ..
Essayez »
D'autres exemples
<Div> dans le menu déroulant pour ajouter des éléments multimédias:
Exemples
<Div id = données "ID01" -dropdown-content class = "teneur moyenne f-menu déroulant">
<H4> Paris Titre </ h4 >
<P> Du texte .. texte .. </ p>
<Img src = "paris.jpg" alt = width = hauteur "Paris" "400" = "300">
<P> Paris, je te aime. </ P>
</ Div>
Essayez »
La direction du menu déroulant
Par défaut, le menu déroulant en bas, vous pouvez ajouter des data-options="align:left|right|top" | right | top" pour changer sa direction:
Exemples
<A Href = "#" données -dropdown = "id02" data-options = "align: top" class = "button dropdown"> Top </ a>
<A Href = "#" données -dropdown = "id03" data-options = "align: bottom" class = "button dropdown"> Bottom </ a>
<A Href = "#" données -dropdown = "id04" data-options = "align: classe left" = "button dropdown"> Gauche </ a>
Essayez »
Des menus déroulants déclenchent conditions
Par défaut, le menu déroulant est affiché sur le bouton est cliqué. Si vous devez déplacer l'écran de la souris, vous pouvez utiliser le bouton data-options="is_hover:true" " attribut:
Exemples
<Ul id = données "ID01" -dropdown contenu class = "f-déroulant">
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> Link 3 </ a> </ li>
</ Ul>
Essayez »
bouton de Split
Nous pouvons ajouter le bouton .split classe pour définir un bouton d'effet de division va générer un bouton d'icône de direction vers le bas sur le <span> élément de segmentation:
Exemples
<Span données déroulante = "ID01 "> </ span>
</ Button>
<Ul id = données "ID01" -dropdown contenu class = "f-déroulant">
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> Link 3 </ a> </ li>
</ Ul>
<! - Initialisation Fondation JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
Essayez »