Agregando un menú lateral off-canvas

Clase 16 de 21 • Curso de Foundation 2018

Resumen

Off-canvas significa todo aquello que está fuera de tu visión, y Foundation tiene componentes para que incorpores elementos off-canvas de navegación.

Descubre en qué casos es conveniente usar este tipo de componente y cómo agregarlo en tu proyecto de acuerdo a la medida del dispositivo que va a visualizarlo.

David Behar

student•

No es necesario usar flexbox.

. Con text-align:right la hacemos .

&lt;div class=&quot;cell small-1 show-for-small-only small-order-3 small-offset-7&quot; style=&quot;text-align: right;font-size: 2em;&quot;&gt;
...
&lt;/div&gt;

Roger Carlos Ariel Alba

student•

¿Aquí se podía invocar por medio de handlebars el archivo del list, el que ya tiene el menú, cierto?

Guillermo Baldán López

student•

¿Qué son los handlebars?

Platzerito De Platzi

student•

Handlebars sirve para generar HTML a partir de objetos con datos en formato JSON. Handlebars es un popular sistema de plantillas en Javascript que te permite crear y formatear código HTML de una manera muy sencilla.

Michelle Verano

student•

Como podemos cambiar el contenido individual de cada elemento cuando utilizamos #repeat?

Guillermo Baldán López

student•

Entonces ya no los estás repitiendo y por tanto no tiene sentido usar repeat.

Daniel González

student•

Si usan emmet en su editor, este string genera todo el código de la lista:

ul.vertical.menu>li>a[href="#"]{Carrito}^li>a[href="#"]{Productos}^li>a[href="#"]{Usuario}^li>a[href="#"]{Instrucciones}^li>a[href="#"]{Contacto}^li>a[href="#"]{FAQ}

Harold David Avila Sabogal

student•

<<div class="off-canvas position-right" id="offCanvas" data-off-canvas>
  {{> off-canvas}}
</div>>

Dentro del partial off-canvas

<<ul class="vertical menu">
  <li><a href="#">Perfil</a></li>
  <li><a href="#">Mis rutas</a></li>
  <li><a href="#">Mis huertas</a></li>
  <li><a href="#">Mis recetas</a></li>
  <li><a href="#">Contacto</a></li>
  <li><a href="#">PQR</a></li>
</ul>>

Platzi Team

student•

Genial, Cada vez se mejor el poder del framework Foundation

Jose Angel Mejia Legorreta

company_admin•

Sacha, gracias a quedado muy claro y realmente es muy sencillo de darle dinamismo al sitio. Para el reto

<div class="grid-x grid-margin-x grid-margin-y">
    {{#repeat 25}}
        <div class="cell small-6 medium-4 large-3 product">
            <span class="label new">Nuevo</span>
            <img class="normal" src="assets/img/products/resist.jpg" alt="Resist!">
            <img class="hover" src="assets/img/products/resist_2.jpg" alt="Resist!">
            <span class="label promo">
                2 por $300 <i class="fi-shopping-cart"></i>
            </span>
        </div>
    {{/repeat}}
</div>
<hr></hr>
<div class="grid-x">
    <div class="cell small-12 medium-3 medium-offset-9 text-right text-uppercase ">
        <a class="button" href="#">Boton</a>
    </div>
</div>

Diego Fernando Rojas Quintero

student•

Foundation tiene componentes para que incorpores elementos off-canvas de navegación, Off-canvas significa todo aquello que está fuera de tu visión.

Esto quiere decir que podemos hacer que aparezca un menú desplegable de forma lateral haciéndolo aparecer con un solo click. Por ejemplo un botón de menú o un burger button.

https://get.foundation/sites/docs/off-canvas.html

&lt;body&gt;
  &lt;div class=&quot;off-canvas position-left&quot; id=&quot;offCanvas&quot; data-off-canvas&gt;
    &lt;!-- puedes meter el listado en html--&gt;
  &lt;/div&gt;
  &lt;div class=&quot;off-canvas-content&quot; data-off-canvas-content&gt;
    &lt;!-- Puedes poner el codigo de todo el cuerpo o body de tu html --&gt;
  &lt;/div&gt;
&lt;/body&gt;

position-left: puedes enviar la posición de tu menú desplegable ya sea en la sigientes posiciones: -left ; -right; -top ; -bottom.

data-toggle="offCanvas": Este atributo debe ser añadido a la etiqueta que desee hacer la acción de aparecer el menú desplegable, Por ejemplo un botón de menú o un burger button.

Gonzalo Pimentel

student•

Definitivamente los Frameworks Frontend ahorran mucho tiempo de desarrollo!

<<ul class="vertical menu">
  <li><a href="#">Perfil</a></li>
  <li><a href="#">Mis rutas</a></li>
  <li><a href="#">Mis huertas</a></li>
  <li><a href="#">Mis recetas</a></li>
  <li><a href="#">Contacto</a></li>
  <li><a href="#">PQR</a></li>
</ul>>

<div class="grid-x grid-margin-x grid-margin-y">
    {{#repeat 25}}
        <div class="cell small-6 medium-4 large-3 product">
            <span class="label new">Nuevo</span>
            <img class="normal" src="assets/img/products/resist.jpg" alt="Resist!">
            <img class="hover" src="assets/img/products/resist_2.jpg" alt="Resist!">
            <span class="label promo">
                2 por $300 <i class="fi-shopping-cart"></i>
            </span>
        </div>
    {{/repeat}}
</div>
<hr></hr>
<div class="grid-x">
    <div class="cell small-12 medium-3 medium-offset-9 text-right text-uppercase ">
        <a class="button" href="#">Boton</a>
    </div>
</div>

&lt;body&gt;
  &lt;div class=&quot;off-canvas position-left&quot; id=&quot;offCanvas&quot; data-off-canvas&gt;
    &lt;!-- puedes meter el listado en html--&gt;
  &lt;/div&gt;
  &lt;div class=&quot;off-canvas-content&quot; data-off-canvas-content&gt;
    &lt;!-- Puedes poner el codigo de todo el cuerpo o body de tu html --&gt;
  &lt;/div&gt;
&lt;/body&gt;

Agregando un menú lateral off-canvas

Introducción

¿Dónde aprender frontend actualizado?

Introducción a Foundation y al proyecto del curso

Repositorio del curso

¿Que es un framework frontend?

Creando el sitio web

Instalación de Foundation

Configuración de Foundation

Incorporando los iconos de Foundation

La nueva grilla XY de Foundation

Espaciado dentro de las grillas

Creando nuestro header

Creando el menú de navegación

Adaptando el menú de navegación para dispositivos móviles

Agregando un carrusel de imágenes con Orbit

Agregando una barra lateral de navegación

Agregando el listado de productos

Agregando un menú lateral off-canvas

Agregar Smooth Navigation

Llevando nuestro sitio a producción

Complementos- Creando emails para nuestros usuarios

Introducción a Foundation para Emails

Creando un email de recibo de compra

Conclusiones del curso