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

() translation by (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.

1	<link rel="stylesheet" href="stylesheets/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.

<!-- HEADER SECTION -->
<div class="contain-to-grid header-section">

  <!-- TOPBAR SECTION -->
	<nav class="top-bar important-class" data-topbar>

	</nav> <!-- END TOPBAR SECTION -->
</div> <!-- END HEADER SECTION

<!-- CONTENT FILL WHEN SCROLL = 0 -->
<div class="header-fill"></div>

<!-- CONTENT SECTION -->
<div class="row content-section">
	<div class="main-content">
		<div class="small-12 medium-12 large-12 columns">
			<h1>Fancy Foundation Top Bar</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, fugiat, explicabo architecto at praesentium modi soluta alias veniam voluptate magnam obcaecati facilis cumque voluptatum impedit eius reiciendis ad minus odio similique sequi molestiae voluptatem commodi aliquam assumenda numquam doloribus libero tempora vitae sed animi. Ratione, quasi iste fugiat debitis molestiae doloremque consequuntur hic delectus molestias repudiandae reprehenderit rerum reiciendis enim aperiam cum ut adipisci veritatis soluta illo praesentium consequatur voluptate possimus dolorem et officiis perspiciatis commodi quae eligendi alias culpa atque ducimus eum odit accusamus ad labore quod necessitatibus. Officiis, ducimus, voluptate doloremque nihil rerum consequuntur obcaecati fugiat cum veritatis quidem qui nulla distinctio laborum perspiciatis quia tempora eveniet tempore aliquam pariatur aliquid quibusdam aspernatur quis maiores minus quas culpa reprehenderit id iure optio asperiores? Excepturi, deleniti, at, expedita quod animi harum est sit iste distinctio consequuntur mollitia corporis soluta. Quos, asperiores voluptas totam nesciunt atque iusto commodi. Autem, animi eius odio commodi vitae nihil possimus neque minima obcaecati aspernatur voluptate dolorem consequuntur illo vel iste deserunt tempore eaque maxime cum ratione rem odit officia tempora ut recusandae saepe maiores quae repellat debitis atque est praesentium numquam mollitia dolor ipsum modi fuga veniam error perspiciatis quas provident optio similique iure.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, fugiat, explicabo architecto at praesentium modi soluta alias veniam voluptate magnam obcaecati facilis cumque voluptatum impedit eius reiciendis ad minus odio similique sequi molestiae voluptatem commodi aliquam assumenda numquam doloribus libero tempora vitae sed animi. Ratione, quasi iste fugiat debitis molestiae doloremque consequuntur hic delectus molestias repudiandae reprehenderit rerum reiciendis enim aperiam cum ut adipisci veritatis soluta illo praesentium consequatur voluptate possimus dolorem et officiis perspiciatis commodi quae eligendi alias culpa atque ducimus eum odit accusamus ad labore quod necessitatibus. Officiis, ducimus, voluptate doloremque nihil rerum consequuntur obcaecati fugiat cum veritatis quidem qui nulla distinctio laborum perspiciatis quia tempora eveniet tempore aliquam pariatur aliquid quibusdam aspernatur quis maiores minus quas culpa reprehenderit id iure optio asperiores? Excepturi, deleniti, at, expedita quod animi harum est sit iste distinctio consequuntur mollitia corporis soluta. Quos, asperiores voluptas totam nesciunt atque iusto commodi. Autem, animi eius odio commodi vitae nihil possimus neque minima obcaecati aspernatur voluptate dolorem consequuntur illo vel iste deserunt tempore eaque maxime cum ratione rem odit officia tempora ut recusandae saepe maiores quae repellat debitis atque est praesentium numquam mollitia dolor ipsum modi fuga veniam error perspiciatis quas provident optio similique iure.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, fugiat, explicabo architecto at praesentium modi soluta alias veniam voluptate magnam obcaecati facilis cumque voluptatum impedit eius reiciendis ad minus odio similique sequi molestiae voluptatem commodi aliquam assumenda numquam doloribus libero tempora vitae sed animi. Ratione, quasi iste fugiat debitis molestiae doloremque consequuntur hic delectus molestias repudiandae reprehenderit rerum reiciendis enim aperiam cum ut adipisci veritatis soluta illo praesentium consequatur voluptate possimus dolorem et officiis perspiciatis commodi quae eligendi alias culpa atque ducimus eum odit accusamus ad labore quod necessitatibus. Officiis, ducimus, voluptate doloremque nihil rerum consequuntur obcaecati fugiat cum veritatis quidem qui nulla distinctio laborum perspiciatis quia tempora eveniet tempore aliquam pariatur aliquid quibusdam aspernatur quis maiores minus quas culpa reprehenderit id iure optio asperiores? Excepturi, deleniti, at, expedita quod animi harum est sit iste distinctio consequuntur mollitia corporis soluta. Quos, asperiores voluptas totam nesciunt atque iusto commodi. Autem, animi eius odio commodi vitae nihil possimus neque minima obcaecati aspernatur voluptate dolorem consequuntur illo vel iste deserunt tempore eaque maxime cum ratione rem odit officia tempora ut recusandae saepe maiores quae repellat debitis atque est praesentium numquam mollitia dolor ipsum modi fuga veniam error perspiciatis quas provident optio similique iure.</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, fugiat, explicabo architecto at praesentium modi soluta alias veniam voluptate magnam obcaecati facilis cumque voluptatum impedit eius reiciendis ad minus odio similique sequi molestiae voluptatem commodi aliquam assumenda numquam doloribus libero tempora vitae sed animi. Ratione, quasi iste fugiat debitis molestiae doloremque consequuntur hic delectus molestias repudiandae reprehenderit rerum reiciendis enim aperiam cum ut adipisci veritatis soluta illo praesentium consequatur voluptate possimus dolorem et officiis perspiciatis commodi quae eligendi alias culpa atque ducimus eum odit accusamus ad labore quod necessitatibus. Officiis, ducimus, voluptate doloremque nihil rerum consequuntur obcaecati fugiat cum veritatis quidem qui nulla distinctio laborum perspiciatis quia tempora eveniet tempore aliquam pariatur aliquid quibusdam aspernatur quis maiores minus quas culpa reprehenderit id iure optio asperiores? Excepturi, deleniti, at, expedita quod animi harum est sit iste distinctio consequuntur mollitia corporis soluta. Quos, asperiores voluptas totam nesciunt atque iusto commodi. Autem, animi eius odio commodi vitae nihil possimus neque minima obcaecati aspernatur voluptate dolorem consequuntur illo vel iste deserunt tempore eaque maxime cum ratione rem odit officia tempora ut recusandae saepe maiores quae repellat debitis atque est praesentium numquam mollitia dolor ipsum modi fuga veniam error perspiciatis quas provident optio similique iure.</p>
		</div>
	</div>
</div> <!-- END CONTENT SECTION -->

<!-- FOOTER SECTION -->
<div class="footer-section">
	<div class="row">
		<div class="small-12 medium-12 large-12 columns">
			<p>&copy; Copyright 2014</p>
		</div>
	</div>
</div> <!-- END FOOTER SECTION -->

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:

<!-- TOPBAR SECTION -->
<nav class="top-bar important-class" data-topbar>
		
    <!-- TITLE AREA & LOGO -->
	<ul class="title-area">
		<li class="name">
			<img src="img/Acme_Colour.png" alt="" id="logo-image">
		</li>
		<li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
	</ul> <!-- END TITLE AREA & LOGO -->

    <!-- MENU ITEMS -->
	<section class="top-bar-section">
		<ul class="right">
			<li class="active"><a href="index.php">Home</a></li>
			<li><a href="blog.php">Blog</a></li>
			<li><a href="#">About us</a></li>
			<li><a href="#">Portfolio</a></li>
			<li class="has-dropdown">
				<a href="#">Services</a>
				<ul class="dropdown">
					<li><a href="#">Service #1</a></li>
					<li><a href="#">Service #2</a></li>
					<li><a href="#">Service #3</a></li>
				</ul>
			</li>
			<li><a href="#">Contact</a></li>
		</ul>
	</section> <!-- END MENU ITEMS -->
</nav> <!-- END TOPBAR SECTION -->

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:

1	$primary-color: #ef4523;
2
3	/*
4	HEADER SECTION
5	========================================================================== */
6	.header-section {
7	-webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.4);
8	box-shadow: 0 0 5px 0 rgba(0,0,0,0.4);
9	position: fixed;
10	z-index: 999;
11	min-width: 100%;
12	}
13
14	.contain-to-grid {
15	background-color: rgba(255, 255, 255, 0.97);
16	}
17
18	// FILL USED FOR HEADER
19	.header-fill {
20	background: #fff;
21	height: 135px;
22	.tablet-mobile-logo img {
23	padding-top: 30px;
24	}
25	}
26
27	// USED FOR JQUERY ACTION
28	.padding-on-my-header {
29	padding: 17px 0.9375rem 62px 0.9375rem;
30	ul.title-area img {
31	margin: -5px 0 0 0;
32	}
33	}
34
35	.full-width {
36	min-width: 100%;
37	}
38
39	p {
40	line-height: 3rem;
41	padding-bottom: 30px;
42	}
43
44
45	/*
46	CONTENT SECTION
47	========================================================================== */
48
49
50	.content-section {
51	.main-content {
52	margin-top: 35px;
53	}
54	}
55
56
57	/*
58	FOOTER SECTION
59	========================================================================== */
60
61	.footer-section {
62	background: #333;
63	min-height: 100px;
64	p {
65	color: #fff;
66	margin-top: 50px;
67	}
68	}

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:

/*
   TOPBAR NAVGATION
   ========================================================================== */
.top-bar
{
    background: none;
	padding: 45px 0.9375rem 90px 0.9375rem;
	transition: all 0.5s ease 0.1s;
	// LOGO ADJUSTMENT
	ul.title-area img {
		margin: -10px 0 0 0;
	}
	.top-bar-section ul {
		background: none;
		// MENU ITEM STYLES
		li a:not(.button), li.active a:not(.button) {
			background: none;
			line-height: 30px;
			font-size: 12px;
			padding: 0;
			margin: 5px 0 0 0;
			text-transform: uppercase;
		}
		// MENU ITEM HOVERS
		li a:not(.button):hover {
			background: none;
			border-bottom: 2px solid $primary-color;
			color: #222;
		}
		// MENU ITEM ACTIVE
		li.active a:not(.button) {
			border-bottom: 2px solid $primary-color;
			color: #222;
			&:hover {
				background: none;
			}
		}
		li {
			margin-left: 30px;
			a {
				color: #888;
			}
		}
	}
	// DROPDOWN MENU
	.top-bar-section ul li:hover:not(.has-form) > a {
		color: #333;
	}
	.top-bar-section li ul.dropdown {
		background: #fff;
		border: 1px solid #ddd;
		color: #888;
		li {
			border-bottom: 1px solid #ddd;
			margin: 0;
			padding: 5px 15px 5px 15px;
		}
	}
	.top-bar-section li ul.dropdown li a:not(.button):hover, .top-bar-section li ul.dropdown li a:not(.button) {
		background: none;
		color: #222;
		border-bottom: none;
		padding: 20px -4px 40px 45px;
	}
	.top-bar-section ul.dropdown li:hover:not(.has-form) > a:not(.button) {
		background: none;
		color: #222;
	}
	// DROPDOWN ARROW
	.has-dropdown > a:after {
	    border-color: rgba(0, 0, 0, 0.5) transparent transparent;
	    margin-top: -5px;
	}
}

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:

        <!-- JAVASCRIPTS -->
    	<script src="bower_components/jquery/dist/jquery.min.js"></script>
		<script src="bower_components/foundation/js/foundation.min.js"></script>
		<script src="js/app.js"></script>
        <!-- OUR JQUERY MAGIC -->
		<script src="js/init.js"></script>
	</body>
</html>

Nuestro archivo init.js contendrá lo siguiente:

jQuery(window).scroll(function() {
    if (scroll >= 50) {
        $('#logo-image').attr('src', 'img/Acme_Monogram_Colour.png')
        $(".important-class").addClass("padding-on-my-header");
    }
    if (scroll < 50) {
    	$(".important-class").removeClass("padding-on-my-header");
    	$('#logo-image').attr('src', 'img/Acme_Colour.png')
    }
});

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:

1	// Media Query Ranges
2	$small-range: (0em, 64em);
3	$medium-range: (64em, 64em);
4	$large-range: (64.063em, 90em);
5	$xlarge-range: (90.063em, 120em);
6	$xxlarge-range: (120.063em, 99999999em);

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:

@media only screen and (max-width: 1024px) {

    .top-bar {
		margin-top: 0;
		padding: 0;
		float: none;
		// MENU BUTTON AND HAMBURGER ICON
		.toggle-topbar.menu-icon a {
			color: #222;
			&:after {
    			box-shadow: 0 10px 0 1px #222, 0 16px 0 1px #222, 0 22px 0 1px #222;
    		}
		}
		// LOGO
		ul.title-area img {
			margin: -2px 0 0;
			width: 145px;
		}
		.top-bar-section {
			ul {
				background: #333;
				li {
					margin-left: 0;
				}
				li > a {
					background: $primary-color;
					border-radius: 0;
					font-size: 0.9rem;
				}
				// NORMAL BUTTONS
				li:not(.has-form) a:not(.button) {
					background: none;
					color: #fff;
					padding: 10px 15px;
					margin-top: 0;
					&:hover {
						background: $primary-color;
						color: #fff;
						margin-top: 0;
					}
				}
				// ACTIVE BUTTON
				li.active:not(.has-form) a:not(.button) {
					background: $primary-color;
					color: #fff;
					padding: 10px 15px;
					margin-top: 0;
					&:hover {
						background: lighten($primary-color, 5%);
						margin-top: 0;
					}
				}
			}
		}
	}
	// SMALLER IMAGE
	.top-bar.padding-on-my-header ul.title-area img {
		margin: 5px 13px 0;
		width: 35px;
	}
	// EXPANDED TOPBAR MENU
	.top-bar.expanded {
		margin-top: 0;
		padding: 0;
		float: none;
		.toggle-topbar.menu-icon a {
			color: #fff;
			&:after {
    			box-shadow: 0 10px 0 1px #fff, 0 16px 0 1px #fff, 0 22px 0 1px #fff;
    		}
		}
	}

	// SMALLER HEADER
	.header-fill {
		height: 40px;
	}

}

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!