javascript - 滑出垂直导航

Question

我正试图对这个滑出式导航进行最后的润色，但遇到了最后一个问题。

你可以在这里看到:http://jsfiddle.net/93chsw11/1/

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

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

我希望它随导航一起滚动，使它们并排放置，或者以某种方式在导航栏下方滚动。我四处寻找解决方案，但没有任何方法可以在不引起另一个问题的情况下解决这个问题。

我愿意接受其他可能采取不同路线的建议，也许是用边距而不是左侧位置或类似的东西？我只是想让它看起来像现在一样，在部分名称的左侧使用 Glyphicons，并且当导航折叠以显示图标时。

在此先感谢您提供的所有帮助:)

导航定位的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');
        });
    });

Answer 1

您可以使用此处的 z-index 结合一些 jQuery 来实现您想要做的事情。当 openall 按钮打开时，您可以将 sidebar 的 z-index 设置为一个较高的值，例如 9999已单击，您可以在侧边栏隐藏时将 z-index 设置回 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").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);
    });

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

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

#sidebar {
  position: fixed;
  left: 0;
  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 {
  position: absolute;
  background-color: #fff;
  left: 30px;
  height: 100%;
  width: 96%;
  padding-left: 15px;
  padding-top: 5px;
}
#newContent::-webkit-scrollbar {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar">
  <nav id="nav">
    <li id="open-close">
      <span class="openall">+</span>
      <span class="hideall">-</span>
    </li>

    <span id="hide-nav">Close</span> 
    <li class="navBG">
      <a href="javascript:void(0);" class="navLink">
          General Info
        </a>
      <ul class="sublinks">
        <li>&ndash; &nbsp;Employee Directory</li>
        <li>&ndash; &nbsp;Documents</li>
        <li>&ndash; &nbsp;FTP</li>
        <li>&ndash; &nbsp;CNC Bulletin Board</li>
        <li>&ndash; &nbsp;Manage</li>
      </ul>
    </li>
    <li class="navBG">
      <a href="javascript:void(0);" class="navLink">
          Job Info
        </a>
      <ul class="sublinks">
        <li>&ndash; &nbsp;Job List</li>
        <li>&ndash; &nbsp;Files Required</li>
        <li>&ndash; &nbsp;Incoming Data List</li>
        <li>&ndash; &nbsp;Signoffs</li>
        <li>&ndash; &nbsp;Leader List</li>
        <li>&ndash; &nbsp;Milestone/Timelines</li>
      </ul>
    </li>
    <li class="navBG">
      <a href="javascript:void(0);" class="navLink">
          QIR Info
        </a>
      <ul class="sublinks">
        <li>&ndash; &nbsp;Open QIRs</li>
        <li>&ndash; &nbsp;Search QIRs</li>
      </ul>
    </li>
    <li class="navBG">
      <a href="javascript:void(0);" class="navLink">
          Reports
        </a>
      <ul class="sublinks">
        <li>&ndash; &nbsp;Tryout Reports</li>
        <li>&ndash; &nbsp;R&amp;D Reports</li>
        <li>&ndash; &nbsp;Tech. Advancements</li>
        <li>&ndash; &nbsp;Budget Reports</li>
        <li>&ndash; &nbsp;R&amp;D Job Summary</li>
      </ul>
    </li>
    <li class="navBG">
      <a href="javascript:void(0);" class="navLink">
          NEW
        </a>
      <ul class="sublinks">
        <li>&ndash; &nbsp;New Job</li>
        <li>&ndash; &nbsp;New Incoming</li>
        <li>&ndash; &nbsp;New Quote</li>
        <li>&ndash; &nbsp;New Program</li>
      </ul>
    </li>
    </ul>
  </nav>
</div>

<div id="newcontent">
  CONTENT HERE
</div>

jsFiddle Demo .

您可以在上面的示例中看到，一旦侧边栏打开，您就可以水平滚动，侧边栏始终保持在顶部，内容在其下方滚动。