Advertisement
  1. Web Design
  2. Foundation for Apps
Webdesign

Como Crear una Barra Reducida y Ajustada en la parte superior con Foundation

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

Una tendencia muy común estos días es el uso de una navegación fija, la cual se reduce para volverse menos molesta a medida que los usuarios se desplazan hacia abajo de la página. En este curso, voy a mostrarle como puede lograr este usando ZURBs Foundation TopBar, y algunos Sass personalizados y jQuery. Para estar equipado, añadiremos un par de media queries para hacer nuestro menú responsive [flexible]. ¡Empecemos!

Requerimientos

Necesitará un par de cosas para conseguir dar un buen viaje por durante éste curso:

  • Entendimiento Básico de Foundation TopBar
  • Entendimiento básico de Foundation y The Grid System [un Sistema de cuadrículas].
  • Conocimientos de trabajar con Sass y Compass
  • Un poco de experiencia en el uso de jQuery algunos eventos prácticos

Empezar

Primero, vamos a configurar nuestro entorno de trabajo. Si usted no sabe como hacer esto usando Compass y Sass, entonces revise la sección “Iniciar” de Construir una Barra Superior Desactivado de la Navegación con Foundation 5.

Tiene que crear su nuevo proyecto Foundation y usar compass watch para compilar su proyecto. Crearemos nuestro propio style.scss en la carpeta scss para nuestra personalización y algunos estilos generales. Con esta configuración, nos introduciremos dentro de la estructura general HTML, ¡vamos!

Configurando la estructura HTML.

Paso 1: Markup* General. [Lenguaje de HTML para describir las páginas web usando marcado o etiquetas]

Habiendo empezado un nuevo proyecto Foundation, vaya al archivo index.html y empiece quitando todo el contenido entre las etiquetas body excepto por la etiqueta script que está justo antes de la etiqueta de cierre del body. Luego, añada la siguiente línea a su <head> para importar nuestro style.css.


A continuación, vamos a añadir algo de markup, como el header [encabezado], una sección main [principal] y el footer [o pie de la página web], y también añadiremos un poco de contenido tonto para dar a nuestra página algo de relleno.


Aquí creamos una sección para el header, incluyendo la <nav> [la navegación], una sección para el content [contenido] y una sección para el footer. Hay un par de cosas que comentar:

  • Nuestra <nav> tiene una clase .important-class, la cual usaremos para decirle a jQuery cual elemento seleccionar cuando vayamos a desplazarnos hacia abajo.
  • Hemos incluido un elemento <div> [un div define una sección o una división en un documento HTML] con una clase .header-fill. Usaremos éste para poner algo de espacio entre la parte de arriba del navegador y la sección del contenido, como nuestro header quedará fijado y tiene un valor alto para z-index [especifica el orden de un elemento en una pila de elementos] sobre el resto de los elementos sobre la página.

Paso 2: Barra Superior Markup

El siguiente paso, vamos a escribir el código HTML para nuestra Barra Superior. Necesitamos una clase title-area para nuestro logotipo y una sección con una <ul> [lista sin ordenar] para almacenar nuestros objetos para el menú. Eche un vistazo al siguiente código HTML:



Hemos añadido un elemento <ul> con la clase title-area donde conservaremos nuestro logotipo. Después, tenemos nuestra <section> con una clase de top-bar-section y una <ul> con una clase .right, que contiene todos los puntos de la lista. Nuestra imagen tiene un id logo-image que también necesitaremos en nuestro jQuery más tarde en este curso.

Paso 3: Resultados hasta ahora

Si abrimos nuestro navegador y vamos a nuestro archivo index, encontraremos que nuestro estilo básico Foundation hace mucho trabajo por nosotros, para hacer que las cosas luzcan bien. Aunque nuestro logotipo todavía no se ajusta. En el siguiente paso vamos a ajustar esto y, también, vamos a dar a la navegación de nuestro header un estilo más apropiado.

Configurando Sass

Para obtener el resultado deseado, necesitaremos algunos estilos básicos para nuestra sección, especialmente el encabezado y la sección de la Barra Superior. Vamos ha usar Sass para que esto ocurra.

Paso 1: Estilo General

Para empezar, vamos a dar a todas nuestras secciones algunos estilos básicos. Eche un vistazo a código Sass a continuación:


Estamos usando un primary-color variable aquí, que vamos a usar para algunos de los estilos de la Barra Superior. Nuestra sección header tiene una sombra sutil y fina, así que; de hecho luce como si flotará sobre el resto del documento. Al configurar su composición para fijarla, hacemos el z-index: 999, nos aseguramos de que la navegación se pega a la parte superior del navegador cuando nos desplazamos hacia abajo y esa está por encima de todos los otros elementos sobre la página.

Nuestra clase .contain-to-grid tiene un color transparente sutil, para que cuando nos deslicemos, está aparezca como si el header flota encima de todos los otros elementos. Aunque, aún necesitamos arreglar ese menú, así que vamos a ocuparnos de eso después.

Paso 2: Estilo de la Barra Superior

Ahora, vamos a añadir el estilo para dar a nuestra Barra Superior una apariencia agradable y fina. Además, usted podría ajustar algunos de las configuraciones de la barra superior por medio de _setting.scss, sin embargo, voy a mostrarle como hacer esto usando las nuestras. El código Sass abajo explica lo que esta pasando donde:

Nota: Vamos a mover la clase .padding-on-my-header debajo de las reglas de la Barra Superior. Esto es necesario para que el padding [margen interno] desactive eso de la Barra Superior.

Hemos añadido algunos padding para nuestra Barra Superior y tenemos configurado una transition: 0.5s, ease 0.1s. Esto proporcionará un efecto de transición suave cuando nuestro jQuery se active. El fondo está configurado a ninguno, para que nuestro header tenga un color ligeramente transparente que nos dará nuestra .contain-to-grid clase. El resto son algunos estilos básicos para los puntos del menú de la Barra Superior, menús desplegables, hovers [effectos que se consiguen al pasar el mouse sobre un botón o un enlace] y condiciones activas. Nada exagerado, pero esto nos da un resultado limpio al añadir algo de padding y espacio en blanco.

Paso 3: Resultados hasta el momento

Echemos un vistazo a lo que tenemos hasta el momento. Ciertamente, ¡ésta empezando a tener una apariencia! Sin embargo, nuestro menú todavía está un poco grande para cuando nos deslicemos hacia abajo de la página. Ahí es donde nuestra .padding-on-my-header clase se hace cargo.

jQuery para Efectos

Vamos a usar un poco de la magia de jQuery al añadir la .padding-on-my-header clase al deslizarse y cambiar el logotipo por un tamaño más pequeño.

Paso 1: Creamos nuestro init.js

Vamos a crear un archivo init.js para alojar nuestro código jQuery. Póngalo en su carpeta /js e incluya la siguiente línea al fondo de su archivo index, justo antes de la etiqueta de cierre del body, para incluir el código:

Nuestro archivo init.js contendrá lo siguiente:

Vamos a ver lo que está pasando aquí. Cuando el usuario se desplaza hacia abajo, realizamos la siguiente función: si el usuario se desplaza más de 50 pixeles, entonces hacemos la barra superior más pequeña e insertamos un logotipo más pequeño:

  • Descubrimos nuestro id logo-imagen y reemplazamos la imagen original con la de nuestro logotipo más pequeño.
  • Después, miramos nuestra .important-class y añadimos otra clase: .padding-on-my-header

Cuando regresamos, y nos desplazamos debajo de los 50 pixeles, hacemos lo contrario y quitamos la clase padding y ponemos el logotipo más grande.

Paso 2: Revise los Resultados

Continúe y de marcha atrás para el navegador. Actualice la página e intente desplazarse hacia abajo. Si todo va como lo planeado entonces ahora debería poder ver la Barra Superior disminuyendo con una transición suave y el logotipo grande siendo reemplazado por uno más pequeño. Hasta el momento un buen comienzo. Sin embargo, cuando agrandamos nuestro navegador, verá que todavía no es bastante responsive [flexible]. ¡Vamos a ocuparnos de eso!

Media Queries para Optimización Mobile

Crearemos un media query para los dispositivos cuyo tamaño es 1024px y más pequeños. Para que eso tome el resultado del efecto esperado, necesitamos cambiar el punto de quiebre de Foundation. ¿Cómo dijo? Bueno, ¡eso es fácil! Solamente vamos a profundizar en nuestra _settings.scss y buscar el siguiente ajuste:

Como usted puede ver, hemos quitado el pequeño rango desde 0em - 40em hasta 0em - 64em, el cual se calcula para 1024px; nuestro rango medio ahora empezará a los 64em. Guarde su ajuste para que los cambios hagan efecto y ¡continuemos con nuestro media query!

Paso 1: Añadiendo los Media Queries

Nuestra Barra Superior en un dispositivo más pequeño no necesitará ser tan grande. Vamos a reducirlo un poco y a reposicionar nuestro menú. Además, vamos a usar un relleno del header más pequeño. Eche un vistazo a los siguientes estilos:

Ahora demos un vistazo a lo que hemos hecho hasta aquí:

  • Quitamos todos los padding y margenes en la Barra Superior.
  • Le dimos al texto del menú y al icono de hamburguesa un color gris, en ves del color blanco por defecto, por lo que está visible en nuestra Barra Superior blanca.
  • Arreglamos nuestro logotipo grande para adaptarlo dentro de la Barra Superior.
  • En la top-bar-section vamos a dar estilo a nuestros ítems del menú, hovers y condiciones activas.
  • Además, vamos a cambiar el tamaño y la posición del logotipo más pequeño.
  • Quitamos algunos de los padding y márgenes en nuestro menú expandido.
  • Finalmente, hacemos nuestro .header-fill más pequeño, para que éste sea igual a la altura de nuestra Barra Superior.

Paso 2: ¡Disfrute sus resultados finales!

Cuando regresamos a nuestro navegador y lo agrandamos, ahora podemos ver que nuestra navegación responsive está funcionando por completo. Desplacece hacia abajo y vea como la imagen del logotipo aún cambia.  Haga clic sobre los iconos de Menú para ver la versión expandida de nuestra navegación responsive.

Conclusión

Con algunos Sass y la magia de jQuery, hemos logrado transformar la poderosa, pero básica Top Bar de ZURBs Foundation a un asombroso y moderno header con algunos efectos. Listo para usarla en sus propios proyectos con sus clientes. ¡Diviértase!

Recursos


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.