Un sitio con navegación de posición fija nunca permite al usuario perder el sitio de los enlaces del directorio a medida que se desplazan.
Este truco simple lo convierte en un sitio que es increíblemente fácil de navegar y es ideal para tipos específicos de contenido. A continuación, analizaremos los usos más comunes y más exclusivos de la navegación fija en el diseño web.
Blogs
Uno de los lugares más comunes en los que encontrará navegación fija es en los blogs, especialmente en los blogs de Tumblr. La razón por la que este formato funciona tan bien para los blogs es que son notoriamente largos y, por lo tanto, implican mucho desplazamiento. La aplicación de una posición fija a la navegación permite a los usuarios navegar por su sitio desde la parte inferior de la página, eliminando la molesta necesidad de desplazarse hacia la parte superior. Aquí hay una lista de varios blogs que encontré usando esta técnica.
Brian Casel
En este sitio, tanto los enlaces en la parte superior como la navegación en la izquierda permanecen con usted mientras se desplaza, lo que hace que sea realmente fácil acceder a cualquier cosa que necesite desde cualquier punto del sitio. La navegación a la izquierda no lo lleva a una parte diferente del sitio, pero más bien filtra el contenido para que solo pueda ver las publicaciones del blog, citas, videos, etc.
David Appleyard
El blog personal del propio David Appleyard de Design Shack (shhhhh, él no tiene idea de que estoy incluyendo esto). David ha colocado una barra de búsqueda, información de redes sociales y varios enlaces a otros sitios en su barra lateral fija, lo que facilita obtener un rápido vistazo de toda su vida digital.
Doug Neiner
La página de Tumblr de Doug Neiner sigue el mismo formato que la de David con los enlaces sociales y la información diversa fijada en el lado izquierdo de la pantalla. Doug también ha creado una interfaz de gran apariencia para sus publicaciones que utiliza postes de metal y diferentes accesorios según el tipo de publicación. En general, un diseño realmente único!
Jaype
En contraste con los polos metálicos de Doug Neiner, Jaype usa un enfoque mucho más femenino con texturas de color azul claro y bordes de bloc de notas. La barra lateral de navegación utiliza un bonito efecto de acordeón para expandir cada sección para obtener más opciones. Otro toque agradable, la barra de búsqueda se fija en la parte inferior de la página para que permanezca contigo a medida que redimensionas la ventana.
Mark Jardine
En este blog, nuevamente vemos que la barra lateral no se usa tanto para la navegación dentro del sitio en sí, sino que apunta a sitios de redes sociales y contenido asociado. Mark es un diseñador de Tapbots, un equipo de desarrolladores de dos personas que crea algunas de las aplicaciones más hermosas disponibles para el iPhone.
Navegación con la mano derecha
Colocar la navegación en el lado derecho de la página es bastante raro y, de hecho, es una excelente manera de enfurecer a los nazis. La aplicación de una posición fija a la navegación del lado derecho aumenta su visibilidad, ya que el usuario interactúa con su sitio y reduce la posibilidad de confusión sobre dónde encontrar más contenido. Aquí hay unos ejemplos.
Colectivo de hombre gordo
Fat-Man Collective es mi sitio favorito absoluto en este post por una sencilla razón: el gordo. Es este loco personaje de CG que cuelga en la parte superior derecha de la pantalla. Es lo suficientemente divertido como para que me encantara el sitio solo por esto, pero a medida que avanzaba por el sitio, ¡el gordo comenzó a caminar! Me reí a carcajadas cuando vi a este personaje de proporciones extrañas y rechonchas caminando junto con su corbata batiendo de un lado a otro. Haga clic en uno de los enlaces debajo de sus pies y la página salta a una ubicación específica, lo que, por supuesto, hace saltar al gordo. Felicitaciones a los chicos que hicieron este sitio; irradia con nerd genialidad.
Piensa en Pixels
Por lo que sé, el contenido de este sitio es tan divertido que supera al gordo (es poco probable). A pesar de que, como no puedo leer ni una palabra, asumiré que contiene información de cartera bastante sencilla. Piensa en Pixels es un sitio simple pero atractivo con enlaces a diferentes proyectos que se ejecutan en el lado derecho de la página.
Sisu
Sisu es una pequeña empresa de diseño con algunos clientes GRANDES. Su navegación fija está contenida dentro de una banda para que el contenido a la izquierda y las ilustraciones a la derecha se desplacen, mientras que los enlaces se quedan. Lo convierte en un efecto realmente agradable y resulta útil cuando se desplaza por los numerosos premios que han ganado.
Sitios horizontales
Siempre es un poco refrescante encontrar un sitio que rompa el molde típico de desplazamiento vertical. Estos sitios utilizan la navegación fija para asegurarse de que la naturaleza horizontal de la experiencia no le haga perder el rumbo.
Netontwerp
Netontwerp usa jQuery para manejar la animación lateral que se produce al hacer clic en un enlace. A medida que el sitio se desplaza, la navegación se mantiene fija a la izquierda y facilita el diseño de cada página de una manera asombrosamente perfecta. Me encanta la naturaleza contenida de este sitio, que encaja perfectamente con el diseño fuerte basado en cuadrícula.
f $ dsign
f $ dsign es otra dosis de acción horizontal a través de JavaScript. Este sitio tiene cuatro secciones, fácilmente accesibles mediante la navegación fija en el lado izquierdo de la página. ¡Las ilustraciones locas hacen que el rápido movimiento sea divertido!
Atrápame si puedes
Algunos diseñadores de sitios desean la funcionalidad de navegación fija sin la naturaleza aburrida y estática de un elemento fijo. La solución es permitir que la navegación avance en el viaje mientras se desplaza, pero aumente la demora para que haya una especie de "recuperación". efecto.
Astrel creativo
Este sitio original cuenta con una sección de navegación que desaparece. A medida que se desplaza hacia abajo, la navegación se desvanece. Cuando cesa el desplazamiento, reaparece mágicamente con una buena transición. Es un poco de animación sutil que realmente aumenta el "factor sorpresa". del sitio.
El molitor
El Molitor adopta un enfoque diferente a la navegación de seguimiento que enfatiza el "alcance". Idea un poco más.A medida que se desplaza hacia abajo, parece que la navegación se mantendrá en la parte superior de la página. Sin embargo, a medida que reduce la velocidad o se detiene, la navegación se acerca y se detiene. Es divertido jugar con él y vale unos seis segundos de entretenimiento.
¡Aún más!
¿Quieres más inspiración de navegación fija? Pregunta y recibirás a mi amigo. Aquí hay un montón de ejemplos más, convenientemente ordenados en orden descendente de cuán geniales y / o únicos creo que son (todos son excelentes selecciones). Disfrutar.
Irvine Acosta
Dulce de azúcar
Black Estate
Ir los medios
Si yo dije si
Ryan Dean-Corke
Estudios domani
Caer sobre
Lado del muelle
¿Qué piensas?
Me tomó una eternidad descubrir que muchos sitios utilizan la navegación fija, por lo que realmente espero que les haya gustado la publicación. De lo contrario, malgasté la mayor parte del día buscando en la web cuando podría haber estado haciendo lo que normalmente hago en un día determinado. que definitivamente no es navegar por los blogs de diseño y las galerías CSS como un gran nerd. Ok, estoy mintiendo, eso es exactamente lo que hago todo el tiempo de todos modos.
Dejando las bromas a un lado, use los comentarios a continuación para hacernos saber qué piensa de la navegación de posición fija en general y qué ejemplo le gustó más. También siéntase libre de compartir cualquier ejemplo que encuentre.