我正在尝试弄清楚如何将这种类型的sidebar navigation与我JSfiddle中的布局相结合。
在第一个示例中，侧边栏折叠到主图标，我看到它是如何完成的，但它使用的是Nav标记，这不是理想的，因为它的物理空间不受页面内容的尊重。它会在页面内容下滑动，而不是将其推到调整大小。
理想情况下，我希望将nav放置在一个列中，该列保留其自己的空间，并与第二个JSfiddle中的其他行顶部对齐，根据打开或折叠，相应地调整行和列的大小状态。
或者有一种更简单的方法可以完全忽略Nav标签吗？
我喜欢的边栏功能：
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>
答案 0 :(得分：1)
那么，这样的事情呢？
(function () {
$(function () {
var SideBAR;
SideBAR = (function () {
function SideBAR() {}
SideBAR.prototype.expandMyMenu = function () {
return $(".sidebar").removeClass("sidebar-menu-collapsed").addClass("sidebar-menu-expanded");
};
SideBAR.prototype.collapseMyMenu = function () {
return $(".sidebar").removeClass("sidebar-menu-expanded").addClass("sidebar-menu-collapsed");
};
SideBAR.prototype.showMenuTexts = function () {
return $(".sidebar ul a span.expanded-element").show();
};
SideBAR.prototype.hideMenuTexts = function () {
return $(".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(".sidebar").hasClass("sidebar-menu-collapsed")) {
instance.adjustPaddingOnExpand();
instance.expandMyMenu();
instance.showMenuTexts();
instance.showActiveSubMenu();
$(this).css({
color: "#000"
});
} else if ($(this).parent(".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);@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 {
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;
}<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row" style="height:60px; margin-bottom:10px;">
<div class="well">
Header area
</div>
</div>
<div class="row">
<nav class="sidebar sidebar-menu-collapsed">
<a href="#" id="justify-icon" style="color: rgb(255, 255, 255);">
<span class="glyphicon glyphicon-align-justify"></span>
</a>
<ul class="level1">
<li class="active">
<a class="expandable" href="#" title="Dashboard" style="padding: 4px; width: 100%;">
<span class="glyphicon glyphicon-home collapsed-element"></span>
<span class="expanded-element" style="display: none;">Dashboard</span>
</a>
</li>
<li>
<a class="expandable" href="#" title="APIs" style="padding: 1px 4px 4px 0px;">
<span class="glyphicon glyphicon-thumbs-up collapsed-element"></span>
<span class="expanded-element" style="display: none;">Thumbs Up</span>
</a>
</li>
<li>
<a class="expandable" href="#" title="Settings" style="padding: 1px 4px 4px 0px;">
<span class="glyphicon glyphicon-picture collapsed-element"></span>
<span class="expanded-element" style="display: none;">Picture</span>
</a>
</li>
</ul>
<a href="#" id="logout-icon" title="Logout">
<span class="glyphicon glyphicon-off"></span>
</a>
</nav>
<div class="col-md-8">
<div class="row">
<div class="col-md-12">
<div class="well">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.</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="well">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.</div>
</div>
</div>
</div>
</div>
<style>
html, body { margin: 0; min-height: 100%; min-width: 100%; padding: 0; }
.row { margin: 0; width: 100%; }
.row .row { width: auto; }
.row nav { position: relative; }
.row nav, .row nav ~ div { display: table-cell; }
</style>