Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. HTML & CSS
Webdesign

Cómo Personalizar la Barra Superior de Foundation 4

by
Length:MediumLanguages:
This post is part of a series called Foundation for Beginners.
Foundation for Beginners: The Top Bar
Foundation for Beginners: Buttons and Dropdowns

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

Foundation 4 de Zurb cuenta con una barra superior brillante que se ha convertido en casi simbólica la construcción de sitios con Foundation. Hoy vamos a ver cómo se puede implementar de una manera diferente, colocándola en otra parte de la página, dándole un menú de navegación horizontal personalizado y adaptivo.


Empezando

Primero, necesitaremos la última versión de Foundation. Descomprima y coloque todos los archivos en su directorio de trabajo o prueba. Sólo usaremos index.html, creando nuestro propio style.css en el que anularemos las diferentes clases de la barra superior para hacer nuestra navegación personalizada.

foundation-download

También, descargue la imagen de fondo proporcionada arriba. Vamos a utilizar esta para el menú, así que colóquela en su carpeta "img". ¿Tiene todo? A continuación, lance su editor favorito y ¡vamos a arrancar!


Configurando la Estructura HTML

Paso 1: Marcado General

El archivo index en su descarga viene con algún HTML predefinido. Puede dejar todo como lo encuentre en la etiqueta de encabezado, y puede dejar los enlaces de script (antes de la etiqueta de cierre de cuerpo) en donde están. Necesitamos todo eso para asegurarnos de que la Rejilla y la Barra Superior funcionen.

Puede borrar el resto del contenido ficticio. Vamos para un diseño de ancho completo aquí, nada demasiado complicado, sólo algo para tener una mejor idea con lo que estamos trabajando.

Muy bien, vamos a configurar el encabezado, la navegación, el contenido y el área de pie de página y poner en algo de contenido ficticio para propósitos de llenado. Le vamos a dar a cada área una clase de "full-width", luego en cada área colocaremos una div de class="row", una div de class="large-12" y class="columns". Esto configura una estructura de rejilla básica.

Nota: Para más información sobre cómo funciona la rejilla, eche un vistazo a Foundation para Principiantes: El Sistema de Rejilla

Paso 2: Marcado de la Barra Superior

Antes de dar estilo, vamos a establecer la estructura HTML esencial para hacer que la Barra Superior de Foundation trabaje correctamente. Necesitamos cinco elementos básicos para hacer funcionar el motor:

  • nav con class="top-bar"
  • ul con class="title-area"
  • li con class="toggle-topbar" = para expandir el menú en el diseño móvil
  • section con class="top-bar-section"
  • ul con class="left" y ul con class="right"

Ahora, vamos a configurar estas bases e implementar los cinco elementos.

Nota: En este ejemplo de tutorial queremos hacer un menú de navegación personalizado, eliminando así el título en él (que suele contener el logotipo, en forma de texto o imagen). Para hacer esto simplemente dejamos el li con class="name" en el ul con class="title-area" vacío.

Además, vamos a agregar algunos elementos del menú y un menú desplegable mientras estamos en él. Para incluir una lista desplegable, agregue la clase "has-dropdown" al elemento li que desea que contenga la lista desplegable, luego traiga un ul nuevo con una clase de "dropdown". Para indicar la página actualmente activa podemos dar a nuestro elemento de menú actual una clase de "active" en el elemento li. Podemos dejar la clase del ul class="right" vacía. Normalmente utilizaría esta área para agregar un botón o un formulario de entrada de búsqueda. Para obtener más información sobre los detalles del marcado de la barra superior, eche un vistazo a Foundation para Principiantes: La barra superior.

Mira el siguiente HTML, los comentarios explican cómo se construye.

Paso 3: Resultados Hasta Ahora

Mire los resultados en su navegador. Ahora creamos un marco básico de Foundation usando la barra superior para crear un menú horizontal. Con el fin de colocarlo en algún lugar que no sea en la parte superior del navegador es simplemente poner el nav class="top-bar" en una fila y en el div columns.

Al cambiar el tamaño del navegador, puede ver que el menú cambia en el punto de interrupción predefinido.

El siguiente paso es darle a todo un estilo personalizado. Nos centraremos en cómo podemos darle estilo a la Barra Superior y qué clases se utilizan para eso.

foundation-4-custom-top-bar-html-layout

Estableciendo el CSS

Paso 1: Estilo General

Si aún no lo ha hecho, cree un nuevo archivo CSS, nómbrelo style.css y colóquelo en la carpeta css de su descarga de Foundation. No olvide incluirlo en la etiqueta de encabezado en su archivo index, haciendo referencia a él debajo de la foundation.css así:

Si no lo coloca debajo de foundation.css no invalidará las clases de la Barra Superior.

Muy bien, vamos a obtener primero un estilo básico en el encabezado, la navegación, el contenido y el área de pie de página. Para el área de navegación, utilizaremos una imagen de fondo, la cual usted habrá descargado previamente. El diseño general no es la gran cosa, eche un vistazo al CSS a continuación. Añadimos una clase de ancho completo full-width a cada área para asegurarnos de que llene todo el ancho del navegador.

Paso 2: Estilos de la Barra Superior

Si mira los resultados ahora, el menú todavía se ve un poco fuera de lugar. Eso es porque todavía utiliza el CSS por defecto. ¡Vamos a arreglarlo!

Hay un par de clases CSS a las que debemos apuntar para obtener los resultados deseados. En primer lugar, eliminaremos parte del fondo negro de la clase .top-bar y las listas de sección y cambiaremos la altura y la altura de línea a 58px (altura del área de navegación). Eche un vistazo a los comentarios para mayor explicación.

Hemos removido el fondo negro predeterminado de la nav class="top-bar", las listas de sección y los elementos ancla del menú. Ajustamos la altura, la altura de línea y el relleno y transformamos el texto en mayúscula para hacer que todo encaje en nuestro diseño personalizado.

Si usted actualiza su navegador, verá que está empezando a tomar forma. Continuemos con los menús desplegables, los elementos de menú, los estados activos y los estados hover. Eche un vistazo al código CSS a continuación y otra vez, lea el texto comentado para la explicación:

Hemos hecho varios cambios a nuestro menú aquí. En primer lugar, hemos cambiado el fondo negro predeterminado del elemento de menú activo a un gradiente CSS. Luego le dimos a los elementos de menú no activos un estado de hover similar. Para que los elementos de menú no activos sean más visibles, cambiamos el color del texto a gris oscuro. Los cambios realizados en .top-bar-section li:hover a mantendrán el estado del menú desplegable en estado hover cuando el ratón se mueva sobre los elementos desplegables. Para completar el CSS dimos al contenedor ul dropdown un relleno de fondo y reposicionamos la posición por defecto de la flecha desplegable, debido a nuestros ajustes de relleno a la sección de la barra superior.

Paso 3: Resultados Hasta Ahora

Actualice su navegador y eche un vistazo a los resultados hasta ahora. Todavía no hemos terminado; aún tenemos que asegurarnos de que todo se vea bien cuando cambiamos el tamaño de la pantalla de nuestro navegador (o, para el caso, cuando lo miramos en un dispositivo más pequeño). Para que esto suceda, agregaremos algunas Media Queries a nuestro archivo CSS.

foundation-4-custom-top-bar-final-product

Configuración las Media Queries

Paso 1: Media Queries

Hay un par de cosas que tenemos que ajustar para hacer que el menú funcione con nuestro diseño personalizado cuando se reduce el tamaño de la pantalla. Esto implica en su mayoría la adición de algo de relleno, altura de línea, colores de texto y colores de fondo. Eche un vistazo al CSS a continuación y mire los comentarios para obtener una explicación para cada sección.

Paso 2: Disfrute de Sus Resultados

Guarde el archivo, actualice su navegador y juegue con el tamaño del navegador. Como puede ver el menú encaja en nuestro diseño muy bien.

foundation-4-custom-top-bar-final-product-responsive

Conclusión

Bien, eso resume nuestro tutorial sobre cómo podemos crear un menú personalizado adaptivo utilizando la barra superior del framework Foundation 4. Y recuerde, el menú no tiene que estar en la parte superior de la página. Sólo envuélvalo en su propia fila y div columns, entonces prácticamente ¡puede colocarlo en cualquier lugar que desee!

Foundation es una gran herramienta para desarrollar rápidamente diseños adaptivos y cuando usted sabe como moverse, usted puede prácticamente adaptarlo de cualquier manera que usted desee. ¡Que se divierta!

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.