Inspiration For Creative Minds
Home » Labs » How to create collapse sidebar in html5 with css3  

Filed under Labs

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

It's only fair to share...Share on Google+Tweet about this on TwitterShare on Facebook
Labs

Posts you may like: