0
180
VistasMenú desplegable de navegación horizontal en Bootstrap 5 / CSS
He estado tratando de crear un menú desplegable horizontal para pantalla pequeña, pero todos los hilos que he leído están desactualizados y no funcionan.
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Aquí tienes. esto funcionará si no hay otra clase custom en su proyecto.
:root { --primColor: #dcdcdc; --secoColor: #555555; --cornerRad: 4px; } body { background-color: var(--primColor); font-family: Arial, Helvetica, sans-serif; font-size: 20px; } .custom details { margin: 40px; } .custom summary { writing-mode: vertical-lr; text-align: center; padding: 12px 10px; width: 23px; height: 17px; background-color: var(--primColor); border: 2px solid var(--secoColor); border-radius: var(--cornerRad); color: var(--secoColor); cursor: pointer; user-select: none; outline: none; transition: transform 200ms ease-in-out 0s; position: relative; left: 95%; } .custom summary::before, .custom summary::after { position: static; top: 0; left: 0; } .custom summary::before { content: ""; } .custom summary::after { content: "III"; letter-spacing: -1px; } .custom summary:hover { transform: scale(1.1); } .custom summary::marker { font-size: 0; } .custom summary::-webkit-details-marker { display: none; } .custom details[open] .menu { animation-name: menuAnim; } .custom details[open] summary::before { content: "X"; } .custom details[open] summary::after { content: ""; } .custom .menu { height: 0; width: fit-content; border-radius: var(--cornerRad); background-color: var(--primColor); box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2); margin-top: 8px; display: flex; flex-direction: row; justify-content: space-between; overflow: hidden; animation: closeMenu 300ms ease-in-out forwards; width: 100%; } .custom .menu a { padding: 12px 24px; margin: 0 16px; color: var(--secoColor); text-decoration: none; text-align: center; transition: filter 200ms linear 0s; } .custom .menu a:nth-last-of-type(1) { border-bottom: none; } .custom .menu a:hover { filter: brightness(200%); } .custom details[open]::before { animation: fadeMe 300ms linear forwards; } @keyframes menuAnim { 0% { height: 0; } 100% { height: fit-content; } } @keyframes fadeMe { 0% { opacity: 0.4; } 100% { opacity: 0; } } <div class="custom"> <details > <summary></summary> <nav class="menu"> <a href="#link">Home</a> <a href="#link">Work</a> <a href="#link">Links</a> <a href="#link">Contact</a> <a href="#link">About</a> </nav> </details> </div>
·
Juan Pablo Isaza
Denunciar
0
Sí, supongo que no funcionará, por lo tanto, deberá escribir consultas de medios para dispositivos móviles.
¡Por ejemplo! y luego podría funcionar también en sus dispositivos móviles.
@media only screen and (max-width: 1024px) { body { background-color: lightblue; } }
·
Juan Pablo Isaza
Denunciar
Responde la pregunta