Zeige ausblenden Navigation links?

Question

Ich arbeite an einem Menü, das auf der linken Seite des Bildschirms befindet, und mit einer Schaltfläche, die auf der Hauptinhaltsbereich befindet ich versteckt/zeigen Sie das Menü.

Wenn die Bildschirmbreite weniger als 768px ist, verberge ich das Menü mit CSS, das Problem ist, dass, weil das Menü bereits ausgeblendet ist, wenn der Benutzer auf die Schaltfläche klickt, anstatt das Menü zu zeigen, das es zu verbergen versucht das Menü noch einmal.

Ich habe eine Menge Probleme, das Problem zu erklären, Hier ist die Live-Demo, mit all dem Code von dem, was ich habe.

Der Code funktioniert gut für den Desktop, das Problem ist, wenn der Bildschirm weniger als 768px ist.

Dies ist die Funktion tham über das Menü ein-/auszublenden und den Inhalt

$('#menu-toggle').click(function(e) 
    { 
    e.preventDefault(); 
    $('#sidebar').toggleClass('show-hide'); 
    $('#page-content').toggleClass('show-hide'); 
    }); 

CSS

.show-hide 
{ 
    margin-left: -250px; 
} 

Full-Code-Live-Demo zu bewegen: https://jsfiddle.net/c7cpLq9m/

Answer 1

Just added dies zu die Medienabfrage:

#wrapper .show-hide { 
    margin-left: 0; 
} 

$('#menu-toggle, .mobile-trigger').click(function(e) { 
 
    e.preventDefault(); 
 
    $('#sidebar').toggleClass('show-hide'); 
 
    $('#page-content').toggleClass('show-hide'); 
 
});

.container-fluid {} 
 

 
#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; 
 
} 
 
.mobile-trigger{ 
 
    display: none; 
 
} 
 
#sidebar { 
 
    z-index: 1000; 
 
    position: fixed; 
 
    height: 100%; 
 
    width: 250px; 
 
    overflow-y: auto; 
 
    background: #1b1e24; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 

 
.show-hide { 
 
    margin-left: -250px; 
 
} 
 

 
ul.sidebar-nav { 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 

 
ul.sidebar-nav li a { 
 
    display: block; 
 
    padding: 10px 25px; 
 
    color: #8b91a0; 
 
    text-decoration: none; 
 
    transition: all 0.3s ease; 
 
    font-size: 1.1em; 
 
} 
 

 
ul.sidebar-nav li span { 
 
    padding-right: 10px; 
 
} 
 

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

 
#page-content { 
 
    transition: 0.5s; 
 
    /* \t position: absolute;  */ 
 
    padding-left: 255px; 
 
    /* \t width:100%; \t \t \t 
 
\t background: grey;*/ 
 
} 
 

 
@media (max-width: 768px) { 
 
    #sidebar { 
 
    margin-left: -250px; 
 
    } 
 
    #wrapper .show-hide{ 
 
    margin-left: 0; 
 
    } 
 
    .mobile-trigger{ 
 
    display: block; 
 
    } 
 
    #page-content { 
 
    padding-left: 0px; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div id="wrapper"> 
 

 
    <div id="sidebar"> 
 
    <ul class="sidebar-nav"> 
 
    <li><a class='mobile-trigger' href="#"><span class="glyphicon glyphicon-menu-hamburger"></span> Hide mobile menu</a></li> 
 
     <li class="sidebar-brand"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li> 
 
     <li><a href="#"><span class="glyphicon glyphicon-user"></span> Contacts</a></li> 
 
     <li><a href="#"><span class="glyphicon glyphicon-picture"></span> Content</a></li> 
 
     <li><a href="#"><span class="glyphicon glyphicon-inbox"></span> Inbound</a></li> 
 
     <li><a href="#"><span class="glyphicon glyphicon-envelope"></span> Outbound</a></li> 
 
     <li><a href="#"><span class="glyphicon glyphicon-globe"></span> Social</a></li> 
 
     <li><a href="#"><span class="glyphicon glyphicon-folder-close"></span> Automation</a></li> 
 
     <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> Reports</a></li> 
 
     <li><a href="#"><span class="glyphicon glyphicon-cog"></span> Settings</a></li> 
 
     <li><a href="#"><span class="glyphicon glyphicon-comment"></span> Feedback</a></li> 
 
    </ul> 
 
    </div> 
 
    <div id="page-content"> 
 
    <div class="container-fluid"> 
 
     <div class="row"> 
 
     <div class="col-lg-6"> 
 
      <h1>Duis aute</h1> 
 
      <hr> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
 
      irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
      <a href="#" class="btn btn-default" id="menu-toggle" style="float:rigth">Toggle Menu</a> 
 
      <h1>Duis aute</h1> 
 
      <hr> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
 
      irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
      <h1>Excepteur</h1> 
 
      <hr> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
 
      irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
      <h1>Excepteur</h1> 
 
      <hr> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
 
      irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
      <h1>Excepteur</h1> 
 
      <hr> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
 
      irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
      <h1>Excepteur</h1> 
 
      <hr> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
 
      irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
     </div> 
 
     <div class="col-lg-6"> 
 
      <h1>Excepteur</h1> 
 
      <hr> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
 
      irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
      <h1>Excepteur</h1> 
 
      <hr> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
 
      irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
      <h1>Excepteur</h1> 
 
      <hr> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
 
      irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
      <h1>Excepteur</h1> 
 
      <hr> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
 
      irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
      <h1>Excepteur</h1> 
 
      <hr> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
 
      irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
      <h1>Excepteur</h1> 
 
      <hr> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
 
      irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</div> 
 
<!-- ./wrapper -->

aktualisieren:

Auf Handy ist besser, wenn Sie den Inhalt nicht schieben, weil es sehr unordentlich aussehen wird. Es ist besser, das Menü über den Inhalt zu stellen und eine Schaltfläche im Menü hinzuzufügen, um es zu schließen. Dazu habe ich ein zusätzliches Element im Menü hinzugefügt, die Klasse mobile-trigger hinzugefügt, ich habe es standardmäßig auf dem Desktop ausgeblendet und es unter display: block; auf dem Handy angezeigt. Außerdem wurde der Selektor mobile-trigger zum click-Ereignis hinzugefügt.

Answer 2

In lonut Antwort ist es besser Addiert man diese Stile:

#menu-toggle { 
    position: absolute; 
    top: 0; 
    right: 10px; 
} 

die Toggle-Menü-Taste oben rechts auf Seite zu bringen.