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.
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
<!-- HEADER AREA --> <header class="full-width header-area"> <div class="row"> <div class="large-12 columns"> <h2>Foundation-4 Custom Top Bar</h2> </div> </div> </header> <!-- NAVIGATION AREA --> <div class="full-width navigation-area"> <div class="row"> <div class="large-12 columns"> <nav class="top-bar"></nav> </div> </div> </div> <!-- CONTENT AREA --> <div class="full-width content-area"> <div class="row"> <div class="large-12 columns"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, asperiores, voluptas, veniam commodi impedit tenetur dolores cumque facere explicabo esse quaerat veritatis laboriosam eius modi amet maxime non officia nemo? Iste, quisquam, voluptatum, dolor nam reiciendis unde aliquam numquam necessitatibus odio et perspiciatis facere nihil inventore ullam aspernatur corporis veritatis quia dolorum? Sed, hic, eos quis quibusdam eum aut optio repudiandae at! Eligendi, neque ratione alias enim quae magnam dolores esse pariatur earum laborum reiciendis nobis sunt sequi sapiente ducimus iure ipsam. Sapiente, minima, rerum, facere quos saepe pariatur magni dolorem cum amet nemo quis laborum ipsa dignissimos ducimus inventore modi rem cumque quibusdam quam asperiores! Optio, nobis suscipit molestias voluptas veritatis aspernatur accusamus excepturi rem quaerat impedit animi voluptate at facilis aliquid cum fugit labore omnis provident recusandae autem. Doloribus, mollitia quos officiis quas sapiente nam dolor praesentium maxime cupiditate illum? Rem, esse, nulla vitae adipisci sequi deleniti quasi!</p> </div> </div> </div> <!-- FOOTER AREA --> <div class="full-width footer-area"> <div class="row"> <div class="large-12 columns"> © 2013 </div> </div> </div>
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"yul 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.
<!-- Nav Wrap --> <nav class="top-bar"> <ul class="title-area"> <!-- Title Area --> <li class="name"></li> <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --> <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li> </ul> <!-- The Section wrap --> <section class="top-bar-section"> <!-- Left Nav Section --> <ul class="left"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About us</a></li> <li><a href="#">Our products</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Prices</a></li> <li class="has-dropdown"> <a href="#">Features</a> <ul class="dropdown"> <li><a href="#">Modalboxes</a></li> <li><a href="#">Submenu's and navigation</a></li> <li><a href="#">Price tables</a></li> <li><a href="#">Buttons</a></li> <li><a href="#">Button groups</a></li> <li><a href="#">Labels, Keystrokes and Tooltips</a></li> <li><a href="#">Alert boxes</a></li> <li><a href="#">Columns</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> <!-- Right Nav Section --> <ul class="right"></ul> </section> </nav>
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.
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í:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Foundation 4</title>
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/vendor/custom.modernizr.js"></script>
</head> 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.
body {
background-color: #ccc;
}
/** Set the backgrounds for the different sections **/
.header-area {
background-color: #2d465c;
min-height: 160px;
}
.navigation-area {
background-image: url('../img/navigation-container.jpg');
background-repeat: repeat-x;
}
.content-area {
padding: 50px 0 70px 0;
}
.footer-area {
background-color: #1f1f1f;
color: #fff;
min-height: 50px;
padding: 20px 0 0 0;
}
.full-width {
min-width:100%;
position: relative;
}
h2 {
color: #fff;
font-weight: normal;
margin-top: 50px;
} 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.
/** Changes background color, height and margin of the border **/
.top-bar {
background: none;
height: 58px;
line-height: 58px;
margin-bottom: 0;
}
/** Removes black background on menu bar **/
.top-bar-section ul {
background: none;
text-transform: uppercase;
}
/** Removes black background on menu item **/
.top-bar-section li a:not(.button) {
background: none;
line-height: 58px;
padding: 0 27px;
} 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:
/** Changes the active menu item from default black to a gradient **/
.top-bar-section ul li.active > a {
background: rgb(0, 0, 0);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%) repeat scroll 0 0 transparent;
color: #fff;
}
/** Changes the hover state of non active menu items **/
.top-bar-section li:hover a {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%) repeat scroll 0 0 transparent;
color: #fff;
}
/** Changes non active menu items text color to black **/
.top-bar-section ul li > a {
color: #2d2d2d;
}
/** Changes the hover state of dropdown menu items **/
.top-bar-section ul.dropdown li a:hover:not(.button) {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.9);
}
/** IMPORTANT fill for the ul dropdown container **/
.top-bar-section ul.dropdown {
background: #333;
color: #fff;
}
/** This fixes the position and the color of the dropdown arrow **/
.top-bar-section .has-dropdown > a:after {
border-color: rgba(0, 0, 0, 1) transparent transparent;
margin-top: 2.5px;
} 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.
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.
@media only screen and (max-width: 942px) {
/* Makes the responsive menu fit in the navigation container and change its background to black */
.top-bar ul {
background-color: rgba(0, 0, 0, 0.5);
padding-bottom: 13px;
}
/* Change non active menu item color to black */
.top-bar-section ul li > a {
color: #fff;
}
/* Gives the dropdown ul a black fill */
.top-bar-section ul {
background: #000;
}
/* Give the BACK button after going in a submenu the appropriate filling */
.top-bar-section .dropdown li.title h5 a {
line-height: 57px;
}
/* This fixes the position and the color of the dropdown arrow */
.top-bar-section .has-dropdown > a:after {
border-color: rgba(255, 255, 255, 1) transparent transparent;
margin-top: 2.5px;
}
} /* end media query */ 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.
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!
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post
