targetable displayable implemented
parent
160c5ff7a3
commit
e8e4363bea
|
@ -0,0 +1,218 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<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 radioutton"/>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue