221 lines
9.0 KiB
HTML
221 lines
9.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>CSS Targetable Displayable</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
<style>
|
|
/* +-----------------------------------------------------------------------+ *\
|
|
|* | targetable displayable | *|
|
|
|* | (c) 2014 Michał "rysiek" Woźniak <rysiek@hackerspace.pl> | *|
|
|
\* +-----------------------------------------------------------------------+ */
|
|
/*
|
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
of this software and associated documentation files (the "Software"), to deal
|
|
in the Software without restriction, including without limitation the rights
|
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
copies of the Software, and to permit persons to whom the Software is
|
|
furnished to do so, subject to the following conditions:
|
|
|
|
The above copyright notice and this permission notice shall be included in all
|
|
copies or substantial portions of the Software.
|
|
|
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
SOFTWARE.
|
|
*/
|
|
/*
|
|
Transitions are not really important here, you can remove them, and the mechanics
|
|
will be the same, the sections will just show/hide immediately.
|
|
|
|
Of course you can use any other propert/transition mix (for example,
|
|
visibility:hidden works quite well).
|
|
*/
|
|
|
|
/* by default, in a .displayable-container do not display direct-descending .displayable */
|
|
.displayable-container > .displayable {
|
|
max-height:0px;
|
|
overflow:hidden;
|
|
-moz-transition:max-height ease-out 0.5s;
|
|
-webkit-transition:max-height ease-out 0.5s;
|
|
transition:max-height ease-out 0.5s;
|
|
opacity:0.5; /* BUG? animating/transitioning on opacity makes elemets move just a tiny bit for the duration of the transition; doesn't look good */
|
|
}
|
|
/* a hidden control checkbox should be hidden */
|
|
.displayable-control.hide {
|
|
display:none;
|
|
}
|
|
/* display the section once the checkbox is :checked */
|
|
.displayable-container > .displayable-control:checked ~ .displayable {
|
|
max-height:500px;
|
|
opacity:1;
|
|
}
|
|
/* targetables */
|
|
.targetable {
|
|
display:none;
|
|
}
|
|
|
|
/* yeah, these have to be explicit */
|
|
.targetable#displayable-targetable-1:target ~ #displayable-control-none:checked ~ .displayable-container > #displayable-control-1 ~ .displayable,
|
|
.targetable#displayable-targetable-2:target ~ #displayable-control-none:checked ~ .displayable-container > #displayable-control-2 ~ .displayable,
|
|
.targetable#displayable-targetable-3:target ~ #displayable-control-none:checked ~ .displayable-container > #displayable-control-3 ~ .displayable {
|
|
max-height:500px;
|
|
opacity:1;
|
|
}
|
|
|
|
|
|
/*
|
|
* making it easier to understand what is going on
|
|
*/
|
|
#debug-mode {
|
|
display:none;
|
|
}
|
|
label[for="debug-mode"] {
|
|
display:block;
|
|
background:#fdd;
|
|
border: solid 1px #800;
|
|
border-radius:3px;
|
|
}
|
|
label[for="debug-mode"]:before {
|
|
content:"Enable ";
|
|
}
|
|
label[for="debug-mode"]:after {
|
|
content:" and see what's going on";
|
|
}
|
|
#debug-mode:checked {
|
|
display:block;
|
|
background:#fdd;
|
|
border: solid 1px #800;
|
|
border-radius:3px;
|
|
}
|
|
#debug-mode:checked + label[for="debug-mode"]:before {
|
|
content:"Disable ";
|
|
}
|
|
#debug-mode:checked + label[for="debug-mode"]:after {
|
|
content:"";
|
|
}
|
|
#debug-mode:checked ~ .targetable {
|
|
display:block;
|
|
opacity:0.5;
|
|
}
|
|
#debug-mode:checked ~ .targetable:target {
|
|
background:#dfd;
|
|
color:#080;
|
|
opacity:1;
|
|
}
|
|
#debug-mode:checked ~ .targetable:target {
|
|
content: " targeted!";
|
|
}
|
|
#debug-mode:checked ~ .displayable-control,
|
|
#debug-mode:checked ~ * .displayable-control {
|
|
display:block !important;
|
|
opacity:0.5;
|
|
}
|
|
#debug-mode:checked ~ .displayable-control:checked,
|
|
#debug-mode:checked ~ * .displayable-control:checked {
|
|
opacity:1;
|
|
}
|
|
|
|
|
|
/* just some styling, irrelevant to the mechanics of the example */
|
|
body {
|
|
font-family:sans-serif;
|
|
}
|
|
.menu {
|
|
background:#ddf;
|
|
color:#008;
|
|
}
|
|
.menu label {
|
|
display:block;
|
|
}
|
|
label {
|
|
cursor:pointer;
|
|
}
|
|
.displayable {
|
|
background:rgba(0, 0, 0, 0.15);
|
|
margin:0.5em;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- debug mode checkbox -->
|
|
<input type="checkbox" name="debug-mode" id="debug-mode" title="Debug mode checkbox"/>
|
|
<label for="debug-mode">debug mode</label>
|
|
|
|
<!-- menu, detached from the sections themselves -->
|
|
<div class="menu">
|
|
<label for="displayable-control-1">Section #1</label>
|
|
<label for="displayable-control-2">Section #2</label>
|
|
<label for="displayable-control-3">Section #3</label>
|
|
</div>
|
|
|
|
<!-- targetables (only valid and working for sections, no way to make them work for subsections) -->
|
|
<div class="targetable" id="displayable-targetable-1">Targetable #1</div>
|
|
<div class="targetable" id="displayable-targetable-2">Targetable #2</div>
|
|
<div class="targetable" id="displayable-targetable-3">Targetable #3</div>
|
|
|
|
<!-- this one is needed for handling :target -->
|
|
<input type="radio" class="displayable-control hide" name="section" id="displayable-control-none" checked="checked" title="Non-section radiobutton (default)"/>
|
|
|
|
<!-- section #1 -->
|
|
<div class="displayable-container">
|
|
<input type="radio" class="displayable-control hide" name="section" id="displayable-control-1" title="Section #1 radiobutton"/>
|
|
<div class="displayable">
|
|
Displayable section #1 contents, no subsections
|
|
</div>
|
|
</div>
|
|
|
|
<!-- section #2 -->
|
|
<div class="displayable-container">
|
|
<input type="radio" class="displayable-control hide" name="section" id="displayable-control-2" title="Section #2 radiobutton"/>
|
|
<div class="displayable">
|
|
Displayable section #2 contents, 2 subsections
|
|
<ul>
|
|
<li><label for="displayable-control-2-1">Section #2, subsection #1</label></li>
|
|
<li><label for="displayable-control-2-2">Section #2, subsection #2</label></li>
|
|
</ul>
|
|
|
|
Some more content.
|
|
<hr/>
|
|
|
|
<!-- subsection #1 -->
|
|
<label for="displayable-control-2-1">Section #2, subsection #1, section-local label</label>
|
|
<div class="displayable-container">
|
|
<input type="checkbox" class="displayable-control hide" name="subsection-2-1" id="displayable-control-2-1" title="Section #2 subsection #1 checkbox"/>
|
|
<div class="displayable">
|
|
Displayable section #2, subsection #1
|
|
</div>
|
|
</div>
|
|
|
|
<!-- subsection #2 -->
|
|
<label for="displayable-control-2-2">Section #2, subsection #2, section-local label</label>
|
|
<div class="displayable-container">
|
|
<input type="checkbox" class="displayable-control hide" name="subsection-2-2" id="displayable-control-2-2" title="Section #2 subsection #1 checkbox"/>
|
|
<div class="displayable">
|
|
Displayable section #2, subsection #2
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- section #3 -->
|
|
<div class="displayable-container">
|
|
<input type="radio" class="displayable-control hide" name="section" id="displayable-control-3" title="Section #3 radiobutton"/>
|
|
<div class="displayable">
|
|
Displayable section #3 contents
|
|
</div>
|
|
</div>
|
|
|
|
<!-- targetable links -->
|
|
<p>Target section links. Note that after using the checkbox/radiobutton-based navigation these do not work as on-site navigation — they are only meant to provide a way of linking to a particular section directly, not the on-site navigation, though.</p>
|
|
<ul>
|
|
<li><a href="#displayable-targetable-1" title="Section #1 target link">Target Section #1</a></li>
|
|
<li><a href="#displayable-targetable-2" title="Section #2 target link">Target Section #2</a></li>
|
|
<li><a href="#displayable-targetable-3" title="Section #3 target link">Target Section #3</a></li>
|
|
</ul>
|
|
<p>This is one if the <a href="http://rys.io/en/123/">neat hacss</a>. Code is <a href="https://code.hackerspace.pl/rysiek/neat-hacss/">here</a>.</p>
|
|
</body>
|
|
</html> |