Tutorial Blogger #19
¡Que tal Lectores!!Espero hayan tenido un excelente fin de semana. Y como es lo casi normal en DOMINGO de tutoriales quiero mostrarles una forma de agregar a nuestro blog un menú en acordeón. Ya sea para una pagina estática o para el lateral de blog. No quiero poner me a indicarles tecnicismo que se que no entenderán si no estas familiarizado con el lenguaje HTML, así que estoy tratando de hacerles este tutorial lo mas simple posible.
◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈
1. Menú ACORDEON Desplegable con hover▸Primero copiamos el código HTML, debemos editar lo con los códigos correspondientes a lo que seria nuestro menú despegable.
See the Pen Menu Desplegable Hover by Karen Peña (@karen-pe-a) on CodePen.
▸Una vez tenemos una estructura HTML como esa, sólo será cuestión de añadir el CSS para que el menú funcione con el estilo acordeón📌 Recuerda que todo lo que esta resaltado en color VERDE debe ser remplazado por la URL (dirección web) de la entrada, pero si no quieres añadir ninguna URL no pasa nada.
•Todo lo que esta resaltado en BLANCO , es donde colocaras el nombre de las categorías y sud categoría.📌 Si quieres añadir mas ventanas con sub ventanas, añade antes del ultimo </ul> lo siguiente
◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈2. Desplegable con clic▸Ahora haremos lo mismo que en el primer código, Editaremos el siguiente código HTML con todos los enlaces correspondientes y categorías/subcategorías<li><a href="URL">OPCIÓN 1</a><ul>
<li><a href="URL">Opción 1.1</a></li>
<li><a href="URL">Opción 1.2</a></li>
</ul>
</li>
📌 Todo lo resaltado en VERDE es editable igual que el código anterior.
See the Pen
Menu Desplegable con click by Karen Peña (@karen-pe-a)
on CodePen.
▸Una ves tengamos hecho esta sección pasamos a el CSS que será el mismo que el anterior, solo que se a remplazado el ul.acorh li:hover ul por ul.acorh li:target ulAhora, solo queda guardar y pegar.Espero este tutorial te haya gustado, recuerda que si tienes preguntas o dudas puedes dejarme lo en los comentarios◈ ━━━━━━━ •◦⚜◦• ━━━━━━ ◈