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

Last Updated : 06 Jun, 2023

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.

HTML

<!-- Filnename: index.html -->
<!DOCTYPE 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.

CSS

/*Filename: style.css File  */
* {
    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;
}

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

HTML

CSS

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?