Deseo crear una barra lateral contraíble que el usuario puede alternar. Después de mucho jugar, me lo han conseguido, pero ahora, es muy feo. Aquí está el código:

<div class="container-fluid">
  <div class="row">
    <nav class="col-md-3 collapse show" id="sidebar">
      <h2>I'm a sidebar</h2>      
    </nav>
    <main class="col-md-9">
      <i class="fa fa-times" data-toggle="collapse" data-target="#sidebar" aria-hidden="true" aria-expanded="false" aria-controls="sidebar"></i>
      <h2>I'm the main content</h2>
    </main>
  </div>
</div>

El problema con esto es, la caída es vertical y, a continuación, una vez colapso, el contenido no vaya ancho completo!

  • Usted puede utilizar Iónica-marco. Se ha de navegación y muchos otros componentes incorporados.
InformationsquelleAutor J86 | 2017-10-04

1 Comentario

  1. 4

    Hay una manera sencilla, no es necesario el uso de jQuery. Mira este ejemplo:

    <div class="container-fluid">
      <div class="row">
        <nav class="col-md-3 collapse show" id="sidebar">
          <h2>I'm a sidebar</h2>      
        </nav>
        <main class="col-md-9">
          <i class="fa fa-times" data-toggle="collapse" data-target="sidebar" aria-hidden="true" aria-expanded="false" aria-controls="sidebar" onclick="document.getElementById(this.getAttribute('data-target')).style.display = 'none';"></i>
          <h2>I'm the main content</h2>
        </main>
      </div>
    </div>

    He cambiado data-target y añadido un muy simple onclick.

    EDICIÓN:

    Nuevas mejoras:

    <div class="container-fluid">
      <div class="row d-flex">
        <nav class="col-md-3 collapse show width" id="sidebar">
          <h2>I'm a sidebar</h2>      
        </nav>
        <main class="col-md-9">
          <i class="fa fa-times" data-toggle="collapse" data-target="#sidebar" aria-hidden="true" aria-expanded="false" aria-controls="sidebar" onclick="var that = this; setTimeout(function() {console.log(that.parentNode);that.parentNode.style.flex = 'auto';that.parentNode.style['max-width'] = 'none';}, 2000);"></i>
          <h2>I'm the main content</h2>
        </main>
      </div>
    </div>
    • Gracias @Lajos, consulte actualizar P. he conseguido que funcione, pero no de la buena manera
    • usted puede tomar un vistazo a mis editado respuesta.

Dejar respuesta

Please enter your comment!
Please enter your name here