CSS + Javascript 导航栏折叠（无引导程序）

Question

所以我用纯 HTML/SASS 编写了这个导航栏代码，现在有点面临向导航添加折叠元素的障碍。

我在堆栈上尝试了几个答案，但仍然找不到让我继续前进的答案。

因此，我决定寻求您的宝贵帮助。

所以这就是我现在所拥有的：

html/php

<!-- NAVBAR -->
        <div class="navbar-wrapper">
            <!-- SITE LOGO -->
            <div class="site-branding">
                <a href="<?php echo esc_url(home_url('/')); ?>" rel="home"><img class="logo" src="<?php echo get_template_directory_uri(); ?>/assets/img/logo-white.png" alt="<?php bloginfo('name'); ?>" /></a>
            </div>
            <!-- END SITE LOGO -->

            <!-- SITE NAV -->
            <nav id="site-navigation" class="main-navigation">
                <?php
                // Header Menu - > Defined in functions.php
                wp_nav_menu(
                    array(
                        'theme_location' => 'header-menu',
                        'menu_id' => 'header-nav',
                    )
                );
                ?>
            </nav>
            <!-- END SITE NAV -->
        </div>
<!-- END NAVBAR -->

SCSS

.navbar-wrapper {
    @include flex(center);
    flex-direction: row;
    width: 100%;
    padding: 8.6rem 0 8.6rem;

    .site-branding {
        flex-grow: 1;
    }

    #site-navigation {
        #header-nav {
            @include flex(center);
            list-style: none;
            margin: 0;
            padding: 0;

            li>a {
                text-decoration: none;
                cursor: pointer;
                letter-spacing: 0.014rem;
                padding: 0 2rem;
                color: $white;
                font-size: 1.8rem;
                font-family: $subtitle-font;

                &:hover {
                    color: $color-primary
                }
            }

        }
    }
}

我试图获得的结果如下图所示：

任何帮助都感激不尽！

Answer 1

你想用JS吗？

 <script>
    function openNav() {
      document.getElementById("mySidebar").style.width = "250px";
      document.getElementById("main").style.marginLeft = "250px";
    }
    
    function closeNav() {
      document.getElementById("mySidebar").style.width = "0";
      document.getElementById("main").style.marginLeft= "0";
    }
    </script>

<button class="openbtn" onclick="openNav()">☰ Open Sidebar</button>  
    
    <div id="mySidebar" class="sidebar">
    
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Clients</a>
      <a href="#">Contact</a>
    </div>