我该如何制作一个侧边栏按钮来打开和关闭？

问题描述 投票：0回答：1

在这里，我正在设计一个网站克隆，我已经完成了大部分部分，我想让这个网站响应不同的设备，所有部分都刚刚完成，但我想要一个用于打开和关闭的侧边栏按钮，例如当用户在手机或平板电脑（小于 770 像素）中打开网站时，应该会出现一个侧边栏按钮，单击该按钮后，导航栏当然会打开，但我希望在打开导航栏时和单击后出现关闭按钮关闭按钮和导航栏消失，菜单按钮应该出现。

这是我的代码，我已经完成了大部分操作，但是声明了 2 个按钮，并且不知道如何执行这个单个导航栏按钮逻辑。

<!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">&#xf0c9;</i></button>

                <button class="side-btn-close" type="button" onclick="btn_close()"><i class="fa-solid">&#xf00d;</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>

这是我得到的图片。

单击菜单按钮时，导航栏会打开，单击十字按钮后会关闭，但我想要这两个按钮都有一个按钮。

javascript html css responsive-design
1个回答
0
投票

一种方法是使用一个切换按钮，该按钮将根据侧面菜单的状态更改其内容。您可以将按钮替换为以下按钮：

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

您可以添加一个事件监听器，您将在其中相应地监视和切换菜单和按钮状态：

<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>

您可以在此处找到完整的解决方案。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.