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

Last Updated : 19 Jun, 2024

A revealing sidebar is a hidden UI element that becomes visible upon user interaction, such as clicking or swiping, providing navigation links. 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 with headings and a navigation bar, link the CSS file for styling, and include icons for opening and closing the navigation bar. Add <script> tags for index.js and icon usage.
Reset browser default styles using CSS, apply classes and IDs for styling and layout, and use :hover selectors for interactive effects. Implement animations for smooth transitions and ensure responsive design for various devices.
Create index.js, add event listeners to detect and handle mouse click events to manage the navigation bar, ensuring an interactive user experience.

Example: This example shows the implementation of the above-explained approach.

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

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

JavaScript

// Filename: index.js

document.addEventListener('DOMContentLoaded', (event) => {
    const mainBox = document.querySelector('.main_box');
    const circle = document.querySelector('.circle');
    const openBtn = document.querySelector('.open');
    const closeBtn = document.querySelector('.close');
    const navLinks = document.querySelectorAll('nav ul li');

    openBtn.addEventListener('click', () => {
        mainBox.classList.add('show-nav');
        navLinks.forEach((link, index) => {
            link.style.transitionDelay = `${index * 0.1}s`;
            link.style.transform = 'translateX(0)';
        });
    });

    closeBtn.addEventListener('click', () => {
        mainBox.classList.remove('show-nav');
        navLinks.forEach((link) => {
            link.style.transitionDelay = '0s';
            link.style.transform = '';
        });
    });
});