css - 如何修复推送侧边栏菜单 CSS？

Question

我有一个推送侧边栏菜单的问题。单击切换按钮时，页面会向右移动。问题是我希望侧边栏菜单位于页面旁边，就像图片中的示例一样。此外，当我向下滚动到页面时，我希望修复侧边栏菜单。我只使用css。

@media (max-width: 575px) {

    .navbar-brand {
        margin-bottom: 0;
    }

    .slideout-sidebar {
        position: fixed;
        top: 0px;
        left: -80%;
        height: 100%;
        background-color: #fff;
        transition: all .15s ease-in-out;
        -webkit-box-shadow: inset -15px 0px 10px -15px rgba(0, 0, 0, 0.75);
        box-shadow: inset -15px 0px 10px -15px rgba(0, 0, 0, 0.75);


    }


    .slideout-sidebar ul li {
        display: block !important;
        cursor: pointer;
        padding: 10px 10px;
        letter-spacing: 1px;
        font-weight: 700;
        font-size: 15px;
        color: #0d6490;
        margin: 0;
       
    }

    .slideout-sidebar button {
        font-size: 1rem !important;
        width: 220px;
        height: 37px;

    }

    .navbar-brand {
        width: 12rem;
        height: 3.2rem;
        margin-left: 50px;
    }

    .container-content {
        position: relative;
        left: 0px;
    }

    #menu-toggle {
        display: none;
    }


    .menu-icon {
        position: fixed;
        top: 5px;
        left: 5px;
        font-size: 35px;
        z-index: 1;
         transition: all.15s ease-in-out;
        padding: 5px 15px;
        background-color: transparent;


    }

    #menu-toggle:checked ~ .slideout-sidebar {
        left: 0;
    

    }

    #menu-toggle:checked + .menu-icon {
        left: 250px;
        

    }

    #menu-toggle:checked ~ .container-content {
        -webkit-transform: translateX(80%);
        transform: translateX(80%);
        transition: all .15s ease-in-out;
    }

<input type="checkbox" id="menu-toggle" class="menu-icon" />
        <label for="menu-toggle" class="menu-icon"><i class="fa fa-bars mt-2"></i></label>

        <div class="container-content">
            <header>
                <div class="header-container d-flex justify-content-around container-fluid">
                    <div class="slideout-sidebar order-1">
                        <ul class="d-md-flex flex-md-column flex-lg-row mt-md-4">
                            <li class="brd mr-md-2 align-self-center menu">МЕНИ</li>
                            <li class=" order-lg-last btn-order"> <button class="btn" type="submit">НАРАЧАЈТЕ
                                    ВЕДНАШ</button></li>
                            <li class="brd border-bottom border-top border-primary d-none ">КОНТАКТИРАЈТЕ НЕ</li>
                            <li class="brd d-none">УСЛОВИ ЗА КОРИСТЕЊЕ</li>
                            <li class=" border-bottom border-primary d-none brd">РЕСТОРАНИ</li>
                            <li class="order-lg-first mr-md-4 text-center brd align-self-center">
                                <a class="">МК</a>
                                <div class="d-inline-block 
         language-line"> | </div>
                                <a class="">EN</a>
                            </li>
                        </ul>
                    </div>

                    <div class="mx-auto mx-lg-0 mt-2">
                        <img src="./images/logo.png" alt="dominoslogo" class="navbar-brand" />
                    </div>

                    <div class="cart mt-2">
                        <img src="images/basket.png" alt="basket" class="d-lg-none">
                        <span class="header-cart-order d-lg-none">0</span>
                    </div>
                </div>

            </header>

标签： cssmenu