0
我想弄清楚如何将这种类型的sidebar navigation与我的JSfiddle中的布局结合在一起。创建折叠的左导航样式栏
在第一个示例中，侧边栏会折叠到主要图标，我会看到如何完成，但它使用的Nav标签不够理想，因为它的物理空间不受页面内容的尊重。它在页面内容下滑动，而不是推到调整大小。
理想情况下，我希望将该导航栏放置在保留自己的空间并与其他行（如第二个JSfiddle）顶部对齐的列中，根据打开的大小将行和列的大小调整为相应的大小它崩溃的状态。
还是有一种更简单的方法来实现这一点，完全忽略了导航标签？
侧边栏功能我想：
HTML：
<body>
<div class="row">
<div class="col-md-12" style="height:60px;">
Header Area
</div>
</div>
<div class="row">
<div class="col-md-1">
<nav class='sidebar sidebar-menu-collapsed'> <a href='#' id='justify-icon'>
<span class='glyphicon glyphicon-align-justify'></span>
</a>
<ul class='level1'>
<li class='active'> <a class='expandable' href='#' title='Dashboard'>
<span class='glyphicon glyphicon-home collapsed-element'></span>
<span class='expanded-element'>Dashboard</span>
</a>
<ul class='level2'>
<li> <a href='#' title='Traffic'>Traffic</a>
</li>
<li> <a href='#' title='Conversion rate'>Conversion rate</a>
</li>
<li> <a href='#' title='Purchases'>Purchases</a>
</li>
</ul>
</li>
<li> <a class='expandable' href='#' title='APIs'>
<span class='glyphicon glyphicon-wrench collapsed-element'></span>
<span class='expanded-element'>APIs</span>
</a>
</li>
<li> <a class='expandable' href='#' title='Settings'>
<span class='glyphicon glyphicon-cog collapsed-element'></span>
<span class='expanded-element'>Settings</span>
</a>
</li>
<li> <a class='expandable' href='#' title='Account'>
<span class='glyphicon glyphicon-user collapsed-element'></span>
<span class='expanded-element'>Account</span>
</a>
</li>
</ul> <a href='#' id='logout-icon' title='Logout'>
<span class='glyphicon glyphicon-off'></span>
</a>
</nav>
</div>
<div class="col-md-11">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</body>
的Javascript：
(function() {
$(function() {
var SideBAR;
SideBAR = (function() {
function SideBAR() {}
SideBAR.prototype.expandMyMenu = function() {
return $("nav.sidebar").removeClass("sidebar-menu-collapsed").addClass("sidebar-menu-expanded");
};
SideBAR.prototype.collapseMyMenu = function() {
return $("nav.sidebar").removeClass("sidebar-menu-expanded").addClass("sidebar-menu-collapsed");
};
SideBAR.prototype.showMenuTexts = function() {
return $("nav.sidebar ul a span.expanded-element").show();
};
SideBAR.prototype.hideMenuTexts = function() {
return $("nav.sidebar ul a span.expanded-element").hide();
};
SideBAR.prototype.showActiveSubMenu = function() {
$("li.active ul.level2").show();
return $("li.active a.expandable").css({
width: "100%"
});
};
SideBAR.prototype.hideActiveSubMenu = function() {
return $("li.active ul.level2").hide();
};
SideBAR.prototype.adjustPaddingOnExpand = function() {
$("ul.level1 li a.expandable").css({
padding: "1px 4px 4px 0px"
});
return $("ul.level1 li.active a.expandable").css({
padding: "1px 4px 4px 4px"
});
};
SideBAR.prototype.resetOriginalPaddingOnCollapse = function() {
$("ul.nbs-level1 li a.expandable").css({
padding: "4px 4px 4px 0px"
});
return $("ul.level1 li.active a.expandable").css({
padding: "4px"
});
};
SideBAR.prototype.ignite = function() {
return (function (instance) {
return $("#justify-icon").click(function (e) {
if ($(this).parent("nav.sidebar").hasClass("sidebar-menu-collapsed")) {
instance.adjustPaddingOnExpand();
instance.expandMyMenu();
instance.showMenuTexts();
instance.showActiveSubMenu();
$(this).css({
color: "#000"
});
} else if ($(this).parent("nav.sidebar").hasClass("sidebar-menu-expanded")) {
instance.resetOriginalPaddingOnCollapse();
instance.collapseMyMenu();
instance.hideMenuTexts();
instance.hideActiveSubMenu();
$(this).css({
color: "#FFF"
});
}
return false;
});
})(this);
};
return SideBAR;
})();
return (new SideBAR).ignite();
});
}).call(this);
CSS-
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css");
body {
background: none repeat scroll 0 0 white;
}
nav.sidebar-menu-collapsed {
width: 44px;
}
nav.sidebar-menu-expanded {
width: auto;
}
nav.sidebar {
position: fixed;
top: 0px;
left: 0px;
height: 100%;
background: none repeat scroll 0 0 #0099ff;
color: white;
padding: 20px 10px;
}
nav.sidebar a#justify-icon {
outline: 0;
color: white;
font-size: 24px;
font-style: normal;
}
nav.sidebar a#logout-icon {
outline: 0;
color: white;
font-size: 24px;
font-style: normal;
position: absolute;
bottom: 10px;
left: 10px;
}
nav.sidebar ul.level1 {
margin: 0;
padding: 0;
margin-top: 60px;
}
nav.sidebar ul.level1 li {
margin: 0;
padding: 0;
margin-top: 20px;
list-style-type: none;
}
nav.sidebar ul.level1 li a.expandable {
outline: 0;
display: block;
position: relative;
width: 100%;
height: 30px;
color: white;
text-decoration: none;
text-align: left;
padding: 4px 4px 4px 0px;
font-size: 20px;
}
nav.sidebar ul.level1 li a.expandable:hover {
color: #bbbbbb;
}
nav.sidebar ul.level1 li a.expandable span.expanded-element {
display: none;
font-size: 11px;
position: relative;
bottom: 5px;
}
nav.sidebar ul.level1 li.active {
margin-left: -4px;
}
nav.sidebar ul.level1 li.active a.expandable {
background: none repeat scroll 0 0 black;
border-radius: 4px;
color: white !important;
width: 30px;
padding: 4px;
}
nav.sidebar ul.level1 li.active a.expandable:hover {
color: white !important;
}
nav.sidebar ul.level1 ul.level2 {
margin: 20px 6px 20px 30px;
padding: 0;
display: none;
}
nav.sidebar ul.level1 ul.level2 li {
margin: 0;
padding: 0;
margin-top: 10px;
padding-bottom: 10px;
list-style-type: none;
border-bottom: solid white 1px;
}
nav.sidebar ul.level1 ul.level2 li:last-child {
border-bottom: none;
}
nav.sidebar ul.level1 ul.level2 li a {
text-decoration: none;
outline: 0;
color: white;
text-decoration: none;
font-size: 11px;
}
所需的布局：
<div class="row" style="height:60px; margin-bottom:10px;">
<div class="well">
Header area
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="well">
<span class="glyphicon glyphicon-menu-hamburger pull-right" ></span>
<br/>
<span class="glyphicon glyphicon-home"></span> Home
<br/>
<span class="glyphicon glyphicon-thumbs-up"></span> Thumbs Up
<br/>
<span class="glyphicon glyphicon-picture"></span> Picture
<br/>
<br/>
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
<div class="well">2</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="well">4</div>
</div>
</div>
</div>
</div>
所以，让我试着去了解一件事，你不希望它从绝对从上到下去，而是填补了“行”的高度，它在？ – SpYk3HH
是的，这就是我所问的，不知何故，我没有明白。从我的一个例子中我可以看到它使用了原型，这增加了更多的复杂性。 – kylebellamy