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