Responsive side menu with button

Question

Responsive side menu with button

Navigation

#1 by (1 votes)
#2 by (1 votes)

3

I have a side menu:

Iwouldliketoputabuttontohideandshowthismenu,andthatwhenIdecreasetheresolutionappearsthisbuttonsothatIcandisplayit.

HTML:

<divid="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'm using: link

html angularjs css twitter-bootstrap

asked by anonymous 02.10.2015 / 19:24

2 answers

1

Here's where you need to adopt the "hamburger" menu trend or something like that. You leave it by default hidden, 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 does today. So that would be simple:

No 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 there means that the condition for this button / menu icon to appear, the screen must have at most 767px width. Why 767px ? This value was chosen because we know (see the CSS of the template) that from 768px the template already shows the sidebar (and the menu, therefore) by default.

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

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

And a working sample: link

02.10.2015 / 20:31

Doubt with Routes and Controllers Laravel 4 Methods in Entity in DDD architecture

score 1 · Accepted Answer

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

And a jQuery function to activate the class. Creates a button with the close-menu class outside the MENU, obviously, otherwise it hides together. Put 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 in the MAIN. I do not know if you have <main> on your site. But if you do not, this class has to be applied to the div that surrounds your site. Not the body .