Html - How shall I make a single sidebar button for open and close as well?

Pushhu
October 30, 2023
74 views
0 votes
2 Answers

Here I’m designing a website clone, I’ve done most of the part, I wanted to make this website responsive for different devices, all that part is just done, but I want a single sidebar button for open and close, like when the user open the website in a mobile or tablet (less than 770 pixels) then a single sidebar button should appear and after clicking that button ofcourse the navbar opens, but i want the close button to appear when the navbar is opened and after clicking the close button and navbar goes away, the menu button should appear.

Here is my code, I’ve done most of the thing, but declared 2 button, and not getting how to execute this single navbar button logic.

<!DOCTYPE html>
<html>
    <head>
        <title>An Event Apart</title>
        <link href='https://fonts.googleapis.com/css?family=Alkalami' rel='stylesheet'>
        <link href='https://fonts.googleapis.com/css?family=Arbutus Slab' rel='stylesheet'>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <style type="text/css" media="all">
            body {
                margin: 0;
                background: url("https://cdn.pixabay.com/photo/2018/03/10/18/03/laptop-3214756_1280.png");
                background-repeat: repeat;
                box-sizing: border-box;
            }
            
            .links-sidebar, .side-btn-open, .side-btn-close {
                display: none;
            }
            
            
            @media screen and (max-width: 770px) {
                .container {
                    display: flex;
                    flex-direction: column;
                }
                .navbar {
                    display: flex;
                    background: #000000;
                    padding: 20px;
                    justify-content: space-between;
                    align-items: center;
                }
                .navbar > a {
                    width: fit-content;
                }
                .navbar > a > img {
                    padding: 0;
                    width: 60%;
                }
                .navbar > .links {
                    display: none;
                }
                .navbar > .side-btn-open, .side-btn-close {
                    width: fit-content;
                    height: fit-content;
                    display: inline;
                    color: #ffffff;
                    background: none;
                    border: none;
                    font-size: 110%;
                    cursor: pointer;
                }
                .links-sidebar {
                    background: #000000;
                    width: 90%;
                    justify-content: center;
                    align-self: center;
                    z-index: 20;
                    border-radius: 0 0 16px 16px;
                }
                .links-sidebar > ul > li, a {
                    width: 100%;
                    list-style: none;
                    color: #ffffff;
                    margin: 16px 0;
                    font-size: 1.2rem;
                    text-decoration: 1.5px underline #ff8c00;
                }
                .links-sidebar > ul > li > a:hover {
                    text-decoration-thickness: 3.5px;
                }
                
                .main {
                    width: 100%;
                    padding: 18% 0;
                    display: flex;
                    flex-wrap: wrap;
                    flex-direction: column;
                    align-items: center;
                }
                .main > h1 {
                    width: 100%;
                    font-weight: bold;
                    font-family: 'Arbutus Slab';
                    font-size: 70px;
                }
                .main > p {
                    width: 100%;
                    font-family: Sans-Serif;
                    font-size: 18px;
                    text-transform: uppercase;
                }
                .main p > i {
                    text-transform: lowercase;
                }
                .main > h3 {
                    font-family: 'Alkalami';
                    font-size: 50px;
                }
                .main > button {
                    width: fit-content;
                    color: #ffffff;
                    background: #ff4500;
                    padding: 7px 14px;
                    border: none;
                    border-radius: 4px;
                    font-size: 14px;
                }
            }
        </style>
        
    </head>
    <body>
        <div class="container">
            <div class="navbar">
                <a href="#logo"><img src="https://i.ibb.co/3m7Xr45/event-apart-removebg-preview.png" border="0"></a>
                
                <button class="side-btn-open" type="button" onclick="btn_open()"><i class="fa-solid"></i></button>

                <button class="side-btn-close" type="button" onclick="btn_close()"><i class="fa-solid"></i></button>
            </div>
            
            <div class="links-sidebar">
                <ul>
                    <li><a href="#speakers">Speakers</a></li>
                    <li><a href="#findanevent">Find an Event</a></li>
                    <li><a href="#whyattend">Why Attend?</a></li>
                    <li><a href="#registration">Registration Info</a></li>
                    <li><a href="#registernow">Register Now!</a></li>
                    <li><a href="#news">News</a></li>
                </ul>
            </div>
            
            <div class="main">
                <h1>Fall Summit</h1>
                
                <p>An (online!) web design conference <i>for</i> ux & front-end experts</p>
                
                <h3>October 26-28, 2020</h3>
                
                <button type="button">Learn More</button>
            </div>
            
            <div class="footer">
                <h1>Take the next step. Join us live or <span>on demand</span></h1>
            </div>
        </div>
        <script type="text/javascript" charset="utf-8">
            function btn_open() {
                document.getElementsByClassName("links-sidebar")[0].style.display = "flex";
            }

            function btn_close() {
               document.getElementsByClassName("links-sidebar")[0].style.display = "none";
            }
        </script>
    </body>
</html>

Here is the image of what i have got.

When clicked menu button, navbar opens, and after clicking cross button it closes, but I want a single button for both of them.

Answers

One way to do it, is to use one toggle button which will change its content according to the state of the side menu. You can replace your buttons with the one below:

<button class="side-btn-toggle" type="button">
    <i class="fa-solid">&#xf0c9;</i>
</button>

and you can add an event listener in which you will monitor and toggle the menu and button state accordingly:

<script type="text/javascript" charset="utf-8">
    let menuOpen = false;
    const linksSidebar = document.querySelector('.links-sidebar');
    const toggleButton = document.querySelector('.side-btn-toggle');
            
    toggleButton.addEventListener('click', () => {
        menuOpen = !menuOpen;
        linksSidebar.style.display = menuOpen ? 'flex' : 'none';
        toggleButton.innerHTML = menuOpen ? '<i class="fa-solid">&#xf00d;</i>' : '<i class="fa-solid">&#xf0c9;</i>';
    });
</script>

You can find the full solution here.

I Have Added a class name .links-sidebar-flex with its attributes being set to flex and change the script so whenever someone click on the button, A class will be added

<!DOCTYPE html>
<html>

<head>
    <title>An Event Apart</title>
    <link href='https://fonts.googleapis.com/css?family=Alkalami' rel='stylesheet'>
    <link href='https://fonts.googleapis.com/css?family=Arbutus Slab' rel='stylesheet'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <style type="text/css" media="all">
        body {
            margin: 0;
            background: url("https://cdn.pixabay.com/photo/2018/03/10/18/03/laptop-3214756_1280.png");
            background-repeat: repeat;
            box-sizing: border-box;
        }

        .links-sidebar,
        .side-btn-open,
        .side-btn-close {
            display: none;
        }

        .links-sidebar-flex {
            display: flex;
        }


        @media screen and (max-width: 770px) {
            .container {
                display: flex;
                flex-direction: column;
            }

            .navbar {
                display: flex;
                background: #000000;
                padding: 20px;
                justify-content: space-between;
                align-items: center;
            }

            .navbar>a {
                width: fit-content;
            }

            .navbar>a>img {
                padding: 0;
                width: 60%;
            }

            .navbar>.links {
                display: none;
            }

            .navbar>.side-btn-open,
            .side-btn-close {
                width: fit-content;
                height: fit-content;
                display: inline;
                color: #ffffff;
                background: none;
                border: none;
                font-size: 110%;
                cursor: pointer;
            }

            .links-sidebar {
                background: #000000;
                width: 90%;
                justify-content: center;
                align-self: center;
                z-index: 20;
                border-radius: 0 0 16px 16px;
            }

            .links-sidebar>ul>li,
            a {
                width: 100%;
                list-style: none;
                color: #ffffff;
                margin: 16px 0;
                font-size: 1.2rem;
                text-decoration: 1.5px underline #ff8c00;
            }

            .links-sidebar>ul>li>a:hover {
                text-decoration-thickness: 3.5px;
            }

            .main {
                width: 100%;
                padding: 18% 0;
                display: flex;
                flex-wrap: wrap;
                flex-direction: column;
                align-items: center;
            }

            .main>h1 {
                width: 100%;
                font-weight: bold;
                font-family: 'Arbutus Slab';
                font-size: 70px;
            }

            .main>p {
                width: 100%;
                font-family: Sans-Serif;
                font-size: 18px;
                text-transform: uppercase;
            }

            .main p>i {
                text-transform: lowercase;
            }

            .main>h3 {
                font-family: 'Alkalami';
                font-size: 50px;
            }

            .main>button {
                width: fit-content;
                color: #ffffff;
                background: #ff4500;
                padding: 7px 14px;
                border: none;
                border-radius: 4px;
                font-size: 14px;
            }
        }
    </style>

</head>

<body>
    <div class="container">
        <div class="navbar">
            <a href="#logo"><img src="https://i.ibb.co/3m7Xr45/event-apart-removebg-preview.png" border="0"></a>

            <button class="side-btn-open" type="button" onclick="btn_display()"><i class="fa-solid">&#xf0c9;</i></button>
        </div>

        <div class="links-sidebar">
            <ul>
                <li><a href="#speakers">Speakers</a></li>
                <li><a href="#findanevent">Find an Event</a></li>
                <li><a href="#whyattend">Why Attend?</a></li>
                <li><a href="#registration">Registration Info</a></li>
                <li><a href="#registernow">Register Now!</a></li>
                <li><a href="#news">News</a></li>
            </ul>
        </div>

        <div class="main">
            <h1>Fall Summit</h1>

            <p>An (online!) web design conference <i>for</i> ux & front-end experts</p>

            <h3>October 26-28, 2020</h3>

            <button type="button">Learn More</button>
        </div>

        <div class="footer">
            <h1>Take the next step. Join us live or <span>on demand</span></h1>
        </div>
    </div>
    <script type="text/javascript" charset="utf-8">
        function btn_display() {
            let sideBar = document.querySelector(".links-sidebar");
            sideBar.classList.toggle("links-sidebar-flex");
        }
    </script>
</body>

</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How shall I make a single sidebar button for open and close as well?

Answers