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

Filed under Labs

HTML5 is the latest semantic HTML markup which is still work in progress but most of web developers have been already started the HTML5 based web design and development because of many new features. Below is the simple format of HTML5

Blank HTML5 template

 
	<!DOCTYPE html>
 
	<html>
 
	<head>
		<title></title>
	</head>
 
	<body>
 
	</body>
 
	</html>

Here is the full code used for making a simple side bar with html and css. Here we use a little bit of JavaScript for selecting the menu bars. This example works fine on the latest version of Google Chrome and Firefox browsers. After this code you can view “demo” button to see how it works online.

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-left .sidebar-menu-links a {
			display: block;
			margin: 0 auto 5px auto;
			padding: 10px 0;
			text-align: center;
			color:  #fff;
			font-weight: 500;
			text-decoration: none;
			border-left:1px solid;
			background-color: #2d74bb;
		}
		.sidebar-left .sidebar-menu-links a i.fa {
			display: block;
			font-size: 30px;
			margin-bottom: 5px;
		}
		.sidebar-left .sidebar-menu-links a.selected{
			cursor: default;
			color:#000;
			background-color: #eee;
		}
		.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 > a');
			links.on('click', function () {
				links.removeClass('selected');
				$(this).addClass('selected');
			});
		});
	</script>

HTML

 
	<aside class="sidebar-left"> <!-- sidebar-left -->
 
		<div class="logo">	
	  	  <img src="http://vishmax.com/demos/images/logo-company-white.png" alt="">
		</div>
 
		<div class="sidebar-menu-links"> <!-- sidebar-menu-links -->
			<a href="#"><i class="fa fa-user"></i>Our Company</a>
			<a href="#"><i class="fa fa-dropbox"></i>Services</a>
			<a href="#"><i class="fa fa-camera-retro"></i>Projects</a>
			<a href="#"><i class="fa fa-phone"></i>Contact</a>
		</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: