纯 CSS 单击右手滑出界面

Question

我正在尝试仅使用 CSS 创建右手 tab/slider，不使用任何类型的 Javascript。我最初的工作是基于此处找到的示例代码：Pure CSS Slide-out Interface 唯一的问题是，它基于悬停，这对小型媒体设备不利。我正在尝试重新编码它以通过点击来工作。我很接近，但它还没有玩好。有什么想法吗？

CSS

<style>
    #slideout {
        /* position: absolute; */
        position: fixed;
        top: 100px;
        right: 0;
        width: 35px;
        padding: 12px 0;
        text-align: center;
        background: #6DAD53;
        color: #fff;
        cursor:pointer;
        -webkit-transition-duration: 0.3s;
        -moz-transition-duration: 0.3s;
        -o-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-border-radius: 5px 0 0 5px;
        -moz-border-radius: 5px 0 0 5px;
        border-radius: 5px 0 0 5px;
    }
    #slideout_inner {
        position: fixed;
        top: 100px;
        right: -250px;
        background: #6DAD53;
        width: 200px;
        padding: 25px;
        height: 130px;
        cursor:auto;
        -webkit-transition-duration: 0.3s;
        -moz-transition-duration: 0.3s;
        -o-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-border-radius: 0 0 0 5px;
        -moz-border-radius: 0 0 0 5px;
        border-radius: 0 0 0 5px;
    }
    #slideout_inner textarea {
        width: 190px;
        height: 100px;
        margin-bottom: 6px;
    }
    #showblock:checked + #slideout{right: 250px;}
    #showblock{display:none;}
</style>

HTML

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" charset="utf-8">
<div id="slideout">
    <input type="checkbox" id="showblock">
    <label id="slideout_tab" for="showblock" title="Admin Slider">
        <i class="fa fa-cogs fa-spin"></i>
    </label>
    <div id="slideout_inner">
        <form>
            <textarea></textarea>
            <input type="submit" value="Post feedback"></input>
        </form>
    </div>
</div>

jsfiddle

Answer 1

+ 选择器是 next sibling selector, not a parent selector which is how it looks like you're trying to use it. Unfortunately, there is no parent or previous sibling selector in CSS

这一行：

#showblock:checked + #slideout{right: 250px;}

实际上没有做任何事情，因为代码正在寻找一个 id 为 slideout 的元素，它是 #showblock 的下一个兄弟元素。您必须更改 HTML 结构才能使用纯 CSS 执行此操作。此外，您的复选框设置为 display:none 以启动，因此用户甚至无法单击它来显示滑出状态。

Answer 2

这是我最后得出的结果。感谢 @skyline3000 帮助我实现 + 选择器仅适用于下一个兄弟，这是帮助我意识到我需要更改输入标签位置的关键。

CSS

<style>
    #slideout {
        /* position: absolute; */
        position: fixed;
        top: 100px;
        right: 0;
        width: 35px;
        -webkit-transition-duration: 0.3s;
        -moz-transition-duration: 0.3s;
        -o-transition-duration: 0.3s;
        transition-duration: 0.3s;
    }
    #slideout_tab {
        position: relative;
        top: 0;
        left: 0;
        padding: 12px 6px 12px 12px;
        text-align: center;
        background: #86B135;
        color: #fff;
        cursor:pointer;
        -webkit-border-radius: 5px 0 0 5px;
        -moz-border-radius: 5px 0 0 5px;
        border-radius: 5px 0 0 5px;
    }
    #slideout_inner {
        position: absolute;
        top: -50px;
        left: 35px;
        background: #86B135;
        width: 220px;
        padding: 15px;
        height: 200px;
        cursor:auto;
        -webkit-border-radius: 5px 0 0 5px;
        -moz-border-radius: 5px 0 0 5px;
        border-radius: 5px 0 0 5px;
    }
    #showblock:checked + #slideout{right: 250px;}
    #showblock{display:none;}
</style>

HTML

<input type="checkbox" id="showblock">
<div id="slideout">
    <label id="slideout_tab" for="showblock" title="Admin Slider">
        <i class="fa fa-cogs fa-spin"></i>
    </label>
    <div id="slideout_inner">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In accumsan gravida arcu, eget elementum tellus condimentum ac. Nullam aliquam sem condimentum, dictum mi id, feugiat ex.
    </div>
</div>

jsfiddle

纯 CSS 单击右手滑出界面

Pure CSS Right-Hand Slide-out Interface on Click

css

click

slide