我正试图对这个滑出式导航进行最后的润色，但遇到了最后一个问题。
你可以在这里看到: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');
});
});
最佳答案
您可以使用此处的 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>– Employee Directory</li>
<li>– Documents</li>
<li>– FTP</li>
<li>– CNC Bulletin Board</li>
<li>– Manage</li>
</ul>
</li>
<li class="navBG">
<a href="javascript:void(0);" class="navLink">
Job Info
</a>
<ul class="sublinks">
<li>– Job List</li>
<li>– Files Required</li>
<li>– Incoming Data List</li>
<li>– Signoffs</li>
<li>– Leader List</li>
<li>– Milestone/Timelines</li>
</ul>
</li>
<li class="navBG">
<a href="javascript:void(0);" class="navLink">
QIR Info
</a>
<ul class="sublinks">
<li>– Open QIRs</li>
<li>– Search QIRs</li>
</ul>
</li>
<li class="navBG">
<a href="javascript:void(0);" class="navLink">
Reports
</a>
<ul class="sublinks">
<li>– Tryout Reports</li>
<li>– R&D Reports</li>
<li>– Tech. Advancements</li>
<li>– Budget Reports</li>
<li>– R&D Job Summary</li>
</ul>
</li>
<li class="navBG">
<a href="javascript:void(0);" class="navLink">
NEW
</a>
<ul class="sublinks">
<li>– New Job</li>
<li>– New Incoming</li>
<li>– New Quote</li>
<li>– New Program</li>
</ul>
</li>
</ul>
</nav>
</div>
<div id="newcontent">
CONTENT HERE
</div>您可以在上面的示例中看到，一旦侧边栏打开，您就可以水平滚动，侧边栏始终保持在顶部，内容在其下方滚动。
关于javascript - 滑出垂直导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26589912/