左のナビゲーションを非表示にしますか？

Question

私は画面の左側にあるメニューを操作し、メインのコンテンツ領域にあるボタンを使ってメニューを表示/非表示にします。

画面の幅が768px未満の場合は、cssを使用してメニューを非表示にすると、メニューが隠れようとしているため、もう一度メニューを開きます。

問題を説明しようとしている多くの問題を抱えているIm ここには私が持っているもののすべてのコードを使ったライブデモがあります。

コードはデスクトップで正常に動作しますが、問題は画面が768pxより小さい場合です。

これは、表示/メニューを隠し、コンテンツ

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

CSS

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

完全なコードライブデモに移動するために使用して、関数THAMです：https://jsfiddle.net/c7cpLq9m/

Answer 1

ちょうどにこれを追加しますメディアクエリ：

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

更新：それは非常に厄介になりますので、あなたがコンテンツをプッシュしない場合は、携帯で

が優れています。コンテンツ上にメニューを表示し、メニュー内にボタンを追加して閉じることをお勧めします。このためにメニュー内に余分な要素を追加し、クラスmobile-triggerを追加しました。デスクトップにはデフォルトで隠していましたが、display: block;を使用してモバイル上に表示しました。また、セレクタmobile-triggerがclickイベントに追加されました。 lonutの答えで

Answer 2

は、より良い、このスタイルを追加：

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

は、ページのトグルメニューボタン、右上を持参します。