0

El siguiente código es una imagen reducida que al darle clic despliega un formulario del lado izquierdo de la imagen. El problema es que ahora necesito ubicar este sidebar del lado derecho de la pagina (el formulario e imagen están ubicados a la izquierda). Lo he intentado hacer con la propiedad right pero solo me mueve la imagen mientras que el formulario se queda estático en el lado izquierdo por lo que no se podría hacer para ubicarlo del lado derecho del todo.

Ademas también esta el hecho de que el left:-200 por lo que supongo que se tendría que cambiar al contrario para que el formulario ahora se despliegue del lado derecho y no del izquierdo como antes, aunque esto es suposición mía yo lo único que necesito es ubicarlos al lado derecho.

Les agradezco su ayuda, en caso de que el código no sea muy funcional para lo que pido agradecería que me ayudaran o me dieran indicaciones de como hacerlo!

const imgToggle = document.querySelector('.toggle-img');
imgToggle.addEventListener('click', function() {
  document.getElementById('sidebar').classList.toggle('active');

})
* {
  margin: 0px;
  padding: 0px;
}

#sidebar {
  position: fixed;
  width: 200px;
  height: 60%;
  background: white;
  color: rgb(225, 49, 49);
  left: -200px;
  transition: all 500ms linear;
}

#sidebar.active {
  left: 0px;
}

#sidebar section {
  color: rgb(225, 49, 49);
  text-align: center;
  padding: 15px 10px;
  border-bottom: 1px solid rgba(100, 100, 100, .3);
}

#sidebar .toggle-img {
  position: absolute;
  left: 200px;
  top: 20px;
  cursor: pointer;
}

#sidebar .toggle-img span {
  display: block;
  width: 90px;
  text-align: center;
  font-size: 60px;
}
<div id="sidebar">
  <div class="toggle-img">
    <span><img src="img/floating.svg" class="image" alt="imagen"></span>
  </div>
  <section>
    <h4>SOLICITA TU COTIZACION</h4>
    <p>DEJANOS TUS DATOS</p>
    <h4>TE CONTACTAREMOS EN POCO TIEMPO</h4>
    <form action="/my-handling-form-page" method="post">
      <ul>
        <li>
          <label for="nombre">Nombre:</label>
          <input type="text" id="name" name="name" />
        </li>
        <li>
          <label for="email">Correo:</label>
          <input type="email" id="mail" name="mail" />
        </li>
        <li>
          <label for="domicilio">Domicilio</label>
          <input type="text" id="dir" name="dir" />
        </li>
        <li>
          <label for="telefono">Teléfono</label>
          <input type="tel" id="tel" name="tel" />
        </li>
        <li>
          <p> <button type="submit">Enviar</button> </p>
        </li>
      </ul>
    </form>
  </section>
</div>

2
  • Es posible para ti no tener toggle-img adentro sidebar?
    – milmal
    el 19 nov. 2020 a las 13:05
  • Si claro no hay problema,es mi primera vez haciendo esto asi que estoy abierto a sugerencias ajaja. Lo pongo afuera del sidebar,entonces?
    – Robbin
    el 19 nov. 2020 a las 13:14

2 respuestas 2

0

Cuando no tienes toggle-img adentro sidebar puedes usar right para poner el formulario a la derecha.

const imgToggle = document.querySelector('.toggle-img');
imgToggle.addEventListener('click', function() {
  document.getElementById('sidebar').classList.toggle('active');

})
* {
  margin: 0px;
  padding: 0px;
}

#sidebar {
  position: fixed;
  width: 200px;
  height: 60%;
  background: white;
  color: rgb(225, 49, 49);
  right: -210px;
  transition: all 500ms linear;
}

#sidebar.active {
  right: 0px;
}

#sidebar section {
  color: rgb(225, 49, 49);
  text-align: center;
  padding: 15px 10px;
  border-bottom: 1px solid rgba(100, 100, 100, .3);
}

#sidebar .toggle-img {
  position: absolute;
  right: 200px;
  top: 20px;
  cursor: pointer;
}

#sidebar .toggle-img span {
  display: block;
  width: 90px;
  text-align: center;
  font-size: 60px;
}

.navbar {
  position: absolute;
  right: 0px;
  width: 260px;
  height: 100%;
  background-color: white;
  text-align: center;
  transition: 0.800s ease;
}
<div class="toggle-img">
  <span><img src="img/floating.svg" class="image" alt="imagen"></span>
</div>
<div id="sidebar">

  <section>
    <h4>SOLICITA TU COTIZACION</h4>
    <p>DEJANOS TUS DATOS</p>
    <h4>TE CONTACTAREMOS EN POCO TIEMPO</h4>
    <form action="/my-handling-form-page" method="post">
      <ul>
        <li>
          <label for="nombre">Nombre:</label>
          <input type="text" id="name" name="name" />
        </li>
        <li>
          <label for="email">Correo:</label>
          <input type="email" id="mail" name="mail" />
        </li>
        <li>
          <label for="domicilio">Domicilio</label>
          <input type="text" id="dir" name="dir" />
        </li>
        <li>
          <label for="telefono">Teléfono</label>
          <input type="tel" id="tel" name="tel" />
        </li>
        <li>
          <p> <button type="submit">Enviar</button> </p>
        </li>
      </ul>
    </form>
  </section>
</div>

1
  • Muchas gracias efectivamente eso era, no sabes cuanto me has ayudado !
    – Robbin
    el 19 nov. 2020 a las 13:30
0

Si el sidebar lo tenes fixed cuando agregas .active tenes que sacar el left o establecerlo en otro valor para que te tome el right te agregue un porcentaje para el left en este caso para que te quede a la derecha

const imgToggle = document.querySelector('.toggle-img');
imgToggle.addEventListener('click', function() {
  document.getElementById('sidebar').classList.toggle('active');

})
* {
  margin: 0px;
  padding: 0px;
}

 

#sidebar {
  position: fixed;
  width: 200px;
  height: 60%;
  background: white;
  color: rgb(225, 49, 49);
  left: -200px;
 transition: all 1s linear;
}

#sidebar.active {

  left:50%;
 
      

}

#sidebar section {
  color: rgb(225, 49, 49);
  text-align: center;
  padding: 15px 10px;
  border-bottom: 1px solid rgba(100, 100, 100, .3);
}

#sidebar .toggle-img {
  position: absolute;
  left: 200px;
  top: 20px;
  cursor: pointer;
}

#sidebar .toggle-img span {
  display: block;
  width: 90px;
  text-align: center;
  font-size: 60px;
}

.navbar {
  position: absolute;
  right: 0px;
  width: 260px;
  height: 100%;
  background-color: white;
  text-align: center;
  transition: 0.800s ease;
}
<div id="sidebar">
  <div class="toggle-img">
    <span><img src="img/floating.svg" class="image" alt="imagen"></span>
  </div>
  <section>
    <h4>SOLICITA TU COTIZACION</h4>
    <p>DEJANOS TUS DATOS</p>
    <h4>TE CONTACTAREMOS EN POCO TIEMPO</h4>
    <form action="/my-handling-form-page" method="post">
      <ul>
        <li>
          <label for="nombre">Nombre:</label>
          <input type="text" id="name" name="name" />
        </li>
        <li>
          <label for="email">Correo:</label>
          <input type="email" id="mail" name="mail" />
        </li>
        <li>
          <label for="domicilio">Domicilio</label>
          <input type="text" id="dir" name="dir" />
        </li>
        <li>
          <label for="telefono">Teléfono</label>
          <input type="tel" id="tel" name="tel" />
        </li>
        <li>
          <p> <button type="submit">Enviar</button> </p>
        </li>
      </ul>
    </form>
  </section>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.