Este método da más importancia al contenido
Últimamente algunos sitios web, como This is the Brigade y You All, comienzan con un menú dinámico y animado que cambia el tamaño al desplazarnos hacia abajo. Minimiza la navegación principal para permitir más espacio para el contenido. En este tutorial, voy a explicar cómo puedes crear este menú tú mismo con HTML5, CSS3 y sólo un poco de jQuery.
Este tipo de menú es estupendo si quieres dar especial atención a tu contenido a lo largo de todo el sitio web, y también te permite crear una navegación mayor e impactante en la primera visita de un usuario a un sitio web. Es bueno porque puede mostrar tu marca o logotipo del sitio web, ideal para verlo por encima del pliegue; y después de la participación del usuario en una visita, aparece una versión más pequeña y se va minimizado sutilmente al descender para que el usuario se centre principalmente en el contenido.
Hay varias maneras de hacer esto. En este tutorial, voy a explicar cómo crear una barra de ancho fijo en un menú completo, que cambia el tamaño en altura junto con el logotipo, creando una versión sencilla que reduce al mínimo la inicial. Si lo prefieres, también puedes reemplazar la imagen del logotipo por otra variación de tu logo, tales como iniciales o un icono, pero ten en cuenta que aquí la consistencia es muy importante, para que el usuario entienda cómo ha cambiado el elemento y que su objetivo principal sigue siendo el original, la navegación por el sitio web.
Antes de empezar, por si tienes prisa, puede ver la demo o descargar el código fuente desde aquí.
Crear la estructura básica en HTML
Vamos a empezar por crear el código HTML básico que necesitaremos. Vamos a seguir una estructura muy simple con HTML5 como punto de partida.
<!DOCTYPE HTML><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Cómo crear una barra de menú que cambia de tamaño | Estamos apañados</title>
</head><body>
</body></html>
Ahora que tenemos nuestro código HTML inicial, vamos a añadir el código para el menú, así como algunos otros detalles sobre el <head> de nuestro archivo HTML.
<!DOCTYPE HTML><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Cómo crear una barra de menú que cambia de tamaño | Estamos apañados</title>
<link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css">
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head><body>
<header class="large">
<nav><img class="logo" src="/wdd.png"/>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Leer el tutorial</a></li>
<li><a href="#">Idea Original</a></li>
</ul> </nav>
</header>
<section>
<p>Vamos a realizar este pequeño menú</p>
<p>Fin de las líneas.</p>
</section>
</body>
</html>
En nuestro <head>: hemos añadido la etiqueta meta del autor para identificar el creador del archivo, después se incluyeron los famosos reset.css de Eric Meyer que han de reponer casi todos los elementos en el archivo HTML, que da un documento más limpio y más fácil de trabajar. Y como vamos a usar jQuery más tarde, en la línea final de nuestro elemento principal la importamos a través de la CDN jQuery.
Yo he enlazado la mayoría de los archivos para mantener el documento lo más simple posible, pero ten en cuenta que, si lo prefieres, puedes descargar las últimas versiones de todos los archivos y usarlos localmente a lo largo de tu archivo HTML y esto evitará en el futuro posibles problemas de compatibilidad con la versión o cambios en estos archivos.
En nuestro <body>, se utilizó el elemento HTML5 <header> por defecto. Nuestro <header> será de una anchura completa y responsable de los cambios entre las versiones grandes y pequeñas del menú. Estamos dando a nuestro <header> una clase llamada "large", por lo que podemos cambiar algunas propiedades específicas del CSS para convertir nuestro menú en la versión más pequeña. El <nav> es nuestro menú contenedor que contiene la imagen del logotipo del sitio web y un sencillo menú como lista desordenada con tres enlaces a nuestro sitio web y al artículo original en inglés.
Ya que en realidad aquí no hay ningún contenido, la <section class="stretch"> va a ser utilizada para estirar la página y forzar el desplazamiento, para que podamos ver el cambio de menú.
Y esto es todo sobre HTML. A partir de ahora sólo tenemos que dar estilo a nuestros elementos con CSS y hacer que el menú sea dinámico.
El estilo del menú y la página
Para mantener este código en un archivo único, voy a poner el CSS en el elemento <head>. Así todo nuestro CSS vendrá antes de nuestra etiqueta de cierre </ head>.
<style type="text/css">
/* Importing Amaranth Font for menu text */
@import url(http://fonts.googleapis.com/css?family=Amaranth);
/* Basic layout */
body{ background-color: #ebebeb; }
ul{ float: right; }
li{ display: inline; float: left;} img.logo{float: left;}
/* Size and center the menu */
nav{ width: 960px; margin: 0 auto;}
Este código de CSS hará que nuestra menú sea de 960px de ancho y se centre, mientras que organiza el logo de nuestro menú a la izquierda y los enlaces a la derecha. También estamos importando el tipo de letra de Amaranth de Google Web Fonts, que se utilizará para nuestro texto en la página.
section.stretch{ float: left; height: 1500px; width: 100%; }
section.stretch p{ font-family: 'Amaranth', sans-serif; font-size: 30px; color: #969696; text-align: center; position: relative; margin-top: 250px; }
section.stretch p.bottom{ top: 100%; }
Aquí sólo estamos forzando a la página de estirarse para forzar el desplazamiento y posicionamiento del texto para indicar el principio y el final del contenido. Este código es completamente opcional, pero te ayudará a calcular la forma de alinear la segunda versión del menú con tu contenido.
header{ background: #C7C7C7; border-bottom: 1px solid #aaaaaa; float: left; width: 100%; position: fixed; z-index: 10; }
header a{ color: #969696; text-decoration: none; font-family: 'Amaranth', sans-serif; text-transform: uppercase; font-size: 1em; }
header a.active, header a:hover{ color: #3d3d3d; }
header li{ margin-right: 30px; }
/* Sizes for the bigger menu */
header.large{ height: 120px; }
header.large img{ width: 489px; height: 113px; }
header.large li{ margin-top: 45px; }
</style>
</head>
Aquí estamos terminando nuestro estilo de encabezado básico. El <header> nos servirá como contenedor de menús. Este contendrá nuestro elemento <nav> y será el elemento donde se define el color de fondo, la altura del menú, estilos de menú y otros enlaces. Se va a adaptar a la anchura de la pantalla con la propiedad width: 100% y se mantiene fijo sobre los otros elementos en el sitio web. Es importante recordar ajustar el z-index para asegurarse de que este elemento se superpondrá al resto de la página, así como la posición: fixed hace el div fijo en la parte superior, de modo que permanecerá en la misma posición mientras el usuario se desplaza a través de la página web. Como se puede ver, además de definir los estilos de encabezado, también estamos estableciendo algunos estilos específicos para la clase "large" utilizando header.large. El estado del menú inicial será grande y, por lo que estamos definiendo aquí, sólo son necesarios los estilos para hacer que aparezca tan pronto como el usuario entra en la página.
Cambiar de forma dinámica el tamaño del menú
Tenemos nuestro menú hecho con un estilo, pero todavía queremos que sea minimizado. Para crear este otro estado, vamos a crear una nueva clase para la <header> en el CSS llamada "small", que será la responsable de cambiar las propiedades que tenemos que modificar. Ya hemos definido el menú más grande, por lo que ahora sólo tenemos que hacer nuestro menú más pequeño, haciendo proporcionalmente nuestra imagen de menor tamaño, y el margin-top que estamos utilizando en nuestros elementos <li> también deben ser reducido, por lo que el nuevo menú va a permanecer centrado verticalmente con la altura:
/* Sizes for the smaller menu */
header.small{ height: 50px; }
header.small img{ width: 287px; height: 69px; margin-top: -10px; }
header.small li{ margin-top: 17px; }
Como puedes ver, estos estilos son casi idénticos a los del menú más grande, sólo cambian la clase "large" a "small" y los valores que se utilizan para el más pequeño. Estamos utilizando un margin-top negativo en la imagen para centrarla en el contenedor, ya que la imagen tiene una sombra sutil y es superior a la tipografía para darle cabida (en el ejemplo en inglés). Ahora tenemos todos los estilos necesarios para hacer el cambio de tamaño del menú, y si tratas de cambiar en tu HTML <header class="large"> a <header class="small">, podrás ver en el explorador que la menú se hará más pequeño. Pero tenemos que hacer esto de forma dinámica.
Cambiar nuestra clase de menú con jQuery
Con todos nuestros estilos en su lugar, sólo tenemos que añadir un poco de JavaScript para hacer el cambio entre las clases "large" y "small". Como lo que queremos cambiar esta basado en el desplazamiento de los usuarios, vamos a utilizar la función .scrollTop() en jQuery. Con esta función vamos a obtener o establecer la posición del desplazamiento en píxeles. La posición de desplazamiento es el número de píxeles que ya se han desplazado fuera de la vista del navegador. En este caso, sólo tenemos que saber el número de manu píxeles que el usuario se ha desplazado de manera que podamos activar nuestro código y cambiar las clases:
<script type="text/javascript">
$(document).on("scroll",function(){
if($(document).scrollTop()>100){
$("header").removeClass("large").addClass("small");
} else{
$("header").removeClass("small").addClass("large");
}
});
</script>
Este es el JavaScript necesario para detectar cuando ha salido el usuario. Cuando el usuario se ha desplazado más de 100 píxeles, se eliminará la clase "large" que hemos creado y se añadirá nuestra nueva clase "small". De esta manera el menú cambiará a las dimensiones previamente definidas en el CSS. Haz la prueba, te debería funcionar ya, pero puede que le resulte demasiado difícil pasar de un estado a otro.
Transiciones CSS para animar el menú
Para hacer en nuestro menú más suave el cambio entre las clases, vamos a utilizar las transiciones CSS. Sólo se tiene que utilizar este trozo de código al lado del resto del CSS.
header,nav, a, img, li{
transition: all 1s;
-moz-transition: all 1s; /* Firefox 4 */
-webkit-transition: all 1s; /* Safari and Chrome */
-o-transition: all 1s; /* Opera */
}
Aquí definimos transiciones para todas las propiedades CSS de los elementos <header>, <img> y <li>, básicamente todos los elementos que están cambiando. Este código anima los cambios entre las dos clases con transiciones CSS durante 1 segundo. Pruébela ahora, el resultado debería ser mucho más suave.
Ahora es tu turno
Ahora que ya has visto lo fácil es hacer este efecto, sigue adelante y haz tu propia versión de una barra de menú que cambia de tamaño. También puedes ser más creativo que yo y cambiar aún más las propiedades como el color de fondo, el color del texto e incluso el tamaño y la posición del menú, e incluso probar con diferentes tipos de transiciones CSS, pero ten en cuenta que los usuarios deben seguir con los cambios en el menú. El menú y el logotipo de sitio web suelen ser uno de los elementos más identificables y esperados, y cambiando de manera drástica podría confundir al usuario, así que asegúrate de mantener cierta coherencia entre ambas versiones y antes probarlo con algunos usuarios.