menú desplegable Fundación
menú desplegable Fundación permite al usuario seleccionar un valor de la lista desplegable de predefinido de:
Ejemplos
<A Href = "#" datos -dropdown = "id01" class = "button dropdown"> desplegable del botón </ a>
<! - Contenido desplegable ->
<Ul id = "datos" ID01 -dropdown-contenido de clase = "f-desplegable">
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> Link 3 </ a> </ li>
</ Ul>
<! - Inicializar Fundación JS ->
<Script>
$ (Document) ready (function () {
$ (Document) .foundation ();
})
</ Script>
Trate »
Ejemplos de analítica
.dropdown clase como un botón de flecha hacia abajo para poner el icono de símbolo ".
Utilice los botones o enlaces data-dropdown=" id " atributo para abrir el menú desplegable.
Identificación del valor debe coincidir con el contenido (ID01) menú desplegable.
En <div>, <NAV>, <ul> añadir .f-dropdown clases y data-dropdown-content de atributos para crear el contenido del menú desplegable.
Fundación última inicialización JS.
Nota: En la pequeña pantalla, la totalidad de la anchura del menú desplegable es 100%.
Tamaño menú desplegable
Utilice .tiny , .small , .medium , .large o .mega para modificar el ancho del menú desplegable.
Nota: En la pequeña pantalla, la totalidad de la anchura del menú desplegable es 100%.
Ejemplos
<id = datos UL "ID01" -dropdown-contenido de clase = "f-desplegable pequeña"> ..
<! - Pequeño desplegable: Max- anchura es de 300 px ->
<id = "datos Ul id02" -dropdown-contenido de clase = "f-desplegable pequeña"> ..
<! - Medio desplegable: Max- anchura es de 500px ->
<Id = "datos" id03 Ul -dropdown-contenido de clase = "medio F-desplegable">
<! - Large desplegable: Max- anchura es de 800px ->
<id = "datos Ul id04" -dropdown-contenido de clase = "f-desplegable large"> ..
<- Mega desplegable :! 100% de ancho ->
<ul id = "datos" id04 -dropdown-contenido de clase = "mega-f-desplegable"> ..
Trate »
Márgenes menú desplegable
Puede utilizar .content de clase para agregar relleno para el menú desplegable:
Ejemplos
<id = datos UL "ID01" -dropdown-contenido de clase = "f-desplegables"> ..
<! - Desplegable con relleno ->
<id = "datos Ul id02" -dropdown contenido class = "contenido-f desplegable"> ..
Trate »
otros ejemplos
<Div> en el menú desplegable para agregar elementos multimedia:
Ejemplos
<Div id = "datos" ID01 -dropdown contenido class = "contenido medio F-desplegable">
<H4> París Título </ h4 >
<P> Un texto .. un poco de texto .. </ p>
<Img src = "paris.jpg" alt = "París" width = "400" height = "300">
<P> Paris, je t'aime. </ P>
</ Div>
Trate »
La dirección del menú desplegable
De manera predeterminada, el menú desplegable en la parte inferior, se puede añadir data-options="align:left|right|top" | right | top" para cambiar su dirección:
Ejemplos
<A Href = "#" datos -dropdown = "id02" data-options = "align: clase top" = "button dropdown"> Top </ a>
<A Href = "#" datos -dropdown = "id03" data-options = "align: bottom" class = "button dropdown"> Inferior </ a>
<A Href = "#" datos -dropdown = "id04" data-options = "align: clase left" = "button dropdown"> izquierda </ a>
Trate »
Menús desplegables desencadenan condiciones
De forma predeterminada, se muestra el menú desplegable en la que se hace clic en el botón. Si tiene que mover el ratón hacia arriba la pantalla, puede utilizar el botón data-options="is_hover:true" " atributo:
Ejemplos
<Ul id = "datos" ID01 -dropdown-contenido de clase = "f-desplegable">
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> Link 3 </ a> </ li>
</ Ul>
Trate »
botón de división
Podemos agregar el botón .split clase para establecer un botón de efecto de división generará un botón a la baja dirección icono en el elemento <span> de la segmentación:
Ejemplos
<Span datos desplegable = "ID01 "> </ span>
</ Button>
<Ul id = "datos" ID01 -dropdown-contenido de clase = "f-desplegable">
<Li> <a href = "#"> Link 1 </ a> </ li>
<Li> <a href = "#"> Link 2 </ a> </ li>
<Li> <a href = "#"> Link 3 </ a> </ li>
</ Ul>
<! - Inicializar Fundación JS ->
<Script>
$ (Document) ready (function () {
$ (Document) .foundation ();
})
</ Script>
Trate »