{ A destination to learn coding }

Make a scrollable aside bar.

Note: An aside bar basically acts as a navigation bar
  • Home
  • Blog
  • Reviews
  • Tutorials
  • Work
  • Projects
  • My Takes
  • Technology
  • Articles
  • Contact
  • About
Html Script


<aside>
	<ul>
	 <li>Menu</li>
	 <li>Blog</li>
	 <li>Reviews</li>
	 <li>Tutorials</li>
	 <li>Work</li>
	 <li>Projects</li>
	 <li>My Takes</li>
	 <li>Technology</li>
	 <li>Articles</li>
	 <li>Contact</li>
	 <li>About</li>
	</ul>
</aside>
CSS code

aside{
width:300px;
height:200px;
overflow-y:scroll;
}

aside ul{
padding:0px;
}	

aside ul li{
width:100%;
height:40px;
line-height:40px;
background-color:#444444;
color:white;
text-align:center;
border-bottom:1px solid #999999;
font-size:18px;
}

aside ul li:hover{
color:black;
background-color:white;
}
	

You can affix the aside bar to either of the sides (preferably the left side) by using float property. Example float:right;