Hi folks, what's up, how is it going?

This is your boy Manohar Anand from the house of Manoarya.

And are you guys ready to make this awesome Sidebar with multiple Pages. Look at the demo bro.

Live Demo

it's amazing. right!

So first of all I want to show the all step covered in this project so that you can jumb from there directly.

Project Files Structure

So guys first of all open your code editor (vs code , sublime...etc ) and make three files.

1. HTML File | 2. CSS File | 3. JS File

You can name it whatever you want. In this particular project I am giving name like following

HTML File Name : Navigation.html | CSS File Name : Navigation.css | JS File Name : Navigation.js

Working On Html File.

Now open your html file I am opening my Navigation. html file inside of visual studio code. and press ctrl + ! to add html starter code.

You can Learn about HTML starter code hare 👇

Learn Now

Now link you css file with html document to apply style on it. for that you can use this code snippet 👇

            <link rel="stylesheet" href="css file name" />

And of course we are using some beautiful fonts. we use fontawesome for beautiful fonts you can go to fontawesome and create your account and start using beautiful fonts for free. 👇

Fontawesome

Now add Basic CSS

Go to your css file and write your universal style using following code snippet

            * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial;
            background: #f1f1f1;
            }

* is know as universal identifier. means inside of this we have margin , padding, box-sizing font-family and background all properties applied on the whole document.

In this main time our page looks like a blank page with some transparent gray background.

Create Top navbar

For creating top navbar we need to add a nav tag and inside of that we put Fontawesome bars icon and a logo image.

              <!--Navigation bar (header)-->
  <nav>
    <i class="fas fa-bars" onclick="nav_opener()" id="bars"></i>
    <img src="https://manoarya.com/Manoarya%20All%20Post/ManoaryaLogo.png" alt="Logo" />
  </nav>

Hare we have a bars icon which id is bars and also applied onclick event on it which we can used for opening and closing the sidebar using javascript.

Now apply style on it. for that we use following properties on nav tag.

            nav {
            height: 50px;
            width: 100%;
            background: white;
            box-shadow: 0 0 1px 1px gray;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            }

Height 50px because I want to the total size of navbar is 50px. width 100% to cover whole width for both desktop and mobile and even on the tablet. background color white you can choose whatever color you like. box-shadow because it's look amazing and show up to the main page and display flex for horizontal alignment, justify-content space-between for align two items inside of nav tag which is bars icon and logo image. align-items center for vertically center the items and last position sticky so that navbar sick on the top of the page.

Style bars icons and logo img

Style for bars Icon

            nav i {
            padding: 10px 20px;
            color: #2b2b2b;
            font-size: 20px;
            margin-left: 10px;
            }
            nav i:active {
            background: #0000002b;
            border-radius: 10px;
            }

We use padding for vertical and horizontal spared and font-size for show little bit bigger and margin-left for little bit left from the left side.

Active class for clicking effect. when click on bars quickly change background and border-radius.

Style for logo image

            nav img {
            height: 35px;
            width: 35px;
            background: #57bdf2;
            margin-right: 10px;
            border-radius: 100px;
            }

We add nav before img because I want to style only that image which is present inside of nav tag. Image that exists outside of the nav tag then these properties aren't applied.

We use height and width same for square shapes and background because if image is not load than show that background and margin-right for little bit right alignment and border-radius 100px for round shape.

Create Sidebar

For creating the sidebar which present in the left side we are used below code snippet.

              <!--Navigation menu container-->
  <div id="nav_container">
    <div class="nav_content">
      <button onclick="page1()">Page 01</button>
      <button onclick="page2()">Page 02</button>
      <button onclick="page3()">Page 03</button>
      <button onclick="page4()">Page 04</button>
      <button onclick="page5()">Page 05</button>
    </div>
    <div class="nav_closer" onclick="nav_closer()">
    </div>
  </div>
  

Hare we have a container which id is nav_container and inside of that we have another container which class is nav_container and nav closer respectively.

nav_container div contains the all buttons which is present is the left side and button works is to open different pages. that's why on the button tag we used onclick to change pages according to button types using javascript.

nav_ closer div is present in right side of the page which works to close the Sidebar. using onclick events using js.

Now time to style this elements. For that we used following code.

Style for main Container 👇

            #nav_container {
            height: 100vh;
            width: 100%;
            background: none;
            position: fixed;
            top: 0;
            z-index: 123;
            display: flex;
            transition: .2s ease-out;
            left: -100%;
            }

For style nav container 👇

            .nav_content {
            height: 100vh;
            width: 70%;
            background: white;
            box-shadow: 0 0 10px 1px gray;
            display: flex;
            flex-direction: column;
            }

For style buttons which is present inside of nav_content 👇

            .nav_content button {
            padding: 20px 20px;
            transform: scale(0.9);
            background: linear-gradient(120deg, #0d90d4,#0db2b4);
            color: white;
            border: none;
            border-radius: 10px;
            outline: none;
            font-weight: bold;
            font-size: 20px;
            }
            .nav_content button:active {
            background: linear-gradient(120deg,#0db2b4,#0d90d4);
            transform: scale(0.88);
            }

For style nav closer 👇

            .nav_closer {
            height: 100vh;
            width: 30%;
            background: #00000000;
            transition: .2s ease-in;
            }

Create multiple Pages

Now time to create pages structure for that we have a container known as a page container.

              <!--All Pages container-->
  <div id="page_container">
  </div>

Javascript implication

Now switch to javascript file and inside of that we are going to write following script.

For functionality like when anyone click on the bars icon then open sidebar, when click in front of the sidebar then close sidebar and when click on the buttons then change pages.

Access all necessary things from html file and stored it inside a variable. 👇

            //All variable declaration
            const nav_container = document.getElementById('nav_container');
            const page_container = document.getElementById('page_container');
            const x = window.matchMedia("(max-width: 700px)")

Script for open sidebar when click on the bars icon.

            //open navigation or sidebar
            function nav_opener() {
            nav_container.style.left = '0%';
            }

            //close navigation or sidebar
            function nav_closer() {
            nav_container.style.left = '-100%';
            }

Script for responsive design for both desktop and mobile. Basically hide the side bar in mobile screens and show sidebar in desktop screens

            //media query script
            function myFunction(x) {
            if(x.matches) {
            nav_container.style.left = '-100%';
            }
            else{
            nav_container.style.left = '0';
            }
            }

Script to change pages when click on buttons

            //page controller
            function page1() {
            page_container.style.backgroundColor = "#00b5b5";
            page_container.innerHTML = "Page 01";

            myFunction(x);

            }
            function page2() {
            page_container.style.backgroundColor = "#29c29d";
            page_container.innerHTML = "Page 02";
            myFunction(x);
            }
            function page3() {
            page_container.style.backgroundColor = "#db3391";
            page_container.innerHTML = "Page 03";
            myFunction(x);

            }
            function page4() {
            page_container.style.backgroundColor = "#e79d45";
            page_container.innerHTML = "Page 04";
            myFunction(x);
            }
            function page5() {
            page_container.style.backgroundColor = "#1b4ad8";
            page_container.innerHTML = "Page 05";
            myFunction(x);

            }
            page1();

All buttons or we say all pages connect in single div called page_container using innerHTML we implement data inside of page_container div.

page1() for called without button clicked for show default page. also we changed the background color of the page so that we see difference between pages.

I hope you like this project please subscribe and comment your thoughts and suggestions.

That's all for today. Thanks for reading

Happy Coding and love you 3000, By