Here is an example of creating collapse sidebar using html5 with css3. This is something advanced comparing to our basic example of simple sidebar creation. if you didn’t view the basic example we recommended you to view it first. You can view it by clicking below link.
How To Create Sidebar In Html5 With Css3
CSS
body{
font-family:"Open Sans";
font-size: 0.9em;
line-height: 1.8;
padding:0;
margin:0;
background:#eee;
}
.sidebar-left {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 100%;
padding: 20px 0;
background-color:#184775;
}
.logo img{
width:150px;
height:100px;
margin:0 0 0 20px;
}
.sidebar-left .sidebar-menu-links {
margin: 10px auto;
}
.sidebar-menu-links div > a {
display: block;
line-height: 2;
text-align: left;
color: #fff;
font-weight: 500;
border-left:1px solid ;
text-decoration: none;
margin: 0 auto 5px auto;
padding: 10px 0 10px 5px;
background-color: #2d74bb;
}
.sidebar-menu-links div.selected > a{
margin: 0;
color:#000;
background-color: #eee;
}
.sidebar-menu-links div > a i.fa {
position: relative;
font-size: 25px;
top: 3px;
width: 40px;
text-align: center;
}
.sidebar-menu-links div ul.sub-links {
max-height: 0;
margin: 0;
overflow: hidden;
list-style: none;
padding: 0 0 0 30px;
color: #fff;
transition: 0.6s;
}
.sidebar-menu-links div.selected ul.sub-links {
max-height: 200px;
padding: 15px 0 15px 30px;
}
.sidebar-menu-links div .sub-links a {
display: block;
text-decoration: none;
color: #fff;
text-align: left;
}
.contents{
float:right;
width:70%;
height:auto;
margin:12% 0 0 0;
}
.contents a{
color:#000
}
.contents a:hover{
color:#ccc
} |
JavaScript
<script>
$(function () {
var links = $('.sidebar-menu-links > div');
links.on('click', function () {
links.removeClass('selected');
$(this).addClass('selected');
});
});
</script> |
HTML
<aside class="sidebar-left"> <!-- sidebar-left -->
<div class="logo">
<img src="path-to-image/logo-company-white.png" alt="">
</div>
<div class="sidebar-menu-links"> <!-- sidebar-menu-links -->
<div class="link-blue selected">
<a href="#"><i class="fa fa-user"></i>Our Company</a>
<ul class="sub-links">
<li><a href="#">About Us</a></li>
<li><a href="#">Our Story</a></li>
<li><a href="#">Our Team</a></li>
<li><a href="#">Directors</a></li>
</ul>
</div>
<div class="link-red">
<a href="#"><i class="fa fa-dropbox"></i>Services</a>
<ul class="sub-links">
<li><a href="#">Web Design</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Mob Apps</a></li>
<li><a href="#">Outsourcing</a></li>
</ul>
</div>
<div class="link-yellow">
<a href="#"><i class="fa fa-camera-retro"></i>Projects</a>
<ul class="sub-links">
<li><a href="#">Web Projects</a></li>
<li><a href="#">Graphic Projects</a></li>
<li><a href="#">Video Projects</a></li>
</ul>
</div>
<div class="link-green">
<a href="#"><i class="fa fa-phone"></i>Contact</a>
<ul class="sub-links">
<li><a href="#">Office Address</a></li>
<li><a href="#">Enquiry Form</a></li>
<li><a href="#">Support Login</a></li>
<li><a href="#">Payment Options</a></li>
</ul>
</div>
</div> <!-- /sidebar-menu-links -->
</aside> <!-- /sidebar-left --> |
Demo