learning-area/tools-testing/cross-browser-testing/strategies/hidden-info-panel.html at main · mdn/learning-area · GitHub

Name: learning-area/tools-testing/cross-browser-testing/strategies/hidden-info-panel.html at main · mdn/learning-area · GitHub
Rating: 4.6 (6793 reviews)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<htmllang="en-US">
<head>
<metacharset="utf-8">
<title>Hidden info panel</title>

<style>
html {
font-family: sans-serif;
 }

/* || Checkbox hack to control information box display */

label[for="toggle"] {
font-size:3rem;
position: absolute;
top:4px;
right:5px;
z-index:1;
cursor: pointer;
 }

input[type="checkbox"] {
position: absolute;
top:-100px;
 }

/* information box styling */

aside {
background-color:#a60000;
background:linear-gradient(to top left,#ff0000,#a60000);
color: white;
font-size:1.4em;
text-shadow:2px2px2px black;

width:340px;
height:98%;
padding:10px1%;

position: fixed;
top:0;
right:-370px;

transition:0.6s all;
 }

/* Second part of the checkbox hack — the checked state */

input[type=checkbox]:checked+aside {
right:0px;
 }
</style>

</head>
<body>


<labelfor="toggle">❔</label>
<inputtype="checkbox" id="toggle">
<aside>
<h2>Information</h2>

<p>Some very important information about your app:</p>

<ol>
<li>It has a really cool slide-out information box.</li>
<li>This information box uses a combination of fixed positioning and a CSS transition for the smooth sliding.</li>
<li>It also uses a cool technique called the <ahref="https://css-tricks.com/the-checkbox-hack/">checkbox hack</a>.</li>
<li>This allows you to create a nice "toggle on/toggle off" UI effect without using any JavaScript, which will work in IE9 and above (the smooth transition will work in IE10 and above.)</li>

</ol>

</aside>
</body>
</html>