0
Я пытаюсь понять, как объединить этот тип sidebar navigation с макетом, который у меня есть в моем JSfiddle.Создание колонтитула левого навигационного стиля
В первом примере боковая панель сворачивается к основным значкам, и я вижу, как это делается, но использует тег Nav, который не идеален, так как это физическое пространство не соблюдается содержимым страницы. Он скользит по содержимому страницы, а не перетаскивает ее.
В идеале, я бы хотел, чтобы этот nav размещался в столбце, в котором его собственное пространство и верх выравниваются с другими строками, как во втором JSfiddle, соответственно изменяя размеры строк и столбцов в зависимости от открытого или рухнувшее его состояние.
Или существует гораздо более простой способ достичь этого, так как он вообще не содержит тег Nav?
Функции Sidebar мне нравится:
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