Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create a revealing sidebar using HTML, CSS and JavaScript ?

  • Last Updated : 31 Mar, 2021

In this article, we are going to create a rotating navigation bar by using simple HTML CSS, and JavaScript. The content of the page will rotate and the navigation bar will reveal itself when the menu button is clicked.

Approach:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

  • Create an HTML file in which we are going headings and a navigation bar.
  • Create a CSS style to give some animation effects to the web-page elements.
  • Create a JS file for adding event-listeners that can detect the mouse click event.

HTML Section: In this section, we will define the structure of the page by following the below steps:

  • We will first create an HTML file.
  • Then we link the CSS file that provides styling to our HTML.
  • In the body section, we add two icons for the closing and opening of the navigation bar.
  • In the end, we add two <script> tags, one for our index.js file and the other for the icon that we have used on our web-page.

index.html






<html>
<head>
  <link rel="stylesheet" 
        href="style.css">
</head>
<body>
  <div class="main_box show-nav">
    <div class="circle-container">
      <div class="circle">
        <button class="open">
          <i class="fas fa-bars"></i>
        </button>
        <button class="close">
          <i class="fas fa-times"></i>
        </button>
      </div>
    </div>
    <div class="content">
      <h1 style="color: green;">
        GeeksforGeeks
      </h1>
      <small>Hello Geeks</small>
      <p>
        GeeksforGeeks is a good platform to 
        learn programming. It is an educational
        website. Prepare for the Recruitment drive
        of product based companies like Microsoft,
        Amazon, Adobe etc with a free
        online placement preparation course. The
        course focuses on various MCQ's and Coding
        question likely to be asked in the interviews
        and make your upcoming placement season 
        efficient and successful.
      </p>
  
      <p>
        Also, any geeks can help other geeks by
        writing articles on the GeeksforGeeks,
        publishing articles follow few steps 
        that are Articles that need little
        modification or improvement from reviewers
        are published first. To quickly get your
        articles reviewed, please refer existing
        articles, their formatting style, coding 
        style, and try to make you are close to
        them. In case you are a beginner, you 
        may refer Guidelines to write an Article.
      </p>
  
  
    </div>
  </div>
  <nav>
    <ul class="nav-links">
      <li>home</li>
      <li>about</li>
      <li>contact</li>
    </ul>
  </nav>
          crossorigin="anonymous"></script>
  <script src="index.js"></script>
</body>
</html>

CSS Section: In this section, we will style the HTML with animations and effects to our HTML page so that it looks interactive to users. We will follow the below steps:

  • We will first restore all the browser effects.
  • Then we use classes and ids to give effects to HTML elements.
  • We use the :hover selector to use hover effects.

style.css




* {
  box-sizing: border-box;
}
  
body {
  overflow-x: hidden;
  margin: 0;
  background: #000;
  color: #fff;
}
  
.main_box {
  background-color: #fafafa;
  color: #000;
  transform-origin: top left;
  transition: transform 0.5 linear;
  width: 100vw;
  min-height: 100vh;
  padding: 3em;
}
  
.main_box.show-nav {
  transform: rotate(-20deg);
}
  
.circle-container {
  position: fixed;
  top: -6em;
  left: -6em;
}
  
.circle {
  background-color: #ff7979;
  height: 12em;
  width: 12em;
  border-radius: 50%;
  position: relative;
  transition: transform 0.5s linear;
  cursor: pointer;
}
  
.circle button {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 6em;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
}
  
.circle button:focus {
  outline: none;
}
  
.circle button.open {
  left: 60%;
}
.circle button.close {
  top: 60%;
  transform: rotate(90deg);
  transform-origin: top left;
}
  
.main_box.show-nav .circle {
  transform: rotate(-70deg);
}
  
nav {
  position: fixed;
  left: 0;
  bottom: 2.5em;
  z-index: 5;
}
  
nav ul {
  list-style: none;
  padding-left: 2em;
}
  
nav ul li {
  text-transform: uppercase;
  color: rgb(243, 243, 243);
  margin: 2.5em 0;
  transform: translateX(-100%);
  transition: transform 0.4 ease-in;
}
  
nav ul li + li {
  margin-left: 1em;
  transform: translateX(-150%);
}
  
nav ul li + li + li {
  margin-left: 2em;
  transform: translateX(-200%);
}
  
.main_box.show-nav + nav li {
  transform: translateX(0);
  transition-delay: 0.3s;
}
  
.nav-links {
  cursor: pointer;
}

JavaScript Section: In this section, we will configure the navigation button to listen for click events and add or remove the class that controls the navigation bar. We will follow the below steps:

  • We will first select all the required elements from the page.
  • We will next add an event listener to the open and close buttons.
  • We will then add or remove the navigation bar class when the buttons are clicked.

main.js




// Selecting the required elements
const open = document.querySelector(".open");
const close = document.querySelector(".close");
const main_box = document.querySelector(".main_box");
  
// Adding an event listener for the mouse
// click for opening the navigation bar
open.addEventListener("click", () => {
  main_box.classList.add("show-nav");
});
  
// Adding an event listener for the mouse
// click for closing the navigation bar
close.addEventListener("click", () => {
  main_box.classList.remove("show-nav");
});

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!