(Twitter) Bootstrap 3.0.3. problema cuando creas sitios web de una sola página, la navegación no colapsa luego que le das clic.

El menú de navegación que puedes crear con Bootstrap funciona normalmente bien cuando tus opciones de menú llevan a otras páginas web dentro de tu sitio.

Cuando el tamaño del dispositivo es pequeño (móvil), normalmente el menú se convierte en un botón hamburguesa (hamburger) como se ve en el dibujo.

botonhamburger

Para ver las opciones de menú en un dispositivo móvil tienes que primero darle clic al botón hambuguesa y luego darle clic a la opción de menú que quieres utilizar. Esto funciona perfectamente mientras las opciones de menú te lleven a otras páginas web y no apunten a una posición dentro de la misma página. Si esto pasa el menú no colapsa (minimiza) sino que permanece abierto, obligándote a darle clic de nuevo al menú hamburguesa para que colapse y te deje ver lo que hay detrás.

Botón Hamburguesa Expandido.
Botón Hamburguesa Expandido.

Solución.

Lo que queremos lograr es que cuando seleccionemos una opción del menú, éste colapse luego del clic (lo cual no hace por defecto).

Tenemos que agregar el siguiente código JavaScript. Lo puedes poner dentro del mismo documento HTML o en un archivo JavaScript separado. Requiere jQuery para funcionar.

$(document).on('click.nav','.navbar-collapse.in',function(e) {
    if( $(e.target).is('a') ) {
        $(this).removeClass('in').addClass('collapse');
    }
});

SPA. Single Page Applications o Aplicaciones de una sola página son utilizadas para crear aplicaciones web que sean similares a aplicaciones instaladas en tu computadora, en velocidad, en funcionalidad, etc. Como ejemplo de estas aplicaciones tenemos la página de Gmail o la de Hotmail.

Hoy está de moda hacer sitios web que utilizan una sola página web y cuyo menú de opciones te lleva a otras “secciones” dentro de la misma, cosa que puedes lograr desplazándote hasta el final de la página. No confundir estos sitios web con aplicaciones de una sola página (SPA) puesto que las tecnologías involucradas en su construcción son diferentes. Una SPA es más una aplicación, consta de un front-end (capa de cliente), una capa de negocios y un back-end (puede ser acceso a una base de datos o  a través del uso de una API tipo REST – Representational State Transfer).

Para más información en inglés haz clic aquí.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s