Transition using radio-buttons - css

Question

I found this tutorial, which introduces a transition that I need for my for my page to slide it down with a single click using radio buttons.
The idea is, that my page's width and height are 100% and each click moves the page "off the canvas" using translateY (found at tyyli.css line 663) just like in the tutorial provided.
After all efforts I can't get it work if I put the first radio button inside st-scroll div. I have to put it directly under site-wrapper to get it work but now is looks horrible, because it wont move along with the page and just hides under st-scroll. Also the dot putted outside st-scroll DIV causes the whole page to be 100px lower than it thould be.
This is the top radio button.
<input type="radio" name="radio-set" id="st-control-1"/>
Try to move this code from the first <secton> to just under site-wrapper like this
<div class="menu">
</div>
/*TRY TO PUT IT JUST BELOW THIS LINE AND SEE THE PROBLEM*/
<input type="radio" name="radio-set" id="st-control-1"/>
<div class="st-scroll">
and you will see the problem. My idea is, that this has something to do with the Z-index, but i might be wrong. I want to place both buttons inside st-scroll.
My site is www.kasperikoski.fi

Answer 1

You can use labels to control radio buttons, so you can put the labels wherever you want and have more control over styling them, as well as hide the radios. However, the radios must be siblings of the element you want to control or one of its ancestors if you want to use the ~ or + combinators.
DEMO
.st-scroll {
padding: 1em;
background-color: tomato;
transition: transform 500ms ease;
}
input[name="radio-set"] {
display: none;
}
label {
display: block;
margin-bottom: 0.5em;
padding: 1em;
background-color: lightgray;
border: solid 1px gray;
border-radius: 0.5em;
}
input[type="radio"] + label {
display: inline-block;
}
#st-control-1 ~ .st-scroll {
transform: translateY(100%);
}
#st-control-1:checked ~ .st-scroll {
transform: translateY(0);
}
<input type="radio" id="st-control-1" name="radio-set" checked="checked" />
<div class="st-scroll">
<label for="st-control-1">I'm a label in .st-scroll but am linked to #st-control-1 so I can control my parent</label>
<input type="radio" id="st-control-2" name="radio-set" />
<label for="st-control-2">I'm a label linked to the other radio</label>
</div>

Answer 2

The reason that the links only work outside the div is because the effect is driven by the CSS: #st-control-#:checked ~ .st-scroll which means it looks for a sibling DOM element with .st-scroll class. You need to either have it on the outside of the scroll element or rely on javascript to trigger the same transforms by adding/removing certain classes.
I could see it being done various ways, although the fastest (me being lazy and all) would be something like:
In html:
<input type="radio" name="radio-set" id="st-control-1" value="scroll-1">
... further down
<input type="radio" name="radio-set" id="st-control-2" value="scroll-2">
In a script including jquery to save time...:
$(document).ready(function(){
var scroll = $('.st-scroll');
$('input[name="radio-set"]').click(function() {
var which = $(this).attr('value');
var prev = scroll.data('current');
if(prev) scroll.removeClass(prev);
scroll.addClass(which)
.data('current',which);
});
});
And finally the css:
.scroll-1 {
transform: translateY(-100%);
}
.scroll-2 {
transform: translateY(0);
}