DEV Community

Manohar Anand
Manohar Anand

Posted on

How to make Sidebar with multiple Pages? Using HTML, CSS and Javascript

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" />


Enter fullscreen mode Exit fullscreen mode

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;
            }


Enter fullscreen mode Exit fullscreen mode

* 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>



Enter fullscreen mode Exit fullscreen mode

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;
            }


Enter fullscreen mode Exit fullscreen mode

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;
            }


Enter fullscreen mode Exit fullscreen mode

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;
            }


Enter fullscreen mode Exit fullscreen mode

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>
  


Enter fullscreen mode Exit fullscreen mode

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%;
            }


Enter fullscreen mode Exit fullscreen mode

For style nav container ūüĎá


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


Enter fullscreen mode Exit fullscreen mode

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);
            }


Enter fullscreen mode Exit fullscreen mode

For style nav closer ūüĎá


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


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

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)")


Enter fullscreen mode Exit fullscreen mode

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%';
            }


Enter fullscreen mode Exit fullscreen mode

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';
            }
            }


Enter fullscreen mode Exit fullscreen mode

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();



Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)