html

Muchas veces el espacio es una de las limitaciones del diseño web, impidiéndonos hacer cosas realmente creativas como por ejemplo agregar elementos que le dan mucha vida a nuestro sitio web, ya seacon imágenes o simples espacios elegantes entre los elementos. El problema a todo esto es la UX (User Experience, Experiencia de Usuario) que vamos a ofrecer ya que si ocupamos mucho espacio conelementos muchas veces podemos dañar la navegación del usuario convirtiendo el sitio en uno pesado de navegar.
Es por eso que hoy en este tutorial aprenderemos como hacer un Header dinámico para nuestrossitios web, una cabecera cambia de posición y tamaño dependiendo de en que parte de la pagina se encuentre el usuario. Esto lo haremos simplemente con HTML, CSS y Javascript con su librería Jquery.Ah y casi me olvido!, por si fuera poco, este header dinámico también sera adaptable a dispositivos móviles (Responsive Design)
Demo del HeaderDinamico: http://falconmasters.com/demos/header_dinamico/
Recursos a utilizar:
Jquery: http://code.jquery.com/jquery-latest.js
Primero que nada vamos a crear nuestra estructura HTML, empezando por la etiqueta meta viewport que nos permitirá adaptarnuestro sitio a dispositivos moviles. (Recuerda que va dentro de la etiqueta HEAD)
XHTML

1

También enlazamos nuestra librería Jquery.
XHTML

1

Y para la estructura HTML restante lo único quenecesitamos es un Header y dentro el logotipo y el menú de navegación.
Estructura HTML del header:
XHTML

1
2
3
4
5
6
7
8
9
10
11
12


FalconMasters


InicioServicios
Proyectos
Contacto



Como puedes ver he agregado un div con una clase wrapper que encierra tanto el logotipo y el menú, esta clase la utilizaremos para centrar ellogotipo y el menú ya que nuestro header tendrá por defecto un ancho del 100%. Otra cosa a mencionar es que como puedes ver dentro de la etiqueta nav he agregado un par de enlaces, en esta ocasión no...