Question

117

Bootstrap - Toggle sidebar with icons

rated 0 times [ 123] [ 6] / answers: 1 / hits: 39060 / 8 Years ago, mon, march 21, 2016, 12:00:00

I have such a layout:

I would like that when one clicks the orange button, the sidebar shrinks and leaves only the icons visible. And for the mobile should totally shrink and when one clicks the button only the icons should be visible. The behaviour should be like this but I don't understand how to make it work.

For now I have my header:

<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>

But I don't know how to make it collapse when one clicks.. Thanks

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

josuea

Add To Favorites

Follow

Total Points: 609

Total Questions: 121

Total Answers: 104

Location: South Georgia

Member since Fri, Nov 13, 2020

4 Years ago

answered 8 Years ago hallie · Accepted Answer

In a rough way you could assign 2 classes (one for the icon, one for the relative text) for example, class icon and class text, and on button click, toggle (hide and show) the element with the class text. Then in a callback you could animate the resizing of the sidebar.

Edit2: Improved example

$('#togglebutton').click(function() {

    if ($(window).width() > 500) { //your chosen mobile res

      $('.text').toggle(300);

    } else {

      $('.menu').animate({

        width: 'toggle'

      }, 350);

    }

});

.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;

  }

}

<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>

Hope it was useful to have a general idea of my suggestion.