纯 CSS 推送/滑动菜单 - 单击静态按钮时关闭答案

【问题标题】：Pure CSS Push/ Slide Menu - Close on Static Button Click纯 CSS 推送/滑动菜单 - 单击静态按钮时关闭
【发布时间】：2020-10-13 22:00:56
【问题描述】：

我正在尝试创建一个简单的纯 CSS 推送菜单。单击“设置”图标时，菜单会打开和关闭。这已经奏效了。但是，我希望将图标移动到灰色 div 内，并在单击时激活菜单。目前，设置点击仅在图标位于当前位置时有效。如果我将它移动到 div 内，什么也不会发生。

另外，我想通过单击菜单内的设置文本或左 V 形图标来关闭菜单。我尝试创建第二个菜单复选框和相关样式，如下所示；

#menu-toggle-2:checked + .menu-icon {
    right: 30%;
}

但这样做只会将设置 div 移到菜单内；它并没有关闭菜单本身。

这是页面和菜单的html代码；

    <head>
<style>
    .content-container {
    z-index: 0;
    padding: 20px;
    overflow: auto;
    transition: all 300ms ease-in-out;            
    }        
    
    .slideout-sidebar {
    position: fixed;
    right: -28%;
    z-index: 2;
    width: 28%;
    height: 100%;
    padding: 20px;
    transition: all 300ms ease-in-out;
    }
    
    .slideout-sidebar ul {
    list-style: none;
    }
    
    .slideout-sidebar ul li {
    cursor: pointer;
    padding: 18px 0;
    border-bottom: 1px solid #D1D4D7;
    }
    
    #menu-toggle {
    display: none;
    }
    
    .menu-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
    transition: all 300ms ease-in-out;
    cursor: pointer;
    }
    
    #menu-toggle:checked ~ .slideout-sidebar {
    right: 0px;
    }
    
    #menu-toggle:checked + .menu-icon {
    right: 30%;
    }
    
    #menu-toggle:checked ~ .content-container {
    padding-right: 28%;
    }
</style>
</head>

身体；

    <body>
<input type="checkbox" id="menu-toggle" />
<label for="menu-toggle" class="menu-icon">
<img class="icon" src="images2/ic-of-settings-gy.svg" style="width:33px;height:33px;" />
</label>    
<div id="divMenu" class="slideout-sidebar">
<ul>
<li>
<img class="icon" src="images2/ic-of-chevron-left-gy.svg" />
<span style="padding-left:10px">Settings</span>                
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</div>
<div class="content-container">
<div class="container">
<div style="width:780px;height:800px;background-color:grey;">
</div>
</div>
</div>
</body>

这是设置菜单项的图像，我想在单击时关闭菜单；

提前致谢

【问题讨论】：

标签： html css slide

【解决方案1】：

设法弄清楚，如果有人需要信息。诀窍是在页面上粘贴一个隐藏的输入，并将第二个输入粘贴在您想要的位置，并使用相同的 ID。代码如下。

<style>
    #menu-toggle {
        display: none;
    }
    .menu-icon {
        position: absolute;
        top: 1.25rem;
        right: 1.25rem;
        z-index: 2;
        cursor: pointer;
    }
    content {
        -ms-overflow-style: none;
        -moz-transition: all 200ms ease-in;
        -webkit-transition: all 200ms ease-in;
        -o-transition: all 200ms ease-in;
        transition: all 200ms ease-in;
        overflow-y: auto;
    }
    nav {
        position: fixed;
        right: 0;
        width: 28%;
        height: 100%;
        margin: 0 -28% 0 0;
        -moz-transition: all 200ms ease-in;
        -webkit-transition: all 200ms ease-in;
        -o-transition: all 200ms ease-in;
        transition: all 200ms ease-in;
    }

    nav ul {
        height: 100%;
        list-style: none;
        padding: 0;
    }

    nav li {
        padding: 1.125rem 0 1.125rem 0;
        border-bottom: 0.0625rem solid rgba(209, 212, 215, 1);
    }

    label {
        display: block;
        cursor: pointer;
        -moz-transition: all 200ms ease-in;
        -webkit-transition: all 200ms ease-in;
        -o-transition: all 200ms ease-in;
        transition: all 200ms ease-in;
        z-index: 500;
    }
    input[type="checkbox"] {
        display: none;
    }

    input[type="checkbox"]:checked ~ nav {
        margin: 0;
    }

    input[type="checkbox"]:checked ~ content {
        -webkit-transform: translate3d(-28%, 0, 0);
        -moz-transform: translate3d(-28%, 0, 0);
        -o-transform: translate3d(-28%, 0, 0);
        transform: translate3d(-28%, 0, 0);
    }
</style>

<input type="checkbox" id="menu-toggle" />
<nav>
    <ul>
        <li class="font-weight-bold settings-list-item">
            <label for="menu-toggle" class="list-spacer">
                <img src="images/chevron-left.png" />
                <span><b class="ng-tns-c1354-3 font-15 padding-left-20">Settings</b></span>
            </label>
        </li>
        <li class="font-weight-bold settings-list-item">
            Home
        </li>
        <li class="list-spacer">
            About
        </li>
        <li class="list-spacer">
            Contact
        </li>           
    </ul>
</nav>  
<content>
    <div style="width:780px;height:800px;background-color:grey;">
        <input type="checkbox" id="menu-toggle" />
        <label for="menu-toggle" class="nav-icon margin-top-35">
            <img class="settings-icon" src="images/settings.png" />
        </label>
    </div>
</content>

【讨论】：