Tengo un layout:

Bootstrap - Toggle de la barra lateral con los iconos

Me gustaría que cuando uno hace clic en el botón de color naranja, la barra lateral se contrae y deja sólo los iconos visibles. Y para el móvil totalmente deberían reducir y cuando uno hace clic en el botón sólo los iconos deben ser visibles. El comportamiento debe ser como este pero no entiendo cómo hacer que funcione.

Por ahora tengo mi cabecera:

<div class="navbar-header">
  <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#menu-toggle" onclick="toggle()"><i class="fa fa-bars"></i></a>
  <a class="navbar-brand" href="#">...</a>
</div>

Pero no sé cómo hacer que colapse cuando se hace un click.. Gracias

  • Podría usted por favor enviar todo el código en la barra de navegación.
  • Asegúrese de llamar con el nombre exacto de la clase de en el botón que activa el interruptor de función en jquery o javascript. También revise sus jquery enlaces si utiliza los vínculos exactos. De lo contrario no funcionará.
  • Han vistazo a este plugin: jasny.net/bootstrap/components/#navmenu-offcanvas
InformationsquelleAutor ayasha | 2016-03-21

2 Comentarios

  1. 5

    En un camino áspero puede asignar 2 clases (uno para el icono, uno para el texto relativos) por ejemplo, la clase «icono» y clase «texto», y haga clic en el botón, activar y desactivar (ocultar /mostrar) el elemento con la clase de «texto». A continuación, en una devolución de llamada que podría animar el cambio de tamaño de la barra lateral.

    Edit2: Mejora de ejemplo

    JS:

    $('#togglebutton').click(function() {
        if ($(window).width() > 500) { //your chosen mobile res
          $('.text').toggle(300);
        } else {
          $('.menu').animate({
            width: 'toggle'
          }, 350);
        }
    });

    CSS:

    ​.wrapper { width: 100% }
    .menu {
          background: #222;
          float: left;
          display: block;
    }
    
    .icon { max-width: 1em }
    
    .menu ul {
          list-style-type: none;
          margin: 0;
          padding: 0.2em 0.5em;
    }
    
    .menu li { margin: 0 }
    
    .menu a, .menu a:visited {
          color: white;
          text-decoration: none;
    }
    
    .text {
          display: inline;
          margin: 0;
    }
    
    .content { display: block; }
    
    button { margin: 1em; }
    
    @media only screen and (max-width: 500px) {
      .text {
          display: none;
      }
    }

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="wrapper">
      <div class="menu">
        <ul>
          <li>
            <a href="#">
              <img class="icon" src="http://bit.do/iconUrl">
              <p class="text">Text 1</p>
            </a>
          </li>
          <li>
            <a href="#">
              <img class="icon" src="http://bit.do/iconUrl">
              <p class="text">Text 2</p>
            </a>
          </li>
        </ul>
      </div>
      <div class="content">
        <button id="togglebutton">&#9776;</button>
      </div>
    </div>

    Esperanza era útil para tener una idea general de mi sugerencia.

    • Eso es más claro ahora… pero cómo reproducir el comportamiento de la OP ha descrito en su enlace del post?
    • Te refieres a la «…para el móvil totalmente deberían reducir…«, con consultas de medios css, el .el texto de la clase debe estar oculto bajo una determinada resolución de ancho
    • Quiero decir : en el fragmento de código, cómo crear un ejemplo como este: webapplayers.com/inspinia_admin-v2.5/widgets.html#
    • Mi fragmento de código es un ejemplo general. Soy un novato en stackoverflow lo que podría haber entendido mal, en este sitio que ofrece una respuesta debe implementar un trabajo por encargo? Lo siento, si he producido una respuesta que no encaja en el sitio a los efectos de que puedo eliminarlo.
    • No la borre… mejorar en su lugar.
  2. 6

    Puede crear un «lienzo» de la barra lateral y, a continuación, utilizar Bootstrap responde clases de utilidad para alternar la visualización de los iconos.

    <div class="wrapper">
            <div class="row row-offcanvas row-offcanvas-left">
                <!-- sidebar -->
                <div class="column col-sm-3 col-xs-1 sidebar-offcanvas" id="sidebar">
                    <ul class="nav" id="menu">
                        <li><a href="#"><i class="glyphicon glyphicon-list-alt"></i> <span class="collapse in hidden-xs">Link 1</span></a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-list"></i> <span class="collapse in hidden-xs">Stories</span></a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-paperclip"></i> <span class="collapse in hidden-xs">Saved</span></a></li>
                        <li><a href="#"><i class="glyphicon glyphicon-refresh"></i> <span class="collapse in hidden-xs">Refresh</span></a></li>
                    </ul>
                </div>
    
                <!-- main right col -->
                <div class="column col-sm-9 col-xs-11" id="main">
                    <a href="#" data-toggle="offcanvas" class="btn btn-default"><i class="fa fa-navicon"></i></a>
                    <p>
                        content...
                    </p>
                </div>
            </div>
    </div>

    http://www.codeply.com/go/ecE6qHNBOC

Dejar respuesta

Please enter your comment!
Please enter your name here