Pure CSS Right-Hand Slide-out Interface on Click

Question

I'm trying to create a right-hand tab/slider using only CSS, NO Javascript of any kind. My initial work was based on the example code found here: Pure CSS Slide-out Interface The only problem, it's based on hover which is no good for small media devices. I'm trying to recode it to work via clicks instead. I'm close but it's not playing nice yet. Any ideas?

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

score 1 · Answer 1 · edited May 23 '17 at 10:29

1

The + selector is the 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

This line:

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

Doesn't actually do anything because the code is looking for an element with id slideout that is the next sibling from #showblock. You'll have to change your HTML structure to do this with pure CSS. Also, your checkbox is set to display:none to start so there's no way a user can even click on it to show the slideout state.

edited May 23 '17 at 10:29

Community

1
1

answered Sep 05 '16 at 03:37

skyline3000

6,896
1
20
32

I wasn't 100% sure of that but did suspect it, ty for confirming @skyline3000. I'll post my updated solution here when I get one. – Vince Sep 05 '16 at 07:36

score 1 · Accepted Answer · answered Sep 05 '16 at 20:15

Here's what I worked out in the end. Thank you to @skyline3000 for helping me realise the + selector only work on the next sibling, this was key to helping me realize I needed to change the location of my input tag.

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

Pure CSS Right-Hand Slide-out Interface on Click

2 Answers2