Responsive side menu with button

Question

I have a side menu:

I would like to put a button to hide and show this menu, and when I turn down the resolution this button appears so I can display it.

HTML:

<div id="wrapper">
   <!-- Sidebar -->
   <div id="sidebar-wrapper">
      <ul class="sidebar-nav">
         <li class="sidebar-brand">
            <img src="upload/users/{{user.usuario.foto}}" class="img-responsive img-arredondadaSide" alt="Responsive image"/>      
         </li>
         </br>
         </br>
         </br>
         <li class="active">
            <a href="#/home"><i class="fa fa-home"></i> Home</a>
         </li>
         <li>
            <a class="dropdown-toggle" data-toggle="collapse" data-target="#configuracoes" role="button" 
               aria-haspopup="true" aria-expanded="false" ng-if="user.usuario.permissao ==1"><i class="fa fa-cog"></i> Configurações <span class="caret">
            </span></a>
            <ul id="configuracoes" class="collapse">
               <li>
                  <a href="#/usuario">Usuários</a>
               </li>
            </ul>
         </li>
      </ul>
   </div>
   <!-- /#sidebar-wrapper -->

CSS:

#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled {
    padding-left: 250px;
}

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    background: #000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
    width: 250px;
}

#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -250px;
}

/* Sidebar Styles */

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #999999;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: 60px;
}

.sidebar-nav > .sidebar-brand a {
    color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
}

@media(min-width:768px) {
    #wrapper {
        padding-left: 250px;
    }

    #wrapper.toggled {
        padding-left: 0;
    }

    #sidebar-wrapper {
        width: 220px;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 0;
    }

    #page-content-wrapper {
        padding: 20px;
        position: relative;
    }

    #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: 0;
    }

Example I am using: http://ironsummitmedia.github.io/startbootstrap-simple-sidebar/

Answer 1

I usually do so. I create a class that hides the MENU, so to speak, the left of the screen using the transformX. Remember to put the -webkit, moz- and o- on that property.

And a jQuery function to activate the class. Create a button with the class close-menu outside the MENU, obviously, if not it hides together. Puts on the left side of ORACLE just for you to test.

CSS

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    background: #000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.close{
    transform: translateX(80%); /* Coloca aqui o tamanho - width do seu menu em PX */
}

jQuery

$('.close-menu').on('mousedown', function(){
    // Aqui é no MAIN
    $('main').toggleClass('close-menu');
});

Media Query Up to 768

@media screen and (min-width: 768px){
    #sidebar-wrapper{
        transform: translateX(-100%);
    }
}

In your case the class .close is on MAIN. I don’t know if you have a <main> on your website. But if not, this class has to be applied to div that involves your site. Not the body.

Answer 2

Here’s what you need to adopt the "hamburger" menu trend (the one with three lines) or something like that. You leave it hidden by default, but when the screen has a certain width you can display it. In your case, you can benefit from "CSS Media Queries" - and that’s exactly how your template currently does. So that would be simple:

In HTML:

<body>
    <div id="wrapper">
        <a id="menu-toggle" href="#menu">
            MENU
        </a>
    ...

on the CSS side:

#menu-toggle {
    display: none; 
}
@media(max-width:767px) {       

    #menu-toggle {
        display: block; 
    }
}

max-width: 767px ali means that the condition for this button/icon menu to appear, the should screen need to have at most 767px wide. Why 767px? This value was chosen because we know (see template CSS) that from 768px the template already shows the sidebar (and the menu, therefore) by default.

On the javascript side we already have a template routine, so you should not change anything (except if you removed this or changed what came with the template):

<script>
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });
</script>

And a working sample: https://jsfiddle.net/krx61hh9/embedded/result/