Cómo crear una barra de menú de redimensionamiento

Últimamente algunos sitios web, como Esta es la brigada y Todo tu , han comenzado con un menú dinámico y animado que cambia de tamaño al desplazarse hacia abajo. Minimizando la navegación principal para permitir más espacio para el contenido. En este tutorial, explicaré cómo puede crear este menú usted mismo con HTML5, CSS3 y solo un poco de jQuery.

Este tipo de menú es excelente si desea prestar especial atención a su contenido en todo el sitio web, y también le permite crear una navegación más grande y más impactante en la primera visita de un usuario a un sitio web. Puede mostrar mejor la marca o el logotipo de su sitio web, ideal para la vista de pliegue de arriba; y luego de invitar al usuario a una visita, una versión más pequeña y minimizada se esconde sutilmente para que el usuario se centre principalmente en su contenido.

Hay varias maneras de hacer esto. En este tutorial, explicaré cómo crear una barra de menú fija de ancho completo, que cambia de tamaño junto con el logotipo, creando una versión minimizada simple de la inicial. Si lo prefiere, también puede reemplazar la imagen del logotipo por otra variación de su logotipo, como iniciales o un ícono, pero tenga en cuenta que la consistencia es realmente importante aquí, para que el usuario entienda cómo ha cambiado el elemento y que su propósito principal sigue siendo el original; navegando por el sitio web.

Antes de comenzar, puedes pagar la demo o descarga la fuente de aquí .

Creando la estructura básica en HTML

Comenzaremos por crear el código HTML básico que necesitaremos. Nos mantendremos en una estructura HTML5 realmente simple para el punto de partida.

Ahora que nuestro código HTML inicial está listo, agregaremos el código para el menú y algunos otros detalles en el encabezado de nuestro archivo HTML.

  
  ¡Hagamos que ese menú sea pequeño! 
  Final de la línea. 

In our : agregamos la metaetiqueta para que el autor identifique el creador del archivo; Después de eso, incluimos el famoso reset.css de Eric Meyer que restablecerá casi todos los elementos en su archivo HTML, proporcionándole un documento más limpio y fácil de usar. Y como usaremos jQuery más adelante, en la línea final de nuestro elemento principal lo importamos a través de jQuery CDN.

Conecté la mayoría de los archivos para mantener el documento lo más simple posible, pero tenga en cuenta que si lo prefiere puede descargar las últimas versiones de todos estos archivos y usarlos localmente a lo largo de su archivo HTML, y esto evitará posibles problemas con las compatibilidades de la versión o cambios en estos archivos en el futuro.

En nuestro etiqueta, usamos el HTML5 predeterminado