Universal AJAX Live Search

Menú fijo al hacer Scroll con jQuery!

Los menús o barras de navegación fijos han ido ganando popularidad en muchos de los más asombrosos sitios web a través de Internet. La bondad de este tipo de menús es precisamente, mantener  visible el acceso a las funcionalidades o secciones esenciales del sitio, en todo momento sin importar que tanto avance el usuario dentro del mismo. Vamos a analizar sus beneficios y a verlo en acción!

A pesar de que las quejas más sonadas son: “Es innecesario”, o “Crea distracción” , desde el punto de vista de Usabilidad posee grandes ventajas que hacen que valga la pena considerarla como una opción a implementar en nuestro próximo proyecto web.

 

Usabilidad <3 Menús fijos 

Las ventajas de utiizar una barra de navegación fija desde el punto de vista de Usabilidad, son un tanto obvias, ya que hacen que las tareas de navegación sean más rápidas y que el usuario no pierda tiempo regresando hasta el inicio de la página para cambiar de sección, más aun en sitios con gran contenido que se extienden en un scroll casi infinito.

Esto es importante por varias razones, pero la más evidente es: velocidad ; Cuándo un usuario navega por internet, todo sucede a un ritmo vertiginoso, casi nadie tiene más allá de unos cuántos segundos para encontrar lo que busca o moverse de forma inmediata a otro sitio o a otra ubicación del sitio que visita, y el flujo sencillo y rápido de estas acciones es un factor decisivo para mejorar la experiencia de usuario.

Tan sólo imaginemos, que después de pasar horas navegando hacia abajo a través de los miles de posts, fotos y enlaces que un usuario encuentra en Facebook, éste tuviera que volver al inicio de todo lo que ya recorrió para revisar sus notificaciones. No suena muy agradable, cierto?

(Regresé 2 horas de scroll para esto??)

 

Un estudio reciente de usabilidad, muestra que las barras de navegación fijas, pueden ahorrar hasta un 22% de tiempo a los usuarios mientras navegan, si esto no parece una gran cifra, quizá hay que consierar que un usuario promedio en América pasa alrededor de 3 horas diariamente navegando en internet, entonces 22% se vuelve un número más significativo.

 

Todos los chicos populares lo están haciendo

Otro beneficio innegable del uso de los menús fijos, es su popularidad. Hay una gran cantidad de sitios web que han implementado esta funcionalidad y muchos más que comienzan a hacerlo, desarrolladores que crean Plug-ins exclusivamente para hacer más atractivos estos menús, entre otros efectos del impacto de esta tendencia.

Link al sitio aqui

De acuerdo con el estudio de usabilidad mencionado antes, 34 de 40 usuarios prefirieron entre dos interfaces, la que contaba con una barra de navegación fija, los 6 restantes dijeron que no tenían preferencia por ninguna, aunque es una muestra de pequeña, evidentemente el resultado está diciéndonos algo importante.

Link al sitio aqui

Combinando esto con el hecho de que la moda de los menús fijos por si sola, ya es bastante persuasiva, tenemos varios buenos argumentos para considerarlo una excelente opción de navegación.

 

Menos teoría y más código en acción :)

En este artículo en particular, vamos a trabajar una demostración del uso del menú fijo en una página web, cabe mencionar que, ésta técnica es solo una de las muchas que existen, ya que, para crear un menú fijo basta con añadir una propiedad de CSS llamada position, asignar el el valor fixed y acomodarlo  a una distancia de 0 pixeles del borde superior de la ventana del navegador, de esta forma: 

 .miMenu {

    position:fixed;

    top:0;

}

Con estas pequeñas líneas es posible hacer que nuestro menú se mantenga fijo y visible todo el tiempo en la parte superior, es la técnica más básica, pero conforme ha ido haciendose más popular esta técnica, han ido aumentando también las posibilidades de combinarlo con animaciones y mejoras visuales.

En nuestro caso, el Demo que vamos a realizar tiene una integración con un plugin de jQuery , llamado ScrollToFixed, de uso gratuito, desarrollado por Joseph Cava-Lynch.

Éste plug-in es usado para fijar prácticamente cualquier elemento dentro de la pantalla (arriba, en medio, en cualquier parte), pero su magia consiste en permitir que este elemento fluya junto con el resto del contenido del sitio, pero active su condición fija y se detenga sólo al alcanzar una determinada posición. Si esta posición cambia de nuevo, el objeto vuelve al flujo normal de la página.

Este plugin ha sido probado en los siguientes navegadores: 

Firefox 3+, Google Chrome 10+, Safari 5+, Internet Explorer 8/9, and Opera 11.60+.

Para darte una idea más gráfica de lo que haremos, puedes ver aquí el Demo en vivo, asi como descargar los archivos fuente para armar tu propio proyecto.

 

Comencemos

Lo primero que tenemos que hacer, es crear una carpeta para nuestro proyecto , con tres subcarpetas en las que se guardarán respectivamente:

• La hoja de estilos CSS

• EL Plugin de jQuery

• Las imágenes usadas para el menú y el fondo

Y adicionalmente, un archivo llamado index.html que contendrá la estructura de nuestro Demo:

Estructura de la carpeta de nuestro Demo

Imágenes en versión grande y pequeña para el menú fijo que cambia de tamaño al hacer scroll

El elemento mágico, plugin jqueryscrolltofixed.js

 

Dentro de nuestro archivo index.html, agregaremos el siguiente código:

<html>
<head>
<title>Demo de Menú fijo al hacer scroll con jQuery</title>
<link rel="stylesheet" href="css/estilos.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-scrolltofixed.js" type="text/javascript"></script>
<script>
    $(document).ready(function() {
        $('.header').scrollToFixed();
        $('.header').bind('fixed.ScrollToFixed', function() {
$(this).css('height', '30px'); $('#menu_normal').slideUp("fast"); $('#menu_small').slideDown("slow");
}); $('.header').bind('unfixed.ScrollToFixed', function() {
$(this).css('height', '65px'); $('#menu_small').slideUp( "fast"); $('#menu_normal').slideDown("slow"); }); }); </script> </head> <body> <div class="banner"> <h1>Banner</h1> <p>Este repositorio aloja el Demo del Efecto de men&uacute; fijo al hacer scroll, hecho con jQuery</p> </div> <div class="header"><!--Este es el elemento que contiene el menu y mismo que se va a quedar fijo al hacer scroll--> <ul id="menu_normal"><!--Esta es la versión normal del menú--> <li><a href="">HOME<img class="menu_item" src="img/home_48.png"/></a></li> <li><a href="">NOTICIAS<img class="menu_item" src="img/calendar_48.png"/></a></li> <li><a href="">GALER&Iacute;A<img class="menu_item" src="img/photo_48.png"/></a></li> <li>CONTACTO<img class="menu_item" src="img/mail_48.png"/></a></li> </ul> <ul id="menu_small"><!--Esta es la versión compacta del menú y permanece oculta hasta que se hace scroll--> <li><a href=""><img class="menu_item" src="img/home_24.png"/></a></li> <li><a href=""><img class="menu_item" src="img/calendar_24.png"/></a></li> <li><a href=""><img class="menu_item" src="img/photo_24.png"/></a></li> <li><img class="menu_item" src="img/mail_24.png"/></a></li> </ul> <p style="clear:both"></p> </div>

 

Estas líneas, ademas de ser parte de la estructura básica de cualquier documento HTML , contienenen el enlace a tres cosas esenciales dentro de la sección <head> para que el efecto funcione:

• Enlace a la librería jQuery desde googleapis.com (Pues no podemos usar un plug-in de jQuery sin cargar primero la librería base)

• Enlace al plugin de jQuery ScrollTofixed

• Enlace a la hoja de estilos dentro de nuestra carpeta css

 

Enseguida tenemos el script que hará la magia encerrado en las etiqueta <script>

Lo que este script hace por línea  es básicamente lo siguiente:

  • Se ejecuta cuándo se ha cargado todo el documento ($(document).ready(function())
  • Encuentra el elemento con la clase "header" e inicializa en él la función ScrollTofixed();
  • Esto automáticamente significa que el elemento se volverá fijo cuando toque el borde superior de la ventana del navegador y a su vez detona otras dos acciones sobre los botones que conforman el menú:  Esconde la versión del menú con iconos grandes y nombres y muestra la versión de iconos pequeños en una barra más delgada.

Y las líneas subsecuentes se refieren a lo que sucede cuándo el elemento "header" ya no está tocando el borde de la página:

  • Su ancho vuelve a la normalidad, y las acciones sobre los botones de menú se revierten, escondiendo los botones pequeños y mostrando los grandes con descripción.

 

Más adelante veremos lo que es el comienzo de la etiqueta <body> con la estructura de nuestro Banner y las dos versiones de menú que usaremos para este Demo, la versión con iconos grandes y la de iconos pequeños, las veremos en forma de dos listas separadas, marcadas cada una con la clase "menu_normal" y "menu_small" respectivamente, las imágenes usadas se enlazan desde la carpeta img del proyecto.

Asi es como lucirán las dos versiones de menú una vez que liguemos los estilos:

Menú normal

Menu compacto y fijo

 

Finalmente, para terminar la estructura de la página pondremos texto simulado y un pequeño footer agregando estas líneas a nuestro index.html y guardándolo:

  <div class="content">
            <ul>
                <li id="left">
                    <h1>Lorem ipsum dolor</h1><h2>Sit amet justo</h2><p>Leo sed sed pulvinar et magna id eget condimentum laborum vel suspendisse. Porttitor mattis aenean. Accumsan sed adipiscing. Amet penatibus rutrum vitae vehicula viverra amet nibh semper nunc libero tincidunt massa vitae sagittis urna consectetuer magna a diam parturient. Nec nec dolor. Venenatis purus quis. In turpis in. Officiis hic mauris lorem wisi maecenas.</p><h2>Velit sed eget donec placerat vestibulum</h2><p>Orci id gravida per neque nibh. Nullam sit commodo tincidunt et diam vitae pharetra sed. Tempus sit sodales. Voluptatem wisi mattis inceptos tellus dolor rhoncus sed et eu turpis torquent ligula eu dui lorem nec accumsan platea lacinia ac. Non faucibus per sit in vehicula magna lacus deleniti. Tincidunt per aliquam. Vestibulum adipiscing laoreet eget eros commodo. Laoreet molestie a eros in nec sed justo venenatis. Eu lorem gravida. Nisl non a sociis convallis leo. Est nunc nisl porta dignissim turpis. Sapien sed nulla. Amet mi diam. Sem risus accumsan. Posuere viverra convallis. Est at netus. Tortor eget quam. Wisi nulla erat vestibulum tempor eu hendrerit vel dolor. Aliquam magnis sed etiam felis eros.</p><h2>Scelerisque in justo neque ultricies vel eget libero quam vitae metus ante nonummy amet augue</h2><p>Velit tellus enim. Vitae et ultrices. Odio torquent ligula. Quam in a scelerisque malesuada non. Sem enim congue sed odio libero. Lacinia commodo feugiat sed nonummy lobortis erat maecenas vivamus. Lectus diam pede. Eget risus mauris. In dapibus libero suspendisse pellentesque urna. Id metus libero. Metus id accumsan curabitur id congue. Elementum diam placerat posuere vivamus felis. Arcu ante vestibulum. Orci ut ut magna nibh eu aliquam mi qui vel pretium nullam. Tellus ligula malesuada. Consequat id nulla. Feugiat suscipit ligula dolor amet congue urna etiam amet accumsan consequat distinctio natoque placerat nec. Eget lectus mauris molestie fusce dui. Vel consectetuer imperdiet tempus at sed. Proin aliquam nec. Ligula sit elit eget faucibus cras arcu in rhoncus. Lorem id integer. Vestibulum nec cum. Ligula aliquam tellus elit nisl lectus in diam tortor wisi mauris tempus.</p><p>Fermentum ipsum augue. Lectus in nunc vulputate tellus neque tortor erat cursus. Congue wisi enim. Nam eget dui auctor amet quis donec ipsum nibh. Nisl leo magna officia leo nibh.</p><h2>Mollis in ornare</h2><p>Nec a ut. Ut nullam urna. Quis tortor mauris blandit non corrupti. Rutrum in at id dignissim dictum. Duis ac ornare parturient ultrices amet odio feugiat aenean cras mus pede. Praesent egestas netus. Urna esse pharetra commodi commodo curabitur. A lacinia sed etiam ut vel maxime platea porta odio mollis non nisl nulla nullam. Vitae impedit pulvinar.</p><h2>Sem velit maiores</h2><p>Accumsan blandit ut. Varius velit ante. Leo tincidunt nulla lorem gravida nulla tempus volutpat donec phasellus aliquet nec. Sapien tempor id pharetra magna mi. Nunc fusce venenatis nam mi nam. Eget senectus convallis donec urna suscipit donec natoque lacinia rutrum lorem est adipiscing sed lectus. Dictumst faucibus ut. Vulputate sodales ipsum. Purus vehicula sed vestibulum eget integer.</p><h2>Ut turpis tempor integer fusce bibendum sem ipsum rutrum</h2><p>Nec in nibh. A amet condimentum. Commodo fringilla amet sit ut quis. Facilisi ac a ut id morbi. Aut pretium orci donec dui vel risus eros amet quis ut molestiae. Molestie nulla sem vestibulum urna aptent aliquam etiam auctor. Erat eu duis. Imperdiet vestibulum ut. Nibh risus fusce viverra wisi lectus.</p><h2>Sed curabitur ut vel condimentum fermentum a felis suspendisse</h2><p>Neque lacus lorem ut massa lacinia. Amet nulla est. Vitae in vel turpis diam elit lacinia amet quis. Sem a in. Architecto magna sit vel vehicula elit ullam consectetuer non. Vel vulputate elit facilisis accumsan justo. Ridiculus pharetra fusce. A volutpat curabitur. Senectus amet in elementum ipsum ut sit eros tellus.</p><h2>Phasellus enim metus vestibulum scelerisque mauris</h2><p>Donec nisl massa. Hendrerit suscipit turpis sed eget quis. Mauris wisi aenean amet semper morbi. Orci hendrerit vestibulum dolor a semper nullam nesciunt amet.</p><p>Erat ac non. Accumsan arcu mauris. Consectetuer vivamus convallis. Vestibulum neque vitae risus vivamus ut. Egestas elit eget. Venenatis mattis orci. Malesuada eget massa vitae est nec lacus et parturient nunc enim curabitur mollis vitae dictumst et malesuada non amet wisi amet sit lacus cras quis accumsan tortor tempore vulputate ante. Corrupti est sem dignissim ante vehicula ac cursus in tempus suspendisse at. Neque pariatur sed. Ac malesuada a. Hac duis pellentesque. Libero varius fugiat. Iaculis aliquam ac eros tempus sit sit in fusce. Luctus wisi amet. Vestibulum est vitae ut libero massa. Eu hendrerit velit. Et per massa congue vivamus sapien. Nibh nibh pulvinar. Libero velit est. Et lorem ipsum. Pretium sagittis nisl. Id ut viverra. Arcu dis sapien vehicula amet lacus sodales sagittis quam minim in mauris integer ante eu. Nisl id id eget sed molestie nec ac mauris nonummy proin porttitor. Vestibulum orci a sed in ligula.</p><h2>Lorem pede adipiscing massa eu eros</h2><p>Proin a at. Sagittis congue vitae. Eu arcu sem. A pede cras volutpat faucibus dui. Est ridiculus vestibulum blandit a dui montes dignissim mauris ac tellus diam. Rutrum gravida orci id eget morbi. Nec ut mollis. Dolore nulla donec. Nunc accumsan consectetuer. Erat orci vel. Primis erat nostra nec laoreet tempor eos porttitor sem hendrerit dignissim venenatis faucibus vel pellentesque. Lobortis in mi vitae donec metus faucibus amet viverra at ut dolor varius felis ante blandit sit litora ac autem ante. Pellentesque pede quisque. In nonummy pulvinar. Eget nunc quam. Massa torquent ut penatibus hendrerit et nulla scelerisque odio dolor vitae quis. In in quam dolor nec arcu. Magna vitae feugiat. Donec fermentum bibendum.</p><h2>Pretium dui dui</h2><p>Convallis wisi urna. Ipsum tellus ultricies. Non ac pretium. In non accumsan purus nec aliquip hendrerit fusce ornare ut turpis quis dictum tincidunt in vestibulum fringilla ad. In et dui. Eget tellus quisque arcu varius per tellus neque sit convallis nulla tellus. Nam faucibus aliquam. Vitae vel sed turpis nascetur ultricies aliquam vitae ultricies sed lobortis vestibulum sapien non eu. Sem amet nulla. Leo elit ipsum imperdiet sit dictumst. Enim turpis vivamus. Posuere odio ipsum in augue quisque nisl duis metus. Etiam imperdiet curabitur. Quis velit arcu. Ipsum turpis libero vel donec et. Ac risus a tempus.</p><h2>Sit amet dolore</h2><p>Praesent ipsum nibh ut curabitur justo. Ut proin faucibus. Ornare molestie magnis nec tempus ultricies eu amet sed. Et egestas aptent. Vel dignissim justo sodales suscipit lorem quis ullamcorper lacinia. Ac ligula nascetur. Tortor non leo at lacus non feugiat nisl aut suscipit nec ac rhoncus sed ipsum. Mauris condimentum erat rutrum ultricies justo.</p><h2>Rhoncus mauris vivamus</h2><p>Consectetuer quam euismod id accumsan a tellus ultrices quam suspendisse metus sit aliquam nec fermentum. Fusce aenean wisi. Purus eget rutrum non risus duis. Risus varius commodo egestas diam est. Dictum tellus nullam pede in ligula egestas neque pharetra vel justo non. Eu pharetra vestibulum. Mauris pede mauris. Erat a tellus. Orci vivamus mauris in morbi et.</p><h2>Asperiores lectus minim</h2><p>Lorem integer faucibus lorem eget augue. Vulputate eget facilisis eu sollicitudin eget. Justo libero tincidunt tincidunt quam lacus. Leo ipsum felis. Eget potenti suscipit. Porta at omnis aliquam eleifend luctus. Est morbi tristique libero pellentesque nunc nec consectetuer in eget ante arcu eget sit integer. Metus magna sem vitae quam luctus id in sit neque suspendisse lacinia. Et arcu eget ac ante vivamus. Vitae magna cursus. Sollicitudin a vivamus. Pede eu nunc vehicula erat ipsum. Fusce quisque tincidunt. Fermentum sed aliquam elementum ut vitae wisi curabitur eget. Posuere nulla in curabitur sapien nascetur. Et proin maecenas integer hendrerit ultricies sed sed eu eget feugiat sem pellentesque velit eu. Suspendisse dui lectus. Ut tincidunt vitae. Et molestie donec.</p><h2>Auctor malesuada lorem</h2><p>In feugiat ut aliquam turpis vehicula. Dolor aut in gravida in nam eget euismod erat. Dignissim dictum non. Elit erat lorem ipsum lorem ac leo at turpis tristique amet aliquam morbi et per aliquam suspendisse cras. Sed elementum mi. Magna gravida facilisis ante dis mattis. Accumsan magnis elementum. Lacus dolor dictum. Sit vivamus integer. Nonummy ut torquent. Massa penatibus sit. Condimentum pulvinar ullamcorper. Vulputate laoreet primis lacus nec donec dictum eu pellentesque eros dictum amet risus dui.</p>
                </li>
                <li id="right">
                            <p>Leo sed sed pulvinar et magna id eget condimentum laborum vel suspendisse.</p><p>Porttitor mattis aenean. Accumsan sed adipiscing. Amet penatibus rutrum vitae vehicula viverra amet nibh semper nunc libero tincidunt massa vitae sagittis urna consectetuer magna a diam parturient.</p><p>Nec nec dolor. Venenatis purus quis. In turpis in. Officiis hic mauris lorem wisi maecenas.</p>
                        </li>
            </ul>
            
 </div>
   <div class="footer">
     <h2>S&iacute;gueme en Twitter como @ZaeVega</h2>
   </div>
</body>
</html>

 

Una vez completo nuestro documento index.html, hay que poner el siguiente código en el archivo que llamaremos estilos.css dentro de la carpeta css del proyecto: 

body {
    font-family: arial, sans-serif;
    margin: 0 auto 0;
    width: 100%;
    background: url(../img/congruent_pentagon.png) repeat;
}
body h2 {
    font-weight: bold;
    font-size: 120%;
    margin-top: 12px;
}
body p {
    margin-top: 8px;
}
body ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
}
.banner {
    background-color: #000;
    height: 130px;
    padding: 5px;
    width: 100%;
    color: #A9EEE8;
}
.header {
    background-color: #24C9AE;
    height: 61px;
    padding: 10px;
    width: 100%;
    color:#fff;
}

#menu_small {
    display: none; /*Nótese que el elemento menú_small permanece oculto mediante la propiedad display:none hasta que se le hace visible con jQuery*/
}

div.header ul {
   list-style-type: none;
    height: 61px;
    width: 390px;
    position: fixed;
    right: 0px;
    font-size: 12px;
}

div.header ul#menu_small {
   list-style-type: none;
    height: 61px;
    width: 267px;
    position: fixed;
    right: 0px;
}

div.header ul li {
   float: left;
}

div.header li a {
text-decoration: none;
color: #fff;
display: block;
line-height: 14px;
margin-right: 16px;
/* border-right: 1px solid white; */
padding-right: 29px;
}

div.header li  img {
display: block;
margin: 0 auto;
}

.content {
    width:80%;
    margin: 0 auto;
    padding: 5px;
    background-color: rgba(255,255,255,0.7);
}
.content li {
    display: inline-block;
    vertical-align: top;
    text-align: justify;
}
.footer {
    height: 50px;
    width: 100%;
    background-color: #000;
    padding: 5px;
    color: #A9EEE8;
}

div.footer h2 {
  display: block;
  width: 100%;
  text-align: center;
}

#left {
    width: 69%;
    margin-left: 1%;
}
#right {
   width: 26%;
   margin-left: 2%;
   margin-top: 109px;
}

 

Guardamos los cambios y ahora ya podemos abrir la página index.html en nuestro navegador y asombrarnos!

 

Notas importantes:

-El uso de Cualquier Plug-in de jQuery implica necesariamente enlazar también la librería más reciente de jQuery , ya sea descargandola o haciendolo directamente desde la página web oficial aqui.


-Ésta es sólo una de las diversas técnicas que existen para crear menús fijos y añadir animaciones o efectos, aunque se puede hacer fijo prácticamente cualquier elemento que necesites (Barra de redes sociales, footer, etc) y hay Plug-ins que te ayudarán en cualquiera de estas tareas, no olvides que lejos de  crear distracciones , el poner un elemento fijo debe significar un beneficio en la experiencia de tus visitantes, es mejor ser selectiv@ con su uso.

Nos vemos en el próximo artículo, recuerda que basta con tener clara una idea para encontrar el medio de hacerla realidad :)

 

Zae Vega. Diseñadora Web, Amante del Café, la Usabilidad y Front-End.

Dudas o comentario? Encuéntrame en twitter como @ZaeVega