如何通過縮小寬度來隱藏固定位置sidemenu

Question

我在頁面上有一個包含目錄的側面菜單。我希望它是可擴展/可摺疊的。我有這樣的工作，唯一的問題是動畫看起來不正確，因爲當我縮小側邊菜單的寬度時，鏈接的文本也可能會縮小。我試過了幾個版本的溢出並設置了最小寬度和切換。但結果總是要麼是這個尷尬的縮小，要麼是它根本不隱藏它，它只是位於主容器div之外。

這裏是小提琴： http://jsfiddle.net/DR2Y2/15/

你不能真正看到它的行動，除非你做全屏：http://jsfiddle.net/DR2Y2/15/embedded/result/

我覺得有什麼毛病我的CSS，但也許有更好jQuery寫入，以達到預期的效果。我的jquery看起來像這樣：

$("#table-of-contents-link").click(function() { 
     event.preventDefault(); 
     var $rightcolumn = $("#right-column"); 
     var $leftcolumn = $("#left-column"); 
     var $toc = $(".table-of-contents"); 
     if ($rightcolumn.width() == 1) { 

      $rightcolumn.animate({ 
       width: "22%", 
      }, 1500); 
      $leftcolumn.animate({ 
       width: "71%", 
      }, 1500); 
      //$toc.show(); 
     }else { 
      $rightcolumn.animate({ 
       width: "1", 
      }, 1500); 
      $leftcolumn.animate({ 
       width: "95%", 
      }, 1500); 
      //$toc.hide(); 
     } 

}）;

我基本上只是想讓右列的元素收縮到主容器的邊緣。除了尷尬的鏈接文字效果外，它幾乎可行。

編輯我已經更新了我的小提琴，以顯示更多我的意思。我把這個包含在一個設置爲90％寬度的容器中。我想讓右列內容消失在容器的邊緣，而不是屏幕的邊緣。

Answer 1

編輯2使用jQuery動畫：http://jsfiddle.net/Varinder/embLD/7/

編輯 退一步講，你不會需要在width產權過渡，transform將做的工作就好了。

更新撥弄着90％範圍的內容範圍：http://jsfiddle.net/Varinder/embLD/5/

---

你可以利用的轉變，雖然不知道它的一個好主意，在padding和width屬性添加過渡。

我稍微調整了標記來achevie浮動十歲上下的效果。即當邊欄縮小時 - 內容流動以填充剩餘空間。

小提琴http://jsfiddle.net/Varinder/embLD/3/

HTML

<a href="#" id="table-of-contents-link">Toggle TOC</a> 
<div id="main"> 
    <div class="content-wrapper"> 
     <div class="content"> 
      ..content.. 
     </div> 
    </div> 
    <div class="toc-wrapper"> 
     <div class="fixed table-of-contents" style="border-top: 1px solid #577ec5; width: inherit;"> 
      <h3>Lorem Ipsum</h3> 
      <ul style="margin-left: 3px;"> 
       ..content.. 
      </ul> 
     </div> 
    </div> 
</div> 

CSS

#main { 
    overflow:hidden; /*clearfix*/ 
} 

.content-wrapper { 
    float:left; 
    width:100%; 
} 

.content { 
    padding-right:220px; /* width of toc (200px) + gutter (20px) */ 
    transition:padding-right .3s ease; 
} 

.toc-wrapper { 
    float:right; 
    width:200px; 
    margin-left:-200px; 
    overflow:hidden; 
    transition:width .3s ease; 
} 

.toc-wrapper a { 
    display:block; 
    white-space:nowrap; 
    overflow:hidden; 
    text-overflow:ellipsis; 
} 

.hide-toc .content { 
    padding-right:0; 
} 

.hide-toc .toc-wrapper { 
    width:0; 
} 

JS

var $page = $("#main"); 
var $tocLink = $("#table-of-contents-link"); 

$tocLink.on("click", function(e) { 
    e.preventDefault(); 
    $page.toggleClass("hide-toc"); 
}); 

Answer 2

好吧，說實話，我看不到那麼多jQuery的簡單任務。這是我在5分鐘內想出來的。

CODEPEN

<div class="sidebar active"></div> 
<div class="content"> 
    <button id="btn">click me</button> 
</div> 

---

.sidebar{ 
    position:fixed; 
    left:-200px; 
    top:0; 
    width:200px; 
    height:100vh; 
    background-color:red; 
    -webkit-transition:all 0.4s ease-in-out; 
} 
.sidebar.active{ 
    left:0; 
} 
.content{ 
    width:100%; 
    height:100vh; 
    background-color:blue; 
} 

#btn{ 
    margin-left:300px; 
} 

---

$('#btn').on('click',function(){ 
    $('.sidebar').toggleClass('active'); 
}); 

---

EDIT

OP要求在容器內部有側邊欄。這裏是我更新的代碼。

.parent{ 
    width:80%; 
    margin:auto; 
    overflow:hidden; 
} 
.sidebar{ 
    margin-left:-200px; 
    top:0; 
    float:left; 
    width:200px; 
    height:100vh; 
    background-color:red; 
    -webkit-transition:all 0.4s ease-in-out; 
} 
.sidebar.active{ 

    margin-left:0px; 
} 
.content{ 
    width:100%; 
    height:100vh; 
    background-color:blue; 
} 

Answer 3

什麼關於使用圍繞菜單按鈕和菜單本身的包裝，絕對位於主左欄。寬度全部由CSS處理，因爲當CSS已經包含它時，不需要使用額外的jQuery添加頁面加載。

我不得不做出一些調整到HTML得到這個工作。

JSFiddle

<div id="main"> 
    <div class="menu-wrapper"> 
     <div class="toc-button-column"> 
      <a href="#" id="table-of-contents-link">TOC</a> 
    </div> 
    <div id="right-column"> 
     <div class="table-of-contents" style="border-top: 1px solid #577ec5;"> 
      <div style="padding-left: 15px;"> 
       <h3>Lorem Ipsum</h3> 
       <ul style="margin-left: 3px;"> 
        <li><a class="scroll" href="#tabs-1">Section 1</a></li> 
        <li><a class="scroll" href="#tabs-2">Section 2 Text</a></li> 
        <li><a class="scroll" href="#tabs-3">Section 3 Example</a></li> 
        <li><a class="scroll" href="#tabs-4">Section 4</a></li> 
       </ul> 
       </div> 
     </div> 
    </div><!-- End right column --> 
</div> <!-- End Main --> 

<div id="left-column"> 
    <h2 id="tabs-1">Lorem Ipsum</h2> 
    <p>The cyanide ion CN- is highly toxic bLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
    </div> 
<div class="clear"></div> 
</div><!-- End Main --> 

然後jQuery的：

$("#table-of-contents-link").click(function() { 
     var rightColumn = $("#right-column"), 
     wrapper = $(".menu-wrapper"); 

     rightColumn.toggle("slide, left"); 
     wrapper.css('width', 'auto'); 
}); 

我傾向於去與Varinder的解決方案，簡單地切換類將使用較少的果汁比跑步動畫。

如果此代碼是用於設備的CSS將更新除了jQuery代碼的運行速度更快。只有非常現代的手機才能流暢地播放動畫。

把它們想象成動畫GIF。當你創建它們時，它們的播放速度非常快，但是瀏覽器以慢速播放的方式播放它們。 。