How to create collapse sidebar in html5 with css3

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

Related posts:

Partner with Us

We are providing an exclusive partnership offer to individuals and companies who are interested in setting up their own web design & development company. For more information about how to partner with us, please contact us