如何通过收缩宽度隐藏固定位置侧面菜单

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

好吧，说实话，我看不到那么多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');
});

---

修改

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 2

使用jQuery动画

编辑2 ：http://jsfiddle.net/Varinder/embLD/7/

修改 再想一想，你不需要在width属性上进行转换，transform就可以完成这项工作。

更新了90％广泛的内容区域：http://jsfiddle.net/Varinder/embLD/5/

---

您可以利用过渡，但不确定在padding和width属性上添加过渡是否是个好主意。

我稍微调整了标记以实现浮动效果。即当侧边栏缩小时 - 内容流动以填充剩余空间。

小提琴 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 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。当你创建它们时它们会超级快速地播放，但是浏览器会以慢速播放它们。