Step 5: Sidebar Navigation Tutorial
This is what we are going to create in this step by step tutorial. Click on the image to view the website in new tab.
Side-bar Navigation - Step 5.1
In Step 5.1, CSS3 style is applied to the Side-bar Navigation.
The style is provided below with HTML comment explanation.
/* Side-bar Navigation */
.top-sidebar { /* Style applied to the Side-bar */
width: 20%;
float: left;
margin-left: 2%;
padding: 2% 3%;
margin-bottom: 2%;
}
.navigation { /* Style applied to the navigation list */
display: block;
list-style-position: inside;
list-style-type: none; /* Removes the bullets */
margin: 0;
padding: 0.875em 0;
}
Side-bar Navigation Step is now complete
Now the website will look like this. Click on the image to view the website in new tab.
