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

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:
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>  <script src="https://kit.fontawesome.com/704ff50790.js"          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 elementsconst 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 baropen.addEventListener("click", () => {  main_box.classList.add("show-nav");});  // Adding an event listener for the mouse// click for closing the navigation barclose.addEventListener("click", () => {  main_box.classList.remove("show-nav");});
Output:
CSS-Properties
HTML-Tags
javascript-basics
CSS
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a web page using HTML and CSS
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to calculate the number of days between two dates in javascript?