0
141
Viewsjavascript y CSS3 traducen menú desplegable Y
Tengo un div desplegable que tiene un botón para abrir/ocultar, quiero transform: translateY(-280px); el div para deslizar hacia arriba.
el problema está en diferentes dispositivos, transform: translateY(-280px); ¡es diferente! ¡y en algún momento no sube por completo, y se muestra la mitad de div!
¿Cómo puedo deslizar div completamente hacia arriba en cualquier otro dispositivo?
css:
.slideUp { -webkit-transform: translateY(-280px); transform: translateY(-280px); transition: transform 0.5s ease-out; } .slideDown { -webkit-transform: translateY(0); transform: translateY(0); transition: transform 0.5s ease-out; }JavaScript:
$('#arrow-down').click(function() { header.classList.remove("slideUp"); header.classList.add("slideDown"); $('#arrow-down').css('display', 'none'); $('#arrow-up').css('display', 'block'); }); $('#arrow-up').click(function() { header.classList.remove("slideDown"); header.classList.add("slideUp"); $("#arrow-up").css("display", "none"); $("#arrow-down").css("display", "block"); });
·
Juan Pablo Isaza
1 answers
Answer question0
La siguiente forma de menú desplegable funciona con todos los tamaños de pantalla, puede cambiarlo para que se abra al hacer clic y no al pasar el mouse.
.drop-button { padding: 10px; background-color: #B0E0E6; border: 1px solid #007BFF; border-radius: 0.5em; } .dropdown { position: relative; display: inline-block; } .dropdown .content { padding: 10px; border: 1px solid black; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); display: none; position: absolute; } .dropdown:hover .content { display: block; } <div class="dropdown"> <button class="drop-button">Click Drop</button> <div class="content"> <span>Dropdown Content!</span> </div> </div>
·
Juan Pablo Isaza
Report
Answer question