Menú Drilldown con Foundation

Carlos Enrique Rojas Falcone

student•

Hola,
A mi se queda abierto el submenú “Viernes / Sábado / Domingo” luego de pulsarlo, para que quede cerrado he hecho esto:

const $offCanvas = $('#offCanvas');
const $sticky = $('#sticky');
const $drilldown = $('[data-drilldown]');

$offCanvas.find('li').click(function (ev) {
  $drilldown.foundation('_hideAll');
  $offCanvas.foundation('close');
  setTimeout(function () {
    $sticky.css('left', '0px');
  }, 300);
})

Carlos Andrés Millan Satizabal

student•

Gracias, me sirvió mucho.

Cesar David Ramírez Dimaté

student•

En la versión de Foundation 6.4.2 ya no se presenta este inconveniente.

Juan David lemus Rubiano

student•

ese atributo no sirivio, me fui hasta la documentacion y lei e hice lo que decia ahi, y no paso nada

Juan David lemus Rubiano

student•

ya vi, era unas clases que estaban haciendo conflicto, ya lo solucione

Elvis Moreira

student•

Agregar la clase vertical menu en los submenús que hemos creado

Víctor de Jesús Pacheco Padilla

student•

¿Cómo hago para que el texto de “Back” aparezca en español?

Izael Ruelas Garcia

student•

Modifica esta línea

backButton: '<li class="js-drilldown-back"><a tabindex="0">Regresar</a></li>'

en el archivo foundation.js

Cesar David Ramírez Dimaté

student•

Es una mala práctica modificar directamente el archivo foundation.js, para eso existe el app.js. Utiliza jquery, encuentra el selector que necesitas y modifica el texto.

$("li.js-drilldown-back a:contains('Back')").html("Regresar");

Saludos.

Cesar Octavio de Jesus Meza Carrillo

student•

Ademas del atributo Data-Drilldown hay que agregar la clase “Drilldown” cierto? a mi no me funciono hasta que agregue esa clase en el menu superior

Cesar David Ramírez Dimaté

student•

en la versión de foundation 6.4.2 no es necesario hacer lo que dices.

Cesar Octavio de Jesus Meza Carrillo

student•

Muchas gracias 😃

Ricardo Garrido Cruz

student•

A mi en el section #sticky me aparece un style=“height:40.4px;” lo veo en el navegador pero en mi código no aparece y no se como quitarlo.
¿Algún consejo?

Ricardo Garrido Cruz

student•

Ya lo arregle, use style=“height:40px;” en el ul de tickets, osea, le quite ese 0.4px de sobra que tenía.

Hola,
A mi se queda abierto el submenú “Viernes / Sábado / Domingo” luego de pulsarlo, para que quede cerrado he hecho esto:

const $offCanvas = $('#offCanvas');
const $sticky = $('#sticky');
const $drilldown = $('[data-drilldown]');

$offCanvas.find('li').click(function (ev) {
  $drilldown.foundation('_hideAll');
  $offCanvas.foundation('close');
  setTimeout(function () {
    $sticky.css('left', '0px');
  }, 300);
})

Gracias, me sirvió mucho.

En la versión de Foundation 6.4.2 ya no se presenta este inconveniente.

ese atributo no sirivio, me fui hasta la documentacion y lei e hice lo que decia ahi, y no paso nada

ya vi, era unas clases que estaban haciendo conflicto, ya lo solucione

Agregar la clase vertical menu en los submenús que hemos creado

¿Cómo hago para que el texto de “Back” aparezca en español?

Modifica esta línea

backButton: '<li class="js-drilldown-back"><a tabindex="0">Regresar</a></li>'

en el archivo foundation.js

Es una mala práctica modificar directamente el archivo foundation.js, para eso existe el app.js. Utiliza jquery, encuentra el selector que necesitas y modifica el texto.

$("li.js-drilldown-back a:contains('Back')").html("Regresar");

Saludos.

Ademas del atributo Data-Drilldown hay que agregar la clase “Drilldown” cierto? a mi no me funciono hasta que agregue esa clase en el menu superior

en la versión de foundation 6.4.2 no es necesario hacer lo que dices.

Muchas gracias 😃

A mi en el section #sticky me aparece un style=“height:40.4px;” lo veo en el navegador pero en mi código no aparece y no se como quitarlo.
¿Algún consejo?

Ya lo arregle, use style=“height:40px;” en el ul de tickets, osea, le quite ese 0.4px de sobra que tenía.

Menú Drilldown con Foundation

¡Hemos renovado este curso!

¿Dónde aprender frontend actualizado?

Bienvenido al curso

Bienvenidos al curso de frontend con Bootstrap y Foundation

Introducción a Frameworks Frontend

Foundation

Presentación del proyecto para Foundation

Grilla de Foundation

Grilla Flex de Foundation

Foundation Icon Fonts 3

Títulos en Foundation

Barra de menú en Foundation

Botones en Foundation

Tabs con Foundation

Carrousel en Foundation con Orbit

Tablas de precio con Foundation

Igualar alto de columnas en Foundation

Contenido responsive con Foundation

Formularios con Foundation

Validación de formularios con Foundation

Navegación avanzada con Foundation

Barra de navegación fija con Foundation

Modificando Tabs en Foundation

Menú offcanvas con Foundation

Menú Drilldown con Foundation

Obteniendo datos del formulario

Bootstrap

Presentación del proyecto de Bootstrap

Bootstrap lanzó su versión v4.0.0-alpha.6

Contenedores en Bootstrap

Grillas en Bootstrap

Grillas Flex con Bootstrap

Barra de navegación con Bootstrap

Navegación responsive con Bootstrap

Carousel con Bootstrap

Imágenes responsivas con Bootstrap

Formularios con Bootstrap

Modals en Bootstrap

Breadcrumbs con Bootstrap

Filtros con Bootstrap

Cards con Bootstrap

Conclusiones

Cierre del Curso

Desafío 01

Desafío 02

Desafío 03

Desafío 04

Contenido complementario

Personalizando Bootstrap

Zurb Development Stack

Yeoman