
Puko
Dseda
Verificación en dos pasos activada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
¿porque el buscador esta a un lado de id uno y no dentro de id 2?Aquí un ejemplo de cómo quedaría el HTML y CSS para tu requisito. Necesitarías adicionar JavaScript para controlar la animación.
Insertar CODE, HTML o PHP:<!DOCTYPE html> <html> <head> <style> #uno { width: 70px; height: 100vh; background-color: #eee; position: relative; } #two { width: 0; height: 100vh; background-color: #ccc; position: absolute; top: 0; left: 70px; transition: width 2s; } #icon { width: 50px; height: 50px; background-image: url('icono.png'); /* Cambia por tu icono */ cursor: pointer; } </style> <script> function expandDiv() { let twoDiv = document.getElementById("two"); if (twoDiv.style.width === "0px") { twoDiv.style.width = "400px"; } else { twoDiv.style.width = "0px"; } } </script> </head> <body> <div id="uno"> <div id="icon" onclick="expandDiv()"></div> <div id="two"> <input type="text" id="buscador" name="buscador"> </div> </div> </body> </html>
Por favor ten en cuenta que esto solo es un punto de partida y podrías necesitar ajustarlo según tus necesidades. El icono debe ser reemplazado con tu propia imagen.