1. ホーム
  2. 質問と答え
  3. ポジションのみを使用して隠された右サイドバー

ポジションのみを使用して隠された右サイドバー

2016-03-21 3 views
1

こんにちは私は2つのサイドバーを作成しました。 1つの左側のサイドバーは、要素を画面から外して、左の属性に対して負の値を与えることによって隠されています。 一方、右側のメニューは正しく消えず、横にスクロールしてこのメ​​ニューを見ることができます。 display：noneまたはvisibility：hiddenを使用せずに右側のサイドバーを非表示にするにはどうすればいいですか？ 私はコードを追加しています。ポジションのみを使用して隠された右サイドバー

$(function() { 
 
     $("#arrow_btn").click(function() { 
 
      $("#navbar, .upper_menu").toggleClass('active'); 
 
      $("#upper_left_menu").toggleClass('open_left_menu'); 
 
      console.log("look for arrow btn element"); 
 
      console.log("upper_left_menu", $("#upper_left_menu")); 
 
      console.log('$("#navbar")', $("#navbar")); 
 
     }); 
 

 
     $(".project_item").click(function (event) { 
 
      var list = $(this).siblings(); 
 
      var i = $(this).find('i'); 
 
      $(list).toggleClass('closed_nested_list'); 
 
      if ($(i).hasClass('fa-plus')) { 
 
       $(i).removeClass('fa-plus'); 
 
       $(i).addClass('fa-minus'); 
 
      } else { 
 
       $(i).addClass('fa-plus'); 
 
       $(i).removeClass('fa-minus'); 
 
      } 
 
      console.log('traverse over all project items'); 
 
      console.log('i', i); 
 
      console.log('list', list); 
 
     }); 
 
     
 
     $("#email").click(function(){ 
 
      console.log("you clicked email ya ya "); 
 
      $("#right-navbar").css("display",'inline-block'); 
 
      $("#right-navbar, .upper_menu").toggleClass('active'); 
 
      $("#upper_right_menu").toggleClass('open_right_menu'); 
 
     }); 
 
     
 
    $(".list_item").click(function(){ 
 
     console.log('you clicked list item'); 
 
     $("#chatWrapper").toggleClass('active'); 
 
$("#right-navbar").toggleClass('aside'); 
 
     $("#upper_right_menu").toggleClass('aside_right_menu'); 
 
    }); 
 
     
 
    });
#arrow_btn{ 
 
     font-size: 30px; 
 
     font-weight:normal; 
 
    } 
 

 
    #arrow_btn:hover{ 
 
     color: #3983C4; 
 
    } 
 

 
    .upper_menu {  
 
     display: block; 
 
     background-color: #F2F6F7; 
 
     width: 100%; 
 
     top: 0; 
 
     right: 0; 
 
    } 
 
    #upper_left_menu { 
 
     width: 30px; 
 
     height: 30px; 
 
     z-index: 1; 
 
     -webkit-transition: all 600ms ease; 
 
     -moz-transition: all 600ms ease; 
 
     -ms-transition: all 600ms ease; 
 
     -o-transition: all 600ms ease; 
 
     transition: all 600ms ease; 
 
    } 
 

 
#upper_right_menu{ 
 
     z-index: 1; 
 
     -webkit-transition: all 600ms ease; 
 
     -moz-transition: all 600ms ease; 
 
     -ms-transition: all 600ms ease; 
 
     -o-transition: all 600ms ease; 
 
     transition: all 600ms ease; 
 
} 
 

 
    .open_left_menu { 
 
     margin-left: 223px; 
 
     
 
    } 
 

 
.open_right_menu { 
 
     margin-right: 223px; 
 
    -webkit-transition: all 600ms ease; 
 
     -moz-transition: all 600ms ease; 
 
     -ms-transition: all 600ms ease; 
 
     -o-transition: all 600ms ease; 
 
     transition: all 600ms ease; 
 
    } 
 
.aside_right_menu{ 
 
    margin-right: 43.5%; 
 
} 
 
    #upper_right_menu { 
 
     position: absolute; 
 
     top: 0px; 
 
     right: 0px; 
 
    } 
 

 
    #exclamation-triangle, 
 
    #envelope { 
 
     font-size: 24px; 
 
    } 
 

 
    .warning, 
 
    .email { 
 
     margin: 10px; 
 
    } 
 
    
 
#navbar { 
 
     position: absolute; 
 
     left: -16em; 
 
     top: 0; 
 
     bottom: 0; 
 
     background-color: white; 
 
     box-shadow: 4px 0 5px rgba(0, 0, 0, 0.2); 
 
     z-index: 1; 
 
     cursor: pointer; 
 
     animation: 10s; 
 
     overflow-y: auto; 
 
     overflow-x: hidden; 
 
    } 
 

 
    #navbar ul { 
 
     width: 224px; 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 1em; 
 
    } 
 

 
#right-navbar{ 
 
    
 
    position: absolute; 
 
     right: -16em; 
 
     top: 0; 
 
     bottom: 0; 
 
     background-color: white; 
 
     box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); 
 
     z-index: 1; 
 
     cursor: pointer; 
 
     animation: 10s; 
 
     overflow-y: auto; 
 
     overflow-x: hidden; 
 
} 
 

 
#chatWrapper{ 
 
    display:none; 
 
    position: absolute; 
 
     right: -32em; 
 
     top: 0; 
 
     bottom: 0; 
 
     width:338.667px; 
 
     background-color: white; 
 
     box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); 
 
     z-index: 1; 
 
     cursor: pointer; 
 
     animation: 10s; 
 
     overflow-y: auto; 
 
     overflow-x: hidden; 
 
} 
 

 
#right-navbar ul { 
 
     width: 224px; 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 1em; 
 
    } 
 
/* hovering */ 
 
    #chatWrapper, 
 
    #chatWrapper * 
 
    #right-navbar, 
 
    #right-navbar *, 
 
    #navbar, 
 
    #navbar * { 
 
     -webkit-transition: all 600ms ease; 
 
     -moz-transition: all 600ms ease; 
 
     -ms-transition: all 600ms ease; 
 
     -o-transition: all 600ms ease; 
 
     transition: all 600ms ease; 
 
    } 
 

 
    #navbar.active { 
 
     left: 0px; 
 
    } 
 

 
    #right-navbar.active{ 
 
     right: 0px; 
 
    -webkit-transition: all 600ms ease; 
 
     -moz-transition: all 600ms ease; 
 
     -ms-transition: all 600ms ease; 
 
     -o-transition: all 600ms ease; 
 
     transition: all 600ms ease; 
 
    } 
 
#right-navbar.aside{ 
 
     right: 26.5%; 
 
    } 
 
#chatWrapper.active{ 
 
    right:0%; 
 
} 
 

 
    .nested_list { 
 
     display: inline-block; 
 
     visibility: visible; 
 
    } 
 

 
    .closed_nested_list { 
 
     display: none; 
 
    } 
 

 
    .project_item { 
 
     font-family: 'Segue UI', Calibri, arial, verdana, sans-serif; 
 
     font-size: 18px; 
 
    }
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<nav class="upper_menu"> 
 
    <div id="upper_left_menu"> 
 
     <span id="arrow_btn" class="glyphicon glyphicon-play-circle"></span> 
 
    </div> 
 
    <div id="upper_right_menu"> 
 
     <a href="#" class="warning"><i id="exclamation-triangle" class=" fa fa-exclamation-triangle"></i><span id="exclamation_notifications_count">2</span></a> 
 
     <a href="#" id="email" class="email"><i id="envelope" class=" fa fa-envelope-o"></i><span id="email_notifications_count">5</span></a> 
 
    </div> 
 
</nav> 
 
<nav id="navbar"> 
 
    <ul> 
 
     <li class="project_container"> 
 
      <span class="project_item" > 
 
       <i class="fa fa-plus"></i> 
 
       FDR Project 
 
      </span> 
 
      <ul id="listOne" class="nested_list closed_nested_list"> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit01</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit02</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit03</li> 
 
      </ul> 
 
     </li> 
 
     <li class="project_container"> 
 
      <span class="project_item" href="#"><i class="fa fa-plus"></i> Niagara Project</span> 
 
      <ul id="listTwo" class="nested_list closed_nested_list"> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit01</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit02</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit03</li> 
 
      </ul> 
 
     </li> 
 
     <li class="project_container"> 
 
      <span class="project_item" href="#"><i class="fa fa-plus"></i> Jarvis Plant</span> 
 
      <ul id="listThree" class="nested_list closed_nested_list"> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit01</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit02</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit03</li> 
 
      </ul> 
 
     </li> 
 
     <li class="project_container"> 
 
      <span class="project_item" href="#"><i class="fa fa-plus"></i> Jarvis Plant</span> 
 
      <ul id="listFour" class="nested_list closed_nested_list"> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit01</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit02</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit03</li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</nav> 
 

 
<nav id="right-navbar"> 
 
    <ul> 
 
     <li class="project_container"> 
 
      <span class="project_item" > 
 
       <i class="fa fa-plus"></i> 
 
       FDR Project 
 
      </span> 
 
      <ul id="listOne" class="nested_list closed_nested_list"> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit01</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit02</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit03</li> 
 
      </ul> 
 
     </li> 
 
     <li class="project_container"> 
 
      <span class="project_item" href="#"><i class="fa fa-plus"></i> Niagara Project</span> 
 
      <ul id="listTwo" class="nested_list closed_nested_list"> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit01</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit02</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit03</li> 
 
      </ul> 
 
     </li> 
 
     <li class="project_container"> 
 
      <span class="project_item" href="#"><i class="fa fa-plus"></i> Jarvis Plant</span> 
 
      <ul id="listThree" class="nested_list closed_nested_list"> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit01</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit02</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit03</li> 
 
      </ul> 
 
     </li> 
 
     <li class="project_container"> 
 
      <span class="project_item" href="#"><i class="fa fa-plus"></i> Jarvis Plant</span> 
 
      <ul id="listFour" class="nested_list closed_nested_list"> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit01</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit02</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit03</li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</nav> 
 

 
<nav id="chatWrapper"> 
 
    Hello Chat Warpper 
 
</nav>

左側のメニューのない元のコードの小片とコメントから答えを移動するだけで右のメニュー

$(function() { 
 
     
 
     $("#email").click(function(){ 
 
      console.log("you clicked email ya ya "); 
 
      $("#right-navbar").css("display",'inline-block'); 
 
      $("#right-navbar, .upper_menu").toggleClass('active'); 
 
      $("#upper_right_menu").toggleClass('open_right_menu'); 
 
     }); 
 
     
 
    $(".list_item").click(function(){ 
 
     console.log('you clicked list item'); 
 
     $("#chatWrapper").toggleClass('active'); 
 
$("#right-navbar").toggleClass('aside'); 
 
     $("#upper_right_menu").toggleClass('aside_right_menu'); 
 
    }); 
 
     
 
    });
#arrow_btn{ 
 
     font-size: 30px; 
 
     font-weight:normal; 
 
    } 
 

 
    #arrow_btn:hover{ 
 
     color: #3983C4; 
 
    } 
 

 
    .upper_menu {  
 
     display: block; 
 
     background-color: #F2F6F7; 
 
     width: 100%; 
 
     top: 0; 
 
     right: 0; 
 
    } 
 

 
#upper_right_menu{ 
 
     z-index: 1; 
 
     -webkit-transition: all 600ms ease; 
 
     -moz-transition: all 600ms ease; 
 
     -ms-transition: all 600ms ease; 
 
     -o-transition: all 600ms ease; 
 
     transition: all 600ms ease; 
 
} 
 

 
    .open_left_menu { 
 
     margin-left: 223px; 
 
     
 
    } 
 

 
.open_right_menu { 
 
     margin-right: 223px; 
 
    -webkit-transition: all 600ms ease; 
 
     -moz-transition: all 600ms ease; 
 
     -ms-transition: all 600ms ease; 
 
     -o-transition: all 600ms ease; 
 
     transition: all 600ms ease; 
 
    } 
 
.aside_right_menu{ 
 
    margin-right: 43.5%; 
 
} 
 
    #upper_right_menu { 
 
     position: absolute; 
 
     top: 0px; 
 
     right: 0px; 
 
    } 
 

 
    #exclamation-triangle, 
 
    #envelope { 
 
     font-size: 24px; 
 
    } 
 

 
    .warning, 
 
    .email { 
 
     margin: 10px; 
 
    } 
 
    
 
#right-navbar{ 
 
    
 
    position: absolute; 
 
     right: -16em; 
 
     top: 0; 
 
     bottom: 0; 
 
     background-color: white; 
 
     box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); 
 
     z-index: 1; 
 
     cursor: pointer; 
 
     animation: 10s; 
 
     overflow-y: auto; 
 
     overflow-x: hidden; 
 
} 
 

 
#chatWrapper{ 
 
    display:none; 
 
    position: absolute; 
 
     right: -32em; 
 
     top: 0; 
 
     bottom: 0; 
 
     width:338.667px; 
 
     background-color: white; 
 
     box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2); 
 
     z-index: 1; 
 
     cursor: pointer; 
 
     animation: 10s; 
 
     overflow-y: auto; 
 
     overflow-x: hidden; 
 
} 
 

 
#right-navbar ul { 
 
     width: 224px; 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 1em; 
 
    } 
 
/* hovering */ 
 
    #chatWrapper, 
 
    #chatWrapper * 
 
    #right-navbar, 
 
    #right-navbar * { 
 
     -webkit-transition: all 600ms ease; 
 
     -moz-transition: all 600ms ease; 
 
     -ms-transition: all 600ms ease; 
 
     -o-transition: all 600ms ease; 
 
     transition: all 600ms ease; 
 
    } 
 

 
    #navbar.active { 
 
     left: 0px; 
 
    } 
 

 
    #right-navbar.active{ 
 
     right: 0px; 
 
    -webkit-transition: all 600ms ease; 
 
     -moz-transition: all 600ms ease; 
 
     -ms-transition: all 600ms ease; 
 
     -o-transition: all 600ms ease; 
 
     transition: all 600ms ease; 
 
    } 
 
#right-navbar.aside{ 
 
     right: 26.5%; 
 
    } 
 
#chatWrapper.active{ 
 
    right:0%; 
 
} 
 

 
    .nested_list { 
 
     display: inline-block; 
 
     visibility: visible; 
 
    } 
 

 
    .closed_nested_list { 
 
     display: none; 
 
    } 
 

 
    .project_item { 
 
     font-family: 'Segue UI', Calibri, arial, verdana, sans-serif; 
 
     font-size: 18px; 
 
    }
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="upper_menu"> 
 
    <div id="upper_left_menu"> 
 
     <span id="arrow_btn" class="glyphicon glyphicon-play-circle"></span> 
 
    </div> 
 
    <div id="upper_right_menu"> 
 
     <a href="#" class="warning"><i id="exclamation-triangle" class=" fa fa-exclamation-triangle"></i><span id="exclamation_notifications_count">2</span></a> 
 
     <a href="#" id="email" class="email"><i id="envelope" class=" fa fa-envelope-o"></i><span id="email_notifications_count">5</span></a> 
 
    </div> 
 
</nav> 
 
<nav id="right-navbar"> 
 
    <ul> 
 
     <li class="project_container"> 
 
      <span class="project_item" > 
 
       <i class="fa fa-plus"></i> 
 
       FDR Project 
 
      </span> 
 
      <ul id="listOne" class="nested_list closed_nested_list"> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit01</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit02</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit03</li> 
 
      </ul> 
 
     </li> 
 
     <li class="project_container"> 
 
      <span class="project_item" href="#"><i class="fa fa-plus"></i> Niagara Project</span> 
 
      <ul id="listTwo" class="nested_list closed_nested_list"> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit01</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit02</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit03</li> 
 
      </ul> 
 
     </li> 
 
     <li class="project_container"> 
 
      <span class="project_item" href="#"><i class="fa fa-plus"></i> Jarvis Plant</span> 
 
      <ul id="listThree" class="nested_list closed_nested_list"> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit01</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit02</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit03</li> 
 
      </ul> 
 
     </li> 
 
     <li class="project_container"> 
 
      <span class="project_item" href="#"><i class="fa fa-plus"></i> Jarvis Plant</span> 
 
      <ul id="listFour" class="nested_list closed_nested_list"> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit01</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit02</li> 
 
       <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />  Unit03</li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</nav> 
 
<nav id="chatWrapper"> 
 
    Hello Chat Warpper 
 
</nav>

出典

2016-03-21 Brk

+0

余分なコンテンツをすべて除外しないで、関連するコード（または小さな、別個の例）を投稿することはできますか？ –

+0

これは最小のコードです。公開することができます。右側のサイドバーメニューが正しく動作しないうちに、左側のサイドバーメニューがどのように機能するのかを実証したい。 – Brk

+0

しかし、私はそれを小さな例に渡そうとします – Brk

答えて

1

...

overflow-x: hidden;をナビゲーションバーの親要素に追加します（この例では、親はbodyになります）。

これは、ナビゲーションバーが画面の右側から移動したときに水平スクロールバーが表示されないようにします。

出典

2016-03-21 16:15:02

関連する問題

 関連する問題