Creación de una lista que hará la función de menú de una página, cuya única objetivo es mostrar contenido sin necesidad de recargar la página. Para ello se ha usado HTML5, JavaScript y para mantener seleccionada la pestaña actual aún siendo está recargada se ha utilizado sessionStorage.
Se pueden crear menús de pestañas usando bibliotecas como jQuery o Bootstrap, pero este HowTo lo vamos a realizar usando simplemente JavaScript.
Creando el Menú de pestañas
Esta es la parte más sencilla a la hora de crear el menú y vamos a intentar incluir el menor código posible:
- Creamos el menú de lista usando el elemento <ul> de HTML5 y como atributo de clase le asignaremos tabMenu.
- Todos los elementos <li> de la lista tienen como atributo de clase el valor tabLi y activamos por defecto uno de ellos con el valor active.
- Cada elemento <li> tiene su elemento <span> con una clase especifica que nos permitirá asociarlo a su contenido.
|
1 2 3 4 5 |
<ul class="tabMenu"> <li class="tabLi active"><span class="dashboard">Inicio</span></li> <li class="tabLi"><span class="options">Opciones</span></li> <li class="tabLi"><span class="contact">Contacto</span></li> </ul> |
Cada elemento del menú anterior tiene que relacionarse con un contenido por lo que vamos a incluirlo de la siguiente forma:
- Agrupamos el contenido dentro de elemento <div> con valor de clase tabs.
- Para que el contenido del menú se corresponda con el menú activado su valor de clase debe corresponder con el mismo que el la lista del menú.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="tabs"> <div class="tabContent dashboard active"> <h3>Inicio</h3> <p>Arcu, voluptatem mollis veritatis doloribus</p> </div> <div class="tabContent options"> <h3>Opciones</h3> <p>Anim dignissim laboriosam semper metus?</p> </div> <div class="tabContent contact"> <h3>Contacto</h3> <p>Saepe ornare nunc natoque amet nemo quisquam vivamus aut? </p> </div> </div> |
Un poquito de JavaScript /ECMAScript
El funcionamiento del menú tiene los siguientes procesos:
- Inicialmente usamos sessionStorage para poder guardar una pestaña por defecto.
- Guardamos los nodos de los elementos <li> y <span> del menú y que luego necesitaremos para realizar comprobaciones en ellos.
- Usando el loop forEach de ECMAscript 6> recorremos el contenido del menú e incluimos un evento click a cada una de ellos para así realizar unos procesos o acciones cuando el usuario pulse sobre ellos.
- Si el usuario hace click guardamos el nombre de la pestaña haciendo uso de sessionStorage.
- Limpiamos cualquier clase que no sea tabLi a los elementos de la lista. De esta manera limpiamos el que esté seleccionado actualmente.
- Recorremos todas las capas con el contenido y vamos comparándolas con la que ha pulsado el usuario. En caso de coincidencia mostramos el contenido y asignamos la clase active para marcarla.
- El último proceso es comprobar el valor usando sessionStorage, que nos permite comprobar la pestaña guardada y dejarla activa en caso de que el usuario recargue la página.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
sessionStorage.getItem("tabMenu") == null) ? sessionStorage.setItem('tabMenu', 'dashboard') : undefined ); tabLi = document.querySelectorAll(".tabMenu li"); tabs = document.querySelectorAll(".tabMenu li span"); tabs.forEach(tab => { tab.addEventListener('click', function(event) { // save default tab sessionStorage.setItem('tabMenu', tab.className); // not active tabs at the moment tabLi.forEach(t => { t.setAttribute('class', 'tabLi'); }) tabContent = document.querySelectorAll(".tabContent"); tabContent.forEach(element => { // select the second class from tabContent let className = (element) ? element.className.split(" ") : null; // hide or show tabContent (tab.className == className[1]) ? element.style.display = "block" : element.style.display = "none"; (tab.className == className[1]) ? tab.parentElement.setAttribute('class', 'tabLi active') : undefined; }); }) activeTab = '.'+sessionStorage.getItem("tabMenu"); (activeTab) ? document.querySelector(".tabMenu " + activeTab).click() : document.querySelector(".tabMenu .dashboard").click(); }); |
Un poquito de CSS
Por supuesto todo menú necesita algo de maquetación CSS para poder darle un poco de color y vistosidad.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
.tabMenu { width: 100%; background: hsl(0, 0%, 93%); height: auto; margin: 0; overflow: auto; padding: 0; list-style-type: none; } .tabMenu li { cursor: pointer; float: left; background: hsl(0, 0%, 93%); padding: 10px 0; margin: 0; } .tabMenu span { padding: 12px 20px; } .tabMenu li.active { background: hsl(0, 0%, 31%); color: #fff; } .tabMenu li:hover { background: hsl(0, 0%, 31%); color: #fff; } .tabContent { display: none; } .tabs { margin: 15px 0 0; } |
El ejemplo se puede comprobar en jsFiddle
Otra forma de hacerlo
También se puede realizar este mismo menú usando funciones, eventos con atributos y bucles for, pero aunque también es funcional y podría ser más comprensible es más de la vieja escuela (old style). Podéis ver un ejemplo aquí
