You can design navigation menu in any pattern you prefer. It’s totally upto you as a web designer to decide what’s best for you. These menus guide your users to explore the contents that you are delivering through your website. So, It’s important to consider design aspects of your navigation menu. Sidebar menu is just a typical design of navigation menus. Though while sidebar menu doesn’t have to be a navigation menu, it may just yet be a tabs menu but you get the idea. So, the menu that are present on the side of your main content is a sidebar menu. In this tutorial, we will be developing a vertical sidebar navigation menu using HTML and CSS with the sidenav aligned to left side of main content.
Sidebar Menu is usually used in admin dashboard or any profile management sites. Though that doesn’t mean its application to limited to these areas.
Sidebar Menu usually comes with collapsible feature. That’s why, sidenav menus are great when space consideration is critical.
Learn to Make Vertical Sidebar Menu with HTML and CSS
In this tutorial, we are using html and css to build a simple sidenav menu attached to left side of the content. The menu would be collapsible with beautiful transitions. So , Yeah! Lets start coding.
Step 1: Setting up the Background
For starters, lets just setup the background of our website which will hold the sidebar navigation menu. So In the CSS below, I’ve just added a gradient as a background of the body. Others are just basic styling.
body{ font-family: "Open Sans", arial; background: rgb(62,189,162); background: #ee9ca7; background: -webkit-linear-gradient(to right, #ffdde1, #ee9ca7); background: linear-gradient(to right, #ffdde1, #ee9ca7); color:#fff; font-weight:300;}Step 2: Creating a Sidebar
Now lets get to the real problem.Though, in this section we will just be building the wrapper or container for our sidebar menu. So just add a nav block in the html just as below to wrap our sidebar menu.
<nav></nav>Now lets style the nav block with CSS so that it could be distinguished separately as a sidebar navigation from the body.
I have styled the html nav block in the below CSS to align the sidenav to left. That’s done by simply positioning the block as absolute and setting top to zero.
nav{ background:#00bbbb; position:absolute; top:0; bottom:0; height:100%; left:0; width:250px;}After above CSS, you should be seeing a sidebar within the page. Though, that doesn’t yet contain any menu as of now. We will be adding menu in the following section.
Step 3: Basic HTML for Menu
Moving along the tutorial, before adding the hyperlinks to be stacked in vertical by modifying its CSS to behave as a sidebar, Lets add the following CDN link of font-awesome. This link will enable us to use the icons provided by the font-awesome.
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">Okay Now we can add icons on our webpage provided by the font-awesome. So, In the HTML code below, I’ve added an anchor tag with a text and the icon. That should be self-explanatory.
For now, the value of href attribute is set to nothing. But you can add links on your own to provide a destination URL when users click on it.
<a href=" "> <i class="fa fa-home fa-lg"></i> <span class="nav-text">Home</span> </a> <a href=" "> <i class="fa fa-user fa-lg"></i> <span class="nav-text">Profile</span> </a> <a href=" "> <i class="fa fa-envelope-o fa-lg"></i> <span class="nav-text">E-mail</span> </a>Step 4: Styling the sidebar menu
You can see that the default hyperlink has appeared on your site. Now just for basic styling to remove the default look, Add the following CSS.
It’s just a basic styling. text-decoration:none removes the default look of the hyperlink
Styling the hyperlink
a { position:relative; text-decoration:none; color:white; font-size: 13px; border-top:1px solid #03A2A2; }With that done, still the hyperlinks are aligned horizontally. Our target in this tutorial is to build a vertical sidebar so lets modify its CSS.
Vertically stacking the sidebar menu
a{ display:table;}The code above simply displays the hyperlinks as a table. This effectively arranges the icon and text horizontally while at the same time vertically stacking all the other hyperlinks.
Styling Icons
Nothing much! Here the CSS below just styles the icon setting its sizes and block dimensions. They were results of some repetitive experiments to finally produce a desired output.
.fa { position: relative; width:70px; height: 36px; text-align: center; top:12px; font-size:20px;}Aligning the Texts to middle
The above CSS has set the icon a little below to 12px from the top thereby disturbing the actual position of those icons. Well the icons and the text needs to be aligned together as a same entity, the CSS just arranges them to similar alignment.
nav .nav-text { position:relative; top:12px;}Step 5: Adding Hover Effect
Without hover effect we can’t visually ascertain as to which element our pointer is currently pointing. Some elements might cover a larger block area and some mightn’t.
So without any interactivity provided by the web site, it becomes difficult for the users to know in whose territory the pointer is current pointing. So for that Lets add hover effect.
a:hover{ color:#fff; background-color:#3863F4; }Extending hyperlink to cover whole sidebar menu width
In above CSS, we’ve successfully added the hover effect to the hyperlinks. But you might have observed that only the portioned covered by the hyperlink appeared to be hovered which is exactly what we wanted.
But, we have to extend the width of the sidebar menu to adjust it according to the background nav‘s width.
a{ width:250px;}Now, You should be having a page just like below.
Step 6: Adding Collapsible Feature to Sidebar Menu
The basics of sidebar menu has been completed. But at the onset of this tutorial we’ve determined to create a vertical sidebar with collapsible feature using just HTML and CSS.
Reducing the nav size
We will achieve the collapsible feature by changing the width of the nav block as the block gets hovered over. Thus creating the collapsible feature.
So for that we’ve got to reduce the width of the block just enough to show the icons and not the menu text. The following CSS should do just that.
nav{ width:70px;}Okay, Since we’ve reduced the width of the nav block, You can clearly see that the menu text are overflowing from the sidebar body. This doesn’t look tidy. So lets hide those overflows.We can achieve that with CSS below.
nav{ overflow:hidden;}Hover Effect
Simple as that, In the CSS below I’ve used the hover effect to revert back the original width of the nav block big enough to hold all those sidenav menus.
nav:hover{ width:250px;}See! We have our very own side navigation menu. But the transition from the reduced width to extended width with hover effect seems very instant and doesn’t look so goo.
So I’ve added the transition property below for the nav block.
nav{ -webkit-transition:width .2s linear; transition:width .2s linear;}If you’ve added the transition property within the hover selector. It will still work but since that is triggered only when hovered, while contracting back to the reduced size the transition effect won’t be seen.
So that’s why I’ve added the attribute to the nav block itself.
The screenshots’ below shows the differing feature of the vertical sidebar navigation menu on hovering, as developed with CSS along this tutorial.
Step 7: Adding Header to Sidebar Menu
Up until this point you’ve already obtained a collapsible sidebar menu. But just for some extra design. Lets add a header on the side navigation menu as below.
<a class="logo" href=""> <h2 style="color:red">O<span style="color:blue">C<span></h2> </a> <div class="label">Sidebar Navigation Menu Tutorial</div>That just produces a simple default texts. So, the following CSS modifies them to look like a header.
.logo{ width:70px; font-family: 'Tangerine', serif; text-align:center; transition:all 0.5s ease;}.label{ height:0px; float:left; width:70px; transition:all 0.5s ease; font-family: 'Tangerine', serif; opacity:0;}The width of the logo header is set equal to the width of the collpased nav block. So that the logo can cover the whole width. Rest CSS are for center alignment and better fonts.
The next part removes the text from being displayed as set by opacity. The height is set to zero for now which will be increase on hover effect.
nav:hover> .logo{ width:250px;}The width of the logo is increased on hovering. That does however look good. But the same short form of header isn’t so good to be displayed. So in the following section we will be replacing the short header to a long version of it.
Replacing the Short Header.
nav:hover> .logo > h2{ text-indent: -999px}nav:hover> .logo > h2:before{ text-indent: 0px; content:'OnAirCode'; float:left; position:relative; left:60px;}The first part removes the original content set by the html by setting the text-indent way beyond the reach of the browser screen on hovering. The Second part simply adds a content before the original content positioning it to be properly appear on the browser with new content.
nav:hover> .label{ height:50px; width:250px; opacity:1; color:black; text-align:center;}As we hover over the nav block, the above CSS simply extends our label field, increasing both height and width and also setting it opacity to 1 which thereby displays the hidden content.
Step 8: Dividing Sibebar Menu to sections
For just extra addition, I’ve added some more side bar menu. These sidebar navigation menu will have a different section set differently with CSS, The following HTML is just redundant structure of step 3.
<div class="mid-block"> <a href=" "> <i class="fa fa-html5 fa-lg"></i> <span class="nav-text">HTML5</span> </a> <a href=" "> <i class="fa fa-css3 fa-lg"></i> <span class="nav-text">CSS3</span> </a> <a href=" "> <i class="fa fa-flask fa-lg"></i> <span class="nav-text">Web Tools</span> </a> <a href=" "> <i class="fa fa-picture-o fa-lg"></i> <span class="nav-text">Art & Design</span> </a> <a href=" "> <i class="fa fa-gamepad fa-lg"></i> <span class="nav-text">Games</span> </a> </div> <a href=" "> <i class="fa fa-book fa-lg"></i> <span class="nav-text">Documentation</span> </a> <a href=" "> <i class="fa fa-cog fa-lg"></i> <span class="nav-text">Setting</span> </a> <a href=" "> <i class="fa fa-question-circle fa-lg"></i> <span class="nav-text">Help</span> </a>Just add the above html code beneath our original hyperlinks. The div block in between them simply sets three sections on our navigation menu.The difference is visually shown by the CSS below.
.mid-block{background-color#076868;;text-transform:capitalize;box-shadow:inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55), inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);;}Step 9: Wrapping the Sidebar Menu with scrollbar
With increasing number of navigation menu as the don’t completely fit in the browser. We need to add a scroll bar to view all those menus. So just add the scrollbar div below wrapping all those sidebar navigation menu by it.
Note: Add more hyperlinks to see the effects.
<div class="scrollbar" id="style-1"></div>The following CSS simply hides the scrollbar.
.scrollbar{height: 90%;width: 100%;overflow-y: hidden;overflow-x: hidden;}When hovered over the scrollbar block, the scrollbar line is displayed with the following CSS.
.scrollbar:hover{ height: 90%; width: 100%; overflow-y: scroll; overflow-x: hidden;}The style of the scrollbar track is set by the CSs below. For different browser compatibility, vendor prefixes are tagged along.
#style-1::-webkit-scrollbar-track{border-radius: 2px;}#style-1::-webkit-scrollbar{width: 5px;background-color: #F7F7F7;}#style-1::-webkit-scrollbar-thumb{border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-color: #BFBFBF;}Finally, the output of the tutorial is shown by the screenshot below both by hovering and with hovering.
Complete Code
I’ve separately explained the codes with same code being modified time and again to see the different changes as we move along the steps. So, if you are getting confused as to what final code is.
I’ve compiled them all together below. You can simply copy these HTML and CSS code and use them directly to built sidenav aligned to left side.
HTML Code
<nav> <a class="logo" href=""> <h2 style="color:red">O<span style="color:blue">C<span></h2> </a> <div class="label">Sidebar Navigation Menu Tutorial</div><div class="scrollbar" id="style-1"> <a href=" "> <i class="fa fa-home fa-lg"></i> <span class="nav-text">Home</span> </a> <a href=" "> <i class="fa fa-user fa-lg"></i> <span class="nav-text">Profile</span> </a> <a href=" "> <i class="fa fa-envelope-o fa-lg"></i> <span class="nav-text">E-mail</span> </a> <div class="mid-block"> <a href=" "> <i class="fa fa-html5 fa-lg"></i> <span class="nav-text">HTML5</span> </a> <a href=" "> <i class="fa fa-css3 fa-lg"></i> <span class="nav-text">CSS3</span> </a> <a href=" "> <i class="fa fa-flask fa-lg"></i> <span class="nav-text">Web Tools</span> </a> <a href=" "> <i class="fa fa-picture-o fa-lg"></i> <span class="nav-text">Art & Design</span> </a> <a href=" "> <i class="fa fa-gamepad fa-lg"></i> <span class="nav-text">Games</span> </a> </div> <a href=" "> <i class="fa fa-book fa-lg"></i> <span class="nav-text">Documentation</span> </a> <a href=" "> <i class="fa fa-cog fa-lg"></i> <span class="nav-text">Setting</span> </a> <a href=" "> <i class="fa fa-question-circle fa-lg"></i> <span class="nav-text">Help</span> </a></div> /nav>CSS Code
body{ font-family: "Open Sans", arial; color:#fff; font-weight:300; background: #ee9ca7; background: -webkit-linear-gradient(to right, #ffdde1, #ee9ca7); background: linear-gradient(to right, #ffdde1, #ee9ca7); }nav{ background:#00bbbb; position:absolute; top:0; bottom:0; height:100%; left:0; width:70px; overflow:hidden; -webkit-transition:width .2s linear; transition:width .2s linear;}a { position:relative; text-decoration:none; color:white; font-size: 13px; display:table; width:250px; border-top:1px solid #03A2A2; }.fa { position: relative; width: 70px; height: 36px; text-align: center; top:12px; font-size:20px;}nav .nav-text { position:relative; top:12px;}a:hover{color:#fff;background-color:#3863F4; }nav:hover{ width:250px;}.logo{ width:70px; font-family: 'Tangerine', serif; text-align:center; transition:all 0.5s ease;}.label{ height:0px; float:left; width:70px; transition:all 0.5s ease; font-family: 'Tangerine', serif; opacity:0;}nav:hover> .logo{ width:250px;}nav:hover> .logo > h2{ text-indent: -999px}nav:hover> .logo > h2:before{ text-indent: 0px; content:'OnAirCode'; float:left; position:relative; left:60px;}nav:hover> .label{ height:50px; width:250px; opacity:1; color:black; text-align:center;}.mid-block{background-color:#076868;text-transform:capitalize;box-shadow:inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55), inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);;}.scrollbar{height: 90%;width: 100%;overflow-y: hidden;overflow-x: hidden;}#style-1::-webkit-scrollbar-track{border-radius: 2px;}#style-1::-webkit-scrollbar{width: 5px;background-color: #F7F7F7;}#style-1::-webkit-scrollbar-thumb{border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-color: #BFBFBF;}.scrollbar:hover{ height: 90%; width: 100%; overflow-y: scroll; overflow-x: hidden;}Add the CDN link on top of head section of your html.
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">Conclusion
Sidebar Navigation menu are commonly used for admin purposes. They provide a great way to navigate across several pages. And in this tutorial, we’ve built a simple vertical sidebar navigation menu using html and CSS aligning the sidenav to left.
Though using simple HTML and CSS we could develop a beautiful sidebar navigation menu. Moving on, you can use JavaScript or Jquery for advanced approaches. For now, That’s it. Congrats you held through.