Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Foundation for Apps
Webdesign

Construir una barra de Navegación superior por fuera con Foundation 5

by
Length:LongLanguages:

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)



En un tutorial anterior, aprendimos cómo personalizar la barra superior de Foundation 4 usando CSS. Desde entonces ZURB ha lanzado Foundation 5; más rápido, más delgado y más poderoso que su predecesor. Lo que también se nota es que ZURB ha recuperado la funcionalidad Off Canvas, que se puede encontrar en Foundation 3.

Hoy, vamos a combinar la función fuera del lienzo con nuestra barra de navegación superior. El resultado será una agradable navegación personalizada para usuarios de escritorio y un elegante menú fuera de alcance para usuarios de tabletas y dispositivos móviles.

Nota: la funcionalidad que usamos aquí no funciona para IE8 y versiones anteriores. He incluido una solución para IE9 en los recursos enumerados al final del tutorial.

Requisitos

Para seguir este tutorial, necesitarás alguna experiencia intermedia en lo siguiente:

  • Conocimiento básico de Foundation y The Grid System
  • Conocimiento de trabajar con un proyecto de la Foundation Sass y Compass

Empezando

Configurando el Ambiente

Si aún no lo ha hecho, continúe y configure Compass y Sass utilizando la documentación de Foundation Sass si necesita instrucciones. Si ya lo ha hecho, aquí está la configuración rápida para crear un nuevo proyecto de Foundation 5 utilizando el símbolo del sistema:

Ruby Simbolo del sistema

Vaya a su directorio preferido

cd c:/user/tu-ambiente-de-trabajo

Usa este comando para crear tu proyecto

foundation new tu-projecto

Ve a tu archivo de proyecto recién creado

cd tu-projecto

Y use este comando para obtener brújula y ver y compilar sus archivos Sass

compass watch

Si todo fue exitoso, su directorio debería verse más o menos así:

Directorio de proyectos de Foundation 5

Solo queda una cosa y es crear nuestro style.scss. Haga esto creando un nuevo archivo en la carpeta scss y nombrando ese archivo style.scss. Necesitaremos este archivo más tarde. Si tiene Compass en ejecución, su style.scss ya debería estar compilado en un archivo style.css en su carpeta de stylesheets. Genial, tenemos todo configurado, comencemos con la codificación de nuestra estructura HTML general.

Configurando la estructura HTML

Paso 1: Marcado general

Abra su index.html y elimine todo el contenido entre las etiquetas del cuerpo, a excepción de las secuencias de comandos justo antes del </body>. Los necesitamos para que funcionen todas las funciones de la Foundation. En segundo lugar, continúe y agregue la siguiente línea de código en <head>, para asegurarse de que cargamos en nuestro archivo CSS.

Con esa configuración, agreguemos un par de secciones y brindemos a nuestra página contenido ficticio. Comenzaremos con algunos conceptos básicos, agregando un encabezado, principal, servicio, llamada a la acción, pie de página y sección de derechos de autor.

Aquí hemos agregado una sección de encabezado con un logotipo, luego una sección principal dividida en la sección de contenido, tres servicios y un llamado a la acción. Por último, hay una sección de pie de página con tres columnas y una sección de derechos de autor. Marcado directo hasta ahora, ¡vayamos a la barra superior!

Paso 2: Marcado de barra superior

Vamos a envolver nuestra barra superior dentro de una sección con navigation-section de la clase, por motivos de estilo. También vamos a darle a esta sección otra clase: show-for-large-up. Esto asegura que la barra superior solo se muestre para dispositivos de cierto ancho mínimo o superior. Esta es una de las muchas clases de visibilidad que la Foundation nos brinda (puede leer más sobre esto en la documentación del componente de Fundation). Ahora para el marcado:

Nota: Incluya la barra superior de datos dentro de su navegador. De esta forma, nos aseguramos de que el JavaScript de nuestra barra superior funcione correctamente (como el menú desplegable, por ejemplo).

Paso 3: Marcado fuera del canvas

Nuestro menú fuera del lienzo estará oculto más allá de los límites de la ventana gráfica. En el momento en que presionemos el menú, Offcanvas se deslizará hacia adentro (desde la izquierda en nuestro caso) y moverá el contenido de la página hacia la derecha. En nuestra configuración vamos a excluir el encabezado y el pie de página en este movimiento. Solo el área de contenido se desplazará a un lado, dejando el encabezado y el pie de página en su lugar.

Además, al desplazarse hacia abajo, nuestro encabezado (que puede contener un logotipo y tal vez otro contenido) aparecerá fijo en la parte superior de la página (Nota: la página debe contener suficiente contenido para que funcione, porque de lo contrario la sección del pie de página también flotar sobre nuestro menú Offcanvas). Esto significa que tenemos que "envolver" Off-canvas en nuestra sección de contenido principal. Después de la sección barra superior de navegación y antes de nuestra sección de contenido principal, coloque el siguiente código HTML:

Vamos a descomponerlo. Hemos creado dos elementos div; uno con la clase off-canvas-wrap y uno con la envoltura interna de la clase inner-wrap. El envoltorio fuera del lienzo oculta nuestro contenido hasta que se presiona el botón de menú. La envoltura interna contiene nuestra barra de menú de navegación, nuestro menú del lado izquierdo fuera del lienzo y la sección de contenido principal. Le hemos dado al navegador una clase hide-for-large-up, para asegurarnos de que solo se muestre para dispositivos medianos y pequeños. Al dejar de lado una clase de menú left-off-canvas-menu, nos aseguramos de que nuestro menú fuera del lienzo aparezca a la izquierda de la pantalla. Los elementos del menú en nuestro menú fuera del lienzo son similares a la barra superior. Para fuera de la lona utilizamos una lista desordenada con una clase off-canvas-list para que la magia suceda.

Todo lo que queda por hacer es darle al usuario una forma de cerrar el menú Offcanvas. Después de eso cerramos off-canvas-wrap y los divs inner-wrap. Agregue esto justo después de cerrar la sección principal.

Paso 4: resultados hasta el momento

Vamos a abrir nuestro navegador y ubicar el archivo index.html que acabamos de editar. El resultado debe parecerse a las capturas de pantalla a continuación (pruébelo, ¡cambie el tamaño de su navegador!)

Barra superior de HTML
HTML Offcanvas

Configurando Sass

De acuerdo, tenemos una barra superior completamente funcional para los usuarios de computadoras de escritorio y un menú liso y elegante para los usuarios de dispositivos más pequeños como tabletas y teléfonos. Sin embargo, nuestra página realmente no parece una página web real, así que sigamos adelante y agreguemos algo de sabor a ella.

Paso 1: estilo general

Primero, daremos un color a nuestras secciones generales (encabezado, navegación, principal, pie de página y derechos de autor). También daremos a nuestro cuerpo un color de fondo sutil y crearemos una clase full-width para que su ancho se establezca en 100%. En el HTML hemos agregado esa clase de ancho completo a las diferentes secciones, para asegurarnos de que se extienden hasta los bordes del navegador. Eche un vistazo al Sass a continuación:

Nota: ¡Para agregar Starry BG, descargue los archivos fuente!

Le dimos a nuestro diseño un poco más de espacio para respirar agregando algo de relleno e hicimos un diseño de ancho completo al darle a todas las secciones un color de fondo y un ancho mínimo del 100%. También dimos a los elementos del menú una transformación de texto en mayúscula.

Paso 2: Estilos de barra superior usando _settings.scss

Para darle un estilo a nuestra barra superior, profundicemos en el archivo _settings.scss. Dependiendo del editor de código que esté utilizando, use la opción find y escriba "Topbar" ("Barra superior"). Aquí puede encontrar todas las configuraciones para alterar la barra superior estándar. Para este tutorial, vamos a usar dos opciones diferentes; uno para darle a nuestra barra superior un poco más de altura y otra para aumentar un poco el tamaño de la fuente. Descomente y modifique las siguientes dos configuraciones:

Paso 3: Estilos fuera del canvas con _setting.scss

También vamos a usar el archivo de configuración para ajustar nuestro menú fuera del lienzo. El marcado estándar fuera de la lona es bastante bueno, pero asegurémonos de que la sección de navegación tenga la misma altura que la sección de navegación de la barra superior. Además de eso, tendremos que mover el ícono de la hamburguesa un poco, para que quede centrado desde la parte superior. En el archivo de configuración, busque y escriba "Sin lienzo". Descomente y modifique las siguientes dos configuraciones:

Paso 4: disfruta de tus resultados

Guarde el archivo, permita que compás compile sus archivos y actualice su navegador. ¡Ahora nuestra página tiene un poco más de jugo y todo está impulsado por la gran barra superior y fuera del canvas! Tus resultados deberían verse más o menos así:

Barra superior Sass
Sass Offcanavs

Conclusión

Hemos creado una página agradable y receptiva usando la barra superior de Foundation y fuera del lienzo, agregando un pequeño estilo Sass propio para darle un poco de jugo y tweeking a la página usando el archivo _settings.scss.

Obviamente, podemos hacer mucho más con el _settings.scss luego lo demostré. Siga adelante y juegue con la configuración para ver qué tan fácil puede personalizar los elementos de la Foundation en su sitio, o pruébelos en esta demostración para personalizar aún más su barra superior / menú sin lienzo. ¡Que te diviertas!

Recursos



Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.