Javascript 滑出垂直导航

我正试图完成这个幻灯片导航的收尾工作，但遇到了最后一个问题

你可以在这里看到：

虽然您应该知道，它缺少图标，因此在那里看起来不太好，但每个链接的左侧都有一个图标，可以单击打开该部分的链接。不过，您仍然可以单击空白区域的右侧

现在的问题是，当导航打开时，内容可以水平滚动，如果向右滚动，内容就会出现在导航栏的顶部

我想它要么滚动导航，保持它们并排，或者以某种方式滚动导航栏下面。我到处寻找解决方案，但没有任何解决方案可以解决这个问题而不引起另一个问题

我愿意接受其他的建议，可能采取不同的路线，可能是用边距而不是左边的位置或者类似的路线？我只是想看看它现在是怎么做的，在剖面名称的左边有字形图标，当导航折叠以显示图标时

提前感谢您提供的所有帮助：

导航定位的CSS：

#sidebar {
   position: fixed;
   left: 0;
   width: 200px;
   height: 100%;
   color: #F0F0F0;
   background-color: #2D5B81;
   padding-top: 40px;
   overflow: auto;
}

内容定位的CSS：

#newcontent {
   position: absolute;
   background-color: #fff;
   left: 50px;
   top: 50px;
   width: 96%;
   padding-left: 15px;
   padding-top: 5px;
}

用于打开/关闭的jQuery函数：

    $("#hide-nav").click(function() {
        $("#newcontent").animate({'left':"50px"}, 250);
        $(".sublinks").hide(250);
    });

    $(".openall").click(function(){
        $("#newcontent").animate({"left": "205px"}, 250);
        $(".sublinks").show(250);
    });

    $(".hideall").click(function(){
        $(".sublinks").hide(250);
    });

    $(".navLink").click(function() {
        $("#newcontent").animate({"left": "205px"}, 250);
        //$("#newcontent").animate({'marginLeft':"205px"}, 250);
        $(this).parent().children(".sublinks").slideToggle(250, function() {
            $(this).parent().children(".sublinks").toggleClass('sublinks-active');
        });
    });

---

您可以使用这里的z-index和一点jQuery实现您想要做的事情。当按下openall按钮时，可以将侧栏的z索引设置为高值，例如9999；当侧栏隐藏时，可以将z索引设置回0。以下是我在您的代码中稍加修改的两个jQuery函数：

$("#hide-nav").click(function() {
    $("#newcontent").animate({'left':"30px"}, 250);
    $(".sublinks").hide(250);
    $("#sidebar").css("z-index","0");
});

$(".openall").click(function(){
    $("#newcontent").animate({"left": "205px"}, 250);
    $(".sublinks").show(250);
    $("#sidebar").animate({"z-index": "99999"}, 250);
});

$hide-nav.clickfunction{ $newcontent.animate{ “左”：30px }, 250; $.sublinks.hide250； $sidebar.cssz-index，0； }; $.openall.clickfunction{ $newcontent.animate{ 左：205px }, 250; $.sublinks.show250； $sidebar.animate{z-index:99999}，250； }; $.hideall.clickfunction{ $.sublinks.hide250； }; $.navLink.clickfunction{ $newcontent.animate{ 左：205px }, 250; $this.parent.children.sublinks.slideToggle250，函数{ $this.parent.children.sublinks.toggleClass'sublinks-active'； }; }; 边栏{ 位置：固定； 左：0； 宽度：200px； 身高：100%； /*左边距：-150px*/ 颜色：F0； 背景色：2D5B81； 填充顶部：40px； 溢出：自动； } 侧栏：：-webkit滚动条{ 显示：无； } 开闭{ 光标：指针； 文本对齐：左对齐； 右边距：10px； 利润上限：-10px； 边缘底部：15px； 字号：0.8em； } 开闭跨度{ 填充：10px； 边缘顶部：5px； } 隐藏导航{ 光标：指针； 填充物：5px； 字体大小：0.7em； 字号：600； 利润上限：-40px； 左边距：-27px； 右边距：10px； 浮动：对； } 李海军{ 列表样式类型：无； } .navBG{ 右边填充：20px； 边框顶部：1px实心6c8ca6； 边框底部：1px实心6c8ca6； 边缘底部：-1px； } .导航链接{ 显示：块； 宽度：100%； 颜色：d5dee5； 填充：10px； 左边距：20px； 字号：550； 文字装饰：无； } .navLink:悬停{ 颜色：fff； } .导航符号{ 右边距：20px； 左边距：7px； 浮动：左； } .子链接{ 显示：块； 宽度：100%； 字号：0.8em； 边缘顶部：5px； 显示：无； 颜色：c0cdd9； 背景色：285174； } 李先生{ 光标：指针； 左边框：1px实心6c8ca6； } .李：悬停{ 背景色：rgba255、255、255、0.05； } 李安先生{ 显示：块； 文字装饰：无； 颜色：c0cdd9； 填充物：5px； 左侧填充：0； 右边距：10px； } .a:悬停{ 颜色：fff； 字号：500； } .子链接处于活动状态{ 显示：块； } 新内容{ 位置：绝对位置； 背景色：fff； 左：30px； 身高：100%； 宽度：96%； 左侧填充：15px； 垫面：5px； } newContent:：-webkit滚动条{ 显示：无； } + - 关 &恩达什；员工名录 &恩达什；文件 &恩达什；文件传输协议 &恩达什；数控公告板 &恩达什；管理 &恩达什；工作清单 &恩达什；所需文件 &恩达什；传入数据列表 &恩达什；签字 &恩达什；领导名单 &恩达什；里程碑/时间表 &恩达什；开放式QIRs &恩达什；搜索QIRs &恩达什；试用报告 &恩达什；R&；D报告 &恩达什；技术进步 &恩达什；预算报告 &恩达什；R&；D.工作总结 &恩达什；新工作 &恩达什；新来的 &恩达什；新报价 &恩达什；新节目 满足于此

---

如果您不介意丢失侧边栏的固定属性，可以将侧边栏和内容divs设置为inline block，然后设置wid的动画 关闭/打开时侧边栏的第th个

小提琴示例：

以下是CSS方面的情况：

#sidebar {
   display: inline-block;
   vertical-align: top;
   width: 200px;
   height: 100%;
   /*margin-left: -150px;*/
   color: #F0F0F0;
   background-color: #2D5B81;
   padding-top: 40px;
   overflow: auto;
}

#sidebar::-webkit-scrollbar {
    display: none;
}

#open-close {
   cursor: pointer;
   text-align: left;
   margin-right: 10px;
   margin-top: -10px;
   margin-bottom: 15px;
   font-size: 0.8em;
}

#open-close span {
   padding: 10px;
   margin-top: 5px;
}

#hide-nav {
   cursor: pointer;
   padding: 5px;
   font-size: 0.7em;
   font-weight: 600;
   margin-top: -40px;
   margin-left: -27px;
   margin-right: 10px;
   float: right;
}

#nav li {
   list-style-type: none;
}

.navBG {
   padding-right: 20px;
   border-top: 1px solid #6c8ca6;
   border-bottom: 1px solid #6c8ca6;
   margin-bottom: -1px;
}

.navLink {
   display: block;
   width: 100%;
   color: #d5dee5;
   padding: 10px;
   margin-left: 20px;
   font-weight: 550;
   text-decoration: none;
}

.navLink:hover {
   color: #fff;
}

.navGlyph {
   margin-right: 20px;
   margin-left: 7px;
   float: left;
}

.sublinks {
   display: block;
   width: 100%;
   font-size: 0.8em;
   margin-top: 5px;
   display: none;
   color: #c0cdd9;
   background-color: #285174;
}

.sublinks li {
   cursor: pointer;
   border-left: 1px solid #6c8ca6;
}

.sublinks li:hover {
   background-color: rgba(255,255,255,0.05);
}

.sublinks li a {
   display: block;
   text-decoration: none;
   color: #c0cdd9;
   padding: 5px;
   padding-left: 0;
   margin-right: 10px;
}

.sublinks li a:hover {
   color: #fff;
   font-weight: 500;
}

.sublinks-active {
   display: block;
}

#newcontent {
   background-color: #fff;
   height: 100%;
   padding-left: 15px;
   padding-top: 5px;
   display: inline-block;
   vertical-align: top;
}

#newContent::-webkit-scrollbar {
    display: none;
}

以及jQuery：

$("#hide-nav").click(function() {
    $(this).add(".hideall").hide();
    $("#sidebar").animate({width: "30px"},250);
    $(".sublinks").hide(250);
});

$(".openall").click(function(){
    $("#hide-nav").add(".hideall").show();        
    $("#sidebar").animate({width: "200px"},250);        
    $(".sublinks").show(250);
});

$(".hideall").click(function(){
    $(".sublinks").hide(250);
});

$(".navLink").click(function() {
    $(this).parent().children(".sublinks").slideToggle(250, function() {
        $(this).parent().children(".sublinks").toggleClass('sublinks-active');
    });
});

---

强制性代码验证器的存在是有原因的——如果JSFIDLE经常出现问题，那么这个问题是无法回答的。对不起，只是有很多问题，我不想全部添加，我将进行编辑以包括CSS部分，这些部分可能是解决问题的地方。这很有效，但是当导航打开时，就不再有平稳的过渡了。它只是突然打开，然后内容滑出。有没有办法在保持与以前相同效果的同时做到这一点？@noelll是的，有。请检查我上面更新的答案。