First of all a well organized and easy-to-follow navigation is the gem for a website. Which can be very beneficial and important for the overall UX (User Experience). Side navigation is one of the most popular and smart way to make an impression. So a beautifully designed side navigation can hugely increase your audience visit duration. Hence lets start to make our css side navigation. I am assuming you all are familiar with HTML,CSS and lil bit of JavaScript.

Markup and directory structure

For our css side navigation we need 4 different files. First of all create an html file, 2 css files and a javascript file. I am naming them index.html, style.css and menu.css and custom.js. So that’s all you can separate the css and js files by creating different directories. Finally our files and folder structure is ready lets move to the html file. Open the html file and add the following code.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Toggle menus</title>
	
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/menu.css">
</head>
<body>

	<!-- menus -->
	<div class="menu menu-left">
		<h2 id="left">Left</h2>
		<ul>
			<li class="active"><a href="#">Home</a></li>
			<li><a href="#">Blog</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>

	<!-- content -->
	<div class="wrapper">
		<h1>Toggle menu</h1>
		<p><b>Combination of simple js and css</b></p>

		<button class="btn" id="left-btn">Left</button>
		
		<button class="btn" id="right-btn">Right</button>
		
		<button class="btn" id="top-btn">Top</button>
		
		<button class="btn" id="bottom-btn">Bottom</button>

		<p><b>Sample text</b></p>
	</div>

	<script src="js/custom.js"></script>
</body>
</html>

In the above piece of code we have just written markup for a menu and wrap our contents into a div element. Because separating our content with a wrapper is needed to push the contents aside while the menu is opened. So that’s our markup or HTML code lets move to our style.css file and some styles out there.

Styling content structure

First of all open your  style.css file and the following code.

html,body {
	margin:0;
	font-family:"Courier New";
	color:#fff;
	height:100%;
}

* {
	box-sizing:border-box;
}

.wrapper {
	background:lightblue;
	margin:0px auto;
	padding:10px;
	text-align:center;
	transition:0.5s all ease-out;
}

.btn {
	display:block;
	color:#fff;
	font-size:18px;
	padding:8px 15px;
	border:2px solid #fff;
	border-radius:4%;
	background:transparent;
	margin:10px auto;
	transition:0.5s all linear;
}
.btn:hover {
	cursor:pointer;
	color:#000;
	background:#fff;
}

So that’s all we need to style our content. I have used box-sizing which is a css3 property. Its used to add padding,border to elements total width and height. You can follow my CSS grid layout – main equipment behind responsiveness tutorial where you will find more examples of box-sizing. You can check w3Schools also for some practice. So now we have styled everything except our menu. Hence lets move to our menu.css file and add some styles.

Styling the menu

Open your menu.css file and add the following code to it.

.menu {
	background:#202020;
	position:fixed;
	color:#fff;
	overflow:hidden;
	transition:0.5s all ease-out;
}

.menu-left {
	width:0px;
	left:0;
	top:0;
	height:100%;
}

/*
To style the top navigation
.menu-top {
	width:100%;
	top:0;
	height:0px;
}
*/

/*
To style the right side navigation
.menu-right {
	width:0px;
	right:0;
	top:0;
	height:100%;
}
*/

/*
To style the bottom navigation
.menu-bottom {
	width:100%;
	bottom:0;
	height:0px;
}
*/

.menu h2 {
	margin:0;
	padding:5px 10px;
	background:#fff;
	color:#000;
	pointer-events:none;
}

@media(max-width:500px) {
	.close-btn::after {
		content:"x";
		position:absolute;
		top:5px;
		right:10px;
		cursor:pointer;
		pointer-events:all;
	}
}

.menu ul {
	margin:0;
	padding:0;
	list-style-type:none;
}

.menu ul li {
	padding:10px;
}

.menu ul li:hover {
	background:rgba(17,17,17,0.7);
}

.menu ul li.active {
	background:red;
}

.menu ul li a {
	color:#fff;
	text-decoration:none;
}

So the above code is all what we need to style our menu. In the menu class we have added fixed position to it. Because if its scroll its height will not cover to the end of window. While we have added overflow hidden also. So it makes sure that the contents inside menu are not visible when the menu is closed. While we have created close-btn class also add a close button on mobiles. Finally that’s the end of styling now lets head over to js (JavaScript). Most off all the main ingredient of our css side navigation is js.

CSS side navigation

So open custom.js file and add the following code.

var btnLeft = document.getElementById('left-btn');
var menuLeft = document.getElementsByClassName('menu-left')[0];
var contentLeft = document.getElementsByClassName('wrapper')[0];

btnLeft.addEventListener('click',toggleLeft);

function toggleLeft() 
{
	check(menuLeft);
	if(menuLeft.style.width > "0px") 
	{
		menuLeft.style.width = "0px";
		contentLeft.style.marginLeft = "0px";
	} 
	else 
	{
		mobile_check();
		menuLeft.style.width = "250px";
		contentLeft.style.marginLeft = "250px";
	}
}

In the above code we just add 3 variables for button,menu and content. Therefore we have added an click event which will toggle the menu. I have used 2 functions inside toggleLeft. In the actual script i have created 4 different menus and check function is used. So that other menus would not overlap. Most off all the mobile_check function is used to add a close button to the menus. So that our side navigation becomes responsive. Finally open your browser and you will see something like this.

final

I have added some sample text so it may look different than yours. Hence its now displaying our contents and the menu is hidden. So now click on the Left button and the menu will be opened. Therefore It will look like this.

left side nav

Now if you try to scroll as a result you will see the menu will always be of same height because its fixed. Finally its the end of our css side navigation guide. So i hope you guys have learnt the basic structure of side navigation. In addition to left side navigation, i have create top,bottom,right side navs also. So if you guys want to get more deeper into this topic then you can download this project on github. Furthermore the codes to check mobile device and overlap restriction has been added to that script. Finally if you have any questions or wish to extend it then you can contact me.


Subham Mitra

A coder who loves to solve real-world problems through coding.

2 Comments

Rawlings · October 16, 2017 at 9:11 pm

Always wish to learn coding and this is an avenue. Will follow you up.

Landing page template - make your site look awesome – Coders dairy · October 1, 2017 at 1:34 pm

[…] can also learn how to create css grids or a side nav. Don’t forget to share with your friends […]

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.