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 ways to make an impression. So a beautifully designed side navigation can hugely increase your audience visit duration. Hence let's 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 are ready to let's 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. It's 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 let's 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 that we need to style our menu. In the menu class, we have added a fixed position to it. Because if its scroll its height will not cover to the end of the window. While we have added overflow hidden also. So it makes sure that the contents inside the 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 of 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 a click event that 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 of 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.


side nav

I have added some sample text so it may look different than yours. Hence it's 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 learned 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 deeper into this topic then you can download this project on Github. Furthermore, the codes to check the 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.