Para empezar debemos agregar la clase 'show-for-medium' al ul que contiene todos los elementos de navegacion. Esta clase le indica que va a ser visible a partir de dispositivos medianos
Tambien vamos a agregar un nuevo ul con la clase 'show-for-small-only' para que se muestre solo en dispositivos small. Y la clase 'menu align-spaced' porque va a ser un menu y va a estar centrado.
Dentro de ese ul vamos a agregar un li > a. Que contiene la palabra menu.
Ahora vamos a crear la parte del menu que se va a mostrar, para ello luego de la etiqueta body vamos a agregar un div con clase 'off-canvas-wrapper'. Y dentro de el vamos a crear un div con clase 'off-canvas-wrapper-inner' y le asignamos el atributo data-off-canvas-wrapper.
Dentro de el vamos a crear un div con clases 'off-canvas position-left' con un id='offCanvas', tambien es necesario agregarle el atributo data-off-canvas, dentro de el es donde va a estar nuestro menu del costado, para ello vamos a crear una etiqueta nav con atributo data-magellan para que nos proporcione el mismo efecto, y dentro de esa etiqueta vamos a agregar un ul con clases 'vertical menu' ya que va a ser un menu en sentido vertical.
Ahora lo que tenemos es que copiar todos las etiquetas li que contenga el menu que se muestra en dispositivos medianos en adelante y pegarla aqui.
El div con clase off-canvas-wrapper-inner necesita dos elementos o dos div, uno que acabamos de crear que seria el menu de la izquierda y el otro es todo el contenido de nuestra pagina.
Vamos a proceder a organiza el contenido de nuestra pagina, para ello dentro del off-canvas-wrapper-inner vamos a crear un div con clase 'off-canvas-content' tambien le vamos a asignar el atributo data-off-canvas-content , y dentro de el vamos a posicionar todo nuestro sitio, es decir todo lo que teniamos en el body ahora va dentro de este div.
Ahora lo que tenemos que hacer es que a la etiqueta <a> que cubre la palabra menu (la que se muestra en dispositivos small) le vamos a agregar el atributo data-toggle="--" pasandole por parametro el id que le asignamos a el menu escondido o al div con clase 'off-canvas position-left', en este caso le asignamos 'offCanvas'
Tener en cuenta que ahora el body es lo que se muestra debajo de la seccion del menu escondido, ya no forma parte de lo que se muestra en la primera pantalla.
En este punto ya tiene que servir 100% el menu de la izquierda, sin embargo si hacemos click en alguno de sus elementos nos hace el efecto del magellan pero no nos cierra el menu, este continua visible, vamos a hacer que al hacer click nos lleve al elemento seleccionado y nos cierre el menu, para eso vamos al archivo app.js y vamos a agregar esa funcionalidad.
Vamos a crear una variable, y vamos a llamar a jQuery, le vamos a decir que nos estamos refiriendo al id offCanvas.
const $offCanvas = $('#offCanvas')
Ahora le vamos a indicar que todos los elementos li que esten dentro del offCanvas, cuando hagaoms click queremos llamar una funcion anonima que recibe un evento
$offCanvas.find('li').click(function(ev){
alert('Funciona?');
})
Verificamos que funcione....
Ahora le vamos a indicar que el offCanvas llame a foundation y se cierre 'close'
$offCanvas.find('li').click(function(ev){
$offCanvas.foundation('close');
})
En este punto debe ser funcional, pero la seccion del menu despues de hacer click queda corrida hacia la derecha, para solucionar eso vamos a agregarle un id al menu principal (no al del costado) en este caso nos referimos al div que contiene el nav del menu, a ese div le vamos a poner el id='sticky'.. Y en el documento app.js lo vamos a obtener por jQuery:
const $sticky = $('#sticky');
Y dentro de la funcion vamos a agregar la siguiente linea de codigo:
setTimeout(function(){
$sticky.css('left', '0px') // Para que se pegue a la izquierda
}, 300)
la funcion setTimeout es una funcion que tienen todos los navegadores, lo que primero recibe es una funcion y luego un delete y al cumplirse ese delete va a llamar esa funcion. Los 300 es un valor numerico que puede variar, son milisegundos para que se llame esa funcion
