Cześć,
Mam 2 problemy:
1. Jak id="main" i class="content" ustawić na height: 100% (żeby były tej samej długości co id="sidebar"
2. Jak można uzyskać taki efekt na sidebarze:
- po zwinięciu pokazują się same ikonki
- po najechaniu (hover) widać Nazwę linku i podlinki
O takie coś mi chodzi:
https://zapodaj.net/6827ed09faaf7.jpg.html
https://zapodaj.net/0bdd6975cc3cf.jpg.html
Demo jest na codepen na początku postu.
HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<div id="sidebar">
<div class="logo"><b>Logo</b></div>
<ul class="nav" id="side-menu">
<li>
<a href="#" class="active">
<i class="glyphicon glyphicon-home"></i>
<span>Home</span>
</a>
</li>
<li>
<a href="#">
<i class="glyphicon glyphicon-hdd"></i>
<span>Server</span>
<span class="arrow"></span>
</a>
<ul class="nav nav-second-level collapse">
<li>
<a href="#">
<span>Link #1</span>
</a>
</li>
<li>
<a href="#">
<span>Link #2</span>
</a>
</li>
<li>
<a href="#">
<span>Link #3</span>
</a>
</li>
<li>
<a href="#">
<span>Link #4</span>
</a>
</li>
<li>
<a href="#">
<span>Link #5</span>
</a>
</li>
</ul>
</li>
<li>
<a href="#">
<i class="glyphicon glyphicon-briefcase"></i>
<span>Information</span>
</a>
</li>
<li>
<a href="#">
<i class="glyphicon glyphicon-tower"></i>
<span>Center</span>
</a>
</li>
<li>
<a href="#">
<i class="glyphicon glyphicon-bell"></i>
<span>Notifications</span>
</a>
</li>
</ul>
</div>
<nav class="navbar navbar-default navbar-static-top">
<a href="#" title="Left Sidebar" class="button-left-sidebar trigger-toggle-sidebar">
<span>Ukryj/Pokaz</span>
</a>
</nav>
<main id="main">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at faucibus diam, sed dapibus ligula. Mauris interdum sodales ullamcorper. Ut molestie ut elit non iaculis. In scelerisque luctus molestie. Mauris eu massa vel massa feugiat imperdiet. Vestibulum tristique, turpis sit amet varius dapibus, nunc enim vestibulum enim, ut scelerisque ex urna vitae turpis. In finibus pellentesque urna, et ornare mauris finibus non. Sed ac ipsum mauris.</p>
</div>
</main>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/metisMenu/2.5.2/metisMenu.min.js"></script>
</body>
</html>
CSS:
html {
height: 100%;
box-sizing: border-box;
}
body {
position: relative;
margin: 0;
min-height: 100%;
}
.nav a {
color: #FFF;
}
.nav>li>a:focus, .nav>li>a:hover {
text-decoration: none;
background-color: #999;
}
.navbar-default {
background: #FFF;
border: 0;
margin: 0;
margin-left: 180px;
z-index: 999;
border-bottom: 1px solid #EEE;
}
#sidebar {
width: 180px;
position: absolute;
top: 0;
bottom: 0;
background-color: #000;
}
#main {
margin-left: 180px;
right: 0;
z-index: 4;
background: #F9F9F9;
overflow: hidden;
}
.navbar {
min-height: 40px;
}
.content {
height: 100%;
width: 100%;
float: left;
vertical-align: top;
}
.logo {
color: #FFF;
font-size: 14px;
padding: 20px 15px;
}
.nav>li>a {
padding: 10px 18px;
}
@media only screen and (max-width: 767px) {
.navbar-nav .open .dropdown-menu {
position: absolute;
background: #FFF;
border: 1px solid #EEE;
}
.navbar-right .dropdown-menu {
right: 0;
left: auto;
}
}
@media only screen and (max-width: 1024px) {
#main {
margin-left: 0;
}
#sidebar {
transform: translateX(-100%);
}
.sidebar-hidden #sidebar {
transform: translateX(0);
margin-top: 40px;
z-index: 9999;
}
.sidebar-hidden #main {
margin-left: 0;
}
.sidebar-hidden .navbar-default {
margin-left: 0;
}
.navbar-default {
margin-left: 0;
}
.sidebar-hidden #main .overlay {
opacity: 1;
bottom: 0;
}
.nav {
background: #000;
}
}
@media only screen and (min-width: 1024px) {
.sidebar-hidden .footer {
left: 50px;
}
.sidebar-hidden #sidebar {
width: 50px;
}
.sidebar-hidden #sidebar span {
display: none;
}
.sidebar-hidden #sidebar a {
padding: 10px 18px;
}
.sidebar-hidden .navbar-default {
margin-left: 50px;
}
.sidebar-hidden #main {
margin-left: 50px;
}
.logo {
font-size: 13px;
padding: 20px 8px;
}
}
JS:
/* ----------------------------------------
Sidebar
---------------------------------------- */
$(function() {
function LeftSidebar(){
$("body").toggleClass("sidebar-hidden");
$("body").hasClass("sidebar-hidden");
}
$('.trigger-toggle-sidebar').on('click', function() {
LeftSidebar();
});
});
/* ----------------------------------------
metisMenu
---------------------------------------- */
$(function() {
$('#side-menu').metisMenu();
});
