Acordeón: qué es eso?
Acordeón, como todos sabemos, es un instrumento musical antiguo utilizado para tocar música folclórica en algunos países como Italia, Alemania…
Bueno, Estaba bromeando, me gusta jugar. Reiniciemos.
Todos sabemos lo que es un acordeón: una increíble, forma cómoda de mostrar muchas opciones (por lo general, elementos de menú) en nuestras páginas html sin abarrotarlas.
Esto es lo que Wikipedia, la enciclopedia dice:
los elemento de control gráfico acordeón es una lista de elementos apilados verticalmente, como etiquetas o miniaturas. Cada elemento puede ser «expandido» o «estirado» para revelar el contenido asociado con ese elemento. Puede haber cero elementos expandidos, exactamente uno, o más de un elemento expandido a la vez, dependiendo de la configuración.
El término proviene del acordeón musical en el que las secciones del fuelle se pueden expandir tirando hacia afuera.
Un menú en acordeón nos permite organizar los elementos de nuestro menú en categorías y subcategorías sin ningún límite., poner décimas de enlaces en un espacio muy pequeño.
De qué estás hablando?
Bueno, Te escucho decir, pero porque nos cuentas todo eso? Ya lo sabemos…
Bien, Sé que lo sabes y deberías saberlo sé que lo sabes. El hecho es que muchos pueblos , cuando se trata de jugar para construir un menú de acordeón, comience a buscar un complemento de jQuery: hay toneladas por ahí, pero lo que quiero mostrarte es que no necesita ningún complemento para construir un archivo completamente funcional, menú acordeón infinitamente extensible: sólo 11 líneas de jQuery (paréntesis incluido)!
Así que permítanme mostrarles un ejemplo práctico del menú de acordeón que vamos a construir juntos:
Ejemplo de acordeón
[embedit snippet =»mg-acordeón»]
El menú de acordeón más simple jamás creado!
Comencemos con nuestro Acordeón. Tendrá un par de excelentes características.:
- se puede extender según sea necesario sin modificar el código jQuery subyacente: podemos agregar un número infinito de submenús y elementos simplemente usando un par de clases css;
- Cada vez que hagamos clic en un elemento del menú para mostrar sus hijos queremos cerrar automáticamente cualquier otro menú abierto independientemente de su nivel (excepto, por supuesto, en el que estamos).
El marcado básico
Entonces, mira el siguiente marcado para nuestro menú. Usaremos la navegación de elementos para envolver la serie de listas desordenadas que construirán menús y submenús. Damos a la lista principal el id. «mg-acordeón» (sabes, Mg estancias para Marco Gasi 😉 ) Luego usaremos class «desplegable» para marcar todo en elementos que contienen un submenú y la clase «submenú» para marcar el la elemento que representa el submenú mantenido por el elemento de la lista desplegable. En el siguiente fragmento, puede ver resaltadas todas las líneas donde se utilizan estas clases:
<no son>
<UL = ID"mg-acordeón" role ="navegación" class ="hilera">
<en><a href ="#" título ="">Todas las recetas italianas</un></en>
<= Li class"desplegable"><a href ="#" título ="">Primeros cursos</un>
<= Ul class"submenú">
<en><a href ="#">Todos los primeros platos</un></en>
<en><a href ="#">Todas las recetas de pasta</un></en>
<en><a href ="#">Todas las recetas de arroz</un></en>
<= Li class"desplegable"><a href ="#"> Pasta</un>
<= Ul class"submenú">
<en><a href ="#">Carbonara</un></en>
<en><a href ="#">Amatriciana</un></en>
<en><a href ="#">Con pesto</un></en>
<en><a href ="#">Tomate y albahaca</un></en>
</la>
</en>
<= Li class"desplegable"><a href ="#">Arroz</un>
<= Ul class"submenú">
<en><a href ="#">milanés</un></en>
<en><a href ="#">Con setas</un></en>
<en><a href ="#">Con guisantes</un></en>
<en><a href ="#">Con marisco</un></en>
</la>
</en>
</la>
</en>
<= Li class"desplegable"><a href ="#">Steack</un>
<= Ul class"submenú">
<en><a href ="#">Filetes de stroganoff</un></en>
<en><a href ="#">Bife & papas fritas</un></en>
<en><a href ="#">Filete en salsa de vino tinto</un></en>
<en><a href ="#"> Filetes de mantequilla de rábano picante</un></en>
</la>
</en>
<= Li class"desplegable"><a href ="#">Peces</un>
<= Ul class"submenú">
<en><a href ="#">Merluza ahumada, frijoles & verduras</un></en>
<en><a href ="#">Salmón miso a la plancha con fideos de arroz</un></en>
<en><a href ="#">Curry de pescado con coco</un></en>
<en><a href ="#">Tagine de mariscos</un></en>
</la>
</en>
<= Li class"desplegable"><a href ="#">Frutas</un>
<= Ul class"submenú">
<en><a href ="#">Albaricoques en almíbar con romero</un></en>
<en><a href ="#">Cerezas negras canela</un></en>
<en><a href ="#">Piña caramelizada con crema</un></en>
</la>
</en>
<= Li class"desplegable"><a href ="#">Postres</un>
<= Ul class"submenú">
<en><a href ="#">Budín de chocolate</un></en>
<en><a href ="#">Pastel toscano de castañas</un></en>
<en><a href ="#">Tartaleta de avellanas con mermelada de higos</un></en>
</la>
</en>
</la>
</no son>
Tenga en cuenta puedes agregar tantos submenús como necesites sin cambiar una sola coma del código jquery.
Ir con jQuery
Lo que queremos hacer es convertir esta simple lista en un menú de acordeón completamente funcional.
Queremos tres cosas:
- al hacer clic en un elemento se abrirá su submenú y al hacer clic en ese elemento nuevamente se ocultará el submenú
- al hacer clic en un elemento, se ocultará cualquier submenú visible antes para mostrar el submenú secundario del elemento en el que se hizo clic
- este mecanismo debe funcionar respetando cualquier nivel de submenús anidados (en la muestra de arriba tenemos tres)
Vamos a jQuery. primero, necesitamos incrustar jQuery:
<script src ="https (en inglés)://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></guión>
¿Está listo el documento??
$(documento).Listo(función (){
Ahora tenemos que adjuntar un controlador de eventos a todos los elementos de anclaje para los elementos de la lista que tienen un submenú. Hacemos esto en dos pasos solo para que quede un poco más claro:
// first we get our accordion menu and we put it in the variable mymenu var mymenu = $('ul # mg-accordion'); // luego creamos los menús desplegables variables que contienen todos los anclajes secundarios de los elementos de la lista de la clase // Listas deplegables. Estos anclajes son los que tenemos que adjuntar el controlador de eventos a: haciendo clic en ellos verá cómo // the hidden submenu var dropdowns = $(mymenu.find('li. dropdown > a'));
Y ahora el código del acordeón:
desplegables en('hacer clic', función (mi) {
//prevent default behavior
e.preventDefault();
// estamos haciendo clic en un ancla dentro de un elemento de la lista
// por lo que encontramos todos los elementos ul.submenu que son
// hijos de cualquier elemento de la lista que permanezca en el
// same level of its parent
var items = $(esta).padres().hermanos().encontrar('ul.submenú');
// for each found ul element we do the following
items.each(función () {
Si ($(esta).es(':visible')) {
$(esta).deslizar hacia arriba('lento');
}
});
// mostrar y ocultar listas
$(esta).hermanos('ul.submenú').slideToggle();
});
Si desea permitir que más de un submenú sea visible al mismo tiempo, puede simplemente eliminar algunas líneas de código:
var mimenú = $('ul # mg-accordion');
var desplegables = $(mymenu.find('li. dropdown > a'));
desplegables en('hacer clic', función (mi) {
e.preventDefault();
$(esta).hermanos('ul.submenú').slideToggle();
});
Poniendolo todo junto!
Eso es todo. Puedes diseñarlo como prefieras y no tienes límite más que tu fantasía! 🙂
Poniéndolo todo junto obtenemos el siguiente código: este es exactamente el mismo código que puedes ver en ejecución sobre en mi pequeño ejemplo de menú de acordeón.
Como puedes ver, He agregado un código para poner un + (más) y – (menos) letreros cerca del submenú abierto y cerrado y para cambiarlos de acuerdo con las opciones del usuario. Consulte los comentarios en el código para obtener más información sobre esto..
<!DOCTYPE html>
<html lang ="en">
<cabeza>
<meta juego de caracteres ="UTF-8">
<meta http-equiv ="Compatible con X-UA" = contenido"IE = borde">
<meta name ="ventana" = contenido"width = dispositivo de ancho, inicial escala = 1">
<título>Prueba de acordeón</título>
<estilo>
la{
list-style-type: ninguna;
}
li.dropdown > la{
monitor: ninguna;
}
</estilo>
</cabeza>
<cuerpo>
<div class ="envase">
<div class ="hilera">
<div class ="col-12">
<clase de navegación ="Mi menú">
<UL = ID"mg-acordeón"class ="hilera">
<en><a href ="#" título ="">Todas las recetas italianas</un></en>
<= Li class"desplegable"><a href ="#" título ="">Primeros cursos</un>
<= Ul class"submenú">
<en><a href ="#">Todos los primeros platos</un></en>
<en><a href ="#">Todas las recetas de pasta</un></en>
<en><a href ="#">Todas las recetas de arroz</un></en>
<= Li class"desplegable"><a href ="#"> Pasta</un>
<= Ul class"submenú">
<en><a href ="#">Carbonara</un></en>
<en><a href ="#">Amatriciana</un></en>
<en><a href ="#">Con pesto</un></en>
<en><a href ="#">Tomate y albahaca</un></en>
</la>
</en>
<= Li class"desplegable"><a href ="#">Arroz</un>
<= Ul class"submenú">
<en><a href ="#">milanés</un></en>
<en><a href ="#">Con setas</un></en>
<en><a href ="#">Con guisantes</un></en>
<en><a href ="#">Con marisco</un></en>
</la>
</en>
</la>
</en>
<= Li class"desplegable"><a href ="#">Steack</un>
<= Ul class"submenú">
<en><a href ="#">Filetes de stroganoff</un></en>
<en><a href ="#">Bife & papas fritas</un></en>
<en><a href ="#">Filete en salsa de vino tinto</un></en>
<en><a href ="#"> Filetes de mantequilla de rábano picante</un></en>
</la>
</en>
<= Li class"desplegable"><a href ="#">Peces</un>
<= Ul class"submenú">
<en><a href ="#">Merluza ahumada, frijoles & verduras</un></en>
<en><a href ="#">Salmón miso a la plancha con fideos de arroz</un></en>
<en><a href ="#">Curry de pescado con coco</un></en>
<en><a href ="#">Tagine de mariscos</un></en>
</la>
</en>
<= Li class"desplegable"><a href ="#">Frutas</un>
<= Ul class"submenú">
<en><a href ="acordeón.php">Albaricoques en almíbar con romero</un></en>
<en><a href ="#">Cerezas negras canela</un></en>
<en><a href ="#">Piña caramelizada con crema</un></en>
</la>
</en>
<= Li class"desplegable"><a href ="#">Postres</un>
<= Ul class"submenú">
<en><a href ="#">Budín de chocolate</un></en>
<en><a href ="#">Pastel toscano de castañas</un></en>
<en><a href ="#">Tartaleta de avellanas con mermelada de higos</un></en>
<= Li class"desplegable"><a href ="#">Postres</un>
<= Ul class"submenú">
<en><a href ="#">Budín de chocolate</un></en>
<en><a href ="#">Pastel toscano de castañas</un></en>
<en><a href ="#">Tartaleta de avellanas con mermelada de higos</un></en>
<= Li class"desplegable"><a href ="#">Postres</un>
<= Ul class"submenú">
<en><a href ="#">Budín de chocolate</un></en>
<en><a href ="#">Pastel toscano de castañas</un></en>
<en><a href ="#">Tartaleta de avellanas con mermelada de higos</un></en>
<= Li class"desplegable"><a href ="#">Postres</un>
<= Ul class"submenú">
<en><a href ="#">Budín de chocolate</un></en>
<en><a href ="#">Pastel toscano de castañas</un></en>
<en><a href ="#">Tartaleta de avellanas con mermelada de higos</un></en>
</la>
</en>
<= Li class"desplegable"><a href ="#">Postres</un>
<= Ul class"submenú">
<en><a href ="#">Budín de chocolate</un></en>
<en><a href ="#">Pastel toscano de castañas</un></en>
<en><a href ="#">Tartaleta de avellanas con mermelada de higos</un></en>
</la>
</en>
</la>
</en>
<= Li class"desplegable"><a href ="#">Postres</un>
<= Ul class"submenú">
<en><a href ="#">Budín de chocolate</un></en>
<en><a href ="#">Pastel toscano de castañas</un></en>
<en><a href ="#">Tartaleta de avellanas con mermelada de higos</un></en>
<= Li class"desplegable"><a href ="#">Postres</un>
<= Ul class"submenú">
<en><a href ="#">Budín de chocolate</un></en>
<en><a href ="#">Pastel toscano de castañas</un></en>
<en><a href ="#">Tartaleta de avellanas con mermelada de higos</un></en>
</la>
</en>
<= Li class"desplegable"><a href ="#">Postres</un>
<= Ul class"submenú">
<en><a href ="#">Budín de chocolate</un></en>
<en><a href ="#">Pastel toscano de castañas</un></en>
<en><a href ="#">Tartaleta de avellanas con mermelada de higos</un></en>
</la>
</en>
</la>
</en>
</la>
</en>
</la>
</en>
</la>
</no son>
</Div>
</Div>
</Div>
<script src ="https (en inglés)://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></guión>
<de script type ="text / javascript">
$(documento).Listo(función () {
var mimenú = $('ul # mg-accordion');
var desplegables = $(mymenu.find('li. dropdown > a'));
menús desplegables cada uno(función () {
$(esta).anteponer('+');//agregamos un + (más) símbolo para resaltar el hecho de que el nodo contiene un submenú
});
desplegables en('hacer clic', función (mi) {
e.preventDefault();
//Siguiente 5 lines change the plus/minus symbols accordingly to the submenu state
if ($(esta).texto().charAt(0) === '+') {
$(esta).texto($(esta).texto().reemplazar('+', '-'));
} más {
$(esta).texto($(esta).texto().reemplazar('-', '+'));
}
elementos var = $(esta).padres().hermanos().encontrar('ul.submenú');
artículos cada uno(función () {
Si ($(esta).es(':visible')) {
$(esta).deslizar hacia arriba('lento');
//Actualizamos el símbolo más / menos en todos los submenús de hermanos
$(esta).hermanos('. dropdown a').texto($(esta).hermanos('. dropdown a').texto().reemplazar('-', '+'));
}
});
$(esta).hermanos('ul.submenú').slideToggle();
});
});
</guión>
</cuerpo>
</.html>
Puedes ver el código anterior en acción aquí.
Eso es todo, personas. Espero que esto ayude 🙂
Hola, Esto es genial, pero parece que no funciona como se esperaba. Los niños siempre se muestran y el menú + se convierte en un – cuando se cierra y solo entonces esconde a los niños.
Hola AJ.
Eso es extraño! Solo para asegurarme, acabo de copiar y pegar el código publicado creando un ejemplo y funciona como se esperaba. He agregado un enlace a este ejemplo al final del artículo, pero puede navegar a https://codingfix.com/examples/mgaccordion-example.html y verás que el código simplemente funciona.
Y aunque reconozco que no es muy coherente con lo que digo en mi post, Luego convertí el código en un complemento que puedes encontrar aquí 😀
Avísame si te metes en algún problema 🙂 y gracias por leer mi blog!