-
Notifications
You must be signed in to change notification settings - Fork 2
/
8-final.html
117 lines (115 loc) · 3.12 KB
/
8-final.html
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🗂</text></svg>">
<title>Full list click example</title>
<link rel="stylesheet" href="global-styles.css">
<style>
.fullclick {
margin: 1em 0;
padding: 0;
max-width: 30em;
}
.fullclick li {
list-style: none;
margin: 1em 0;
padding: 20px 10px;
background: #2b2b2b;
position: relative;
transition: 400ms;
}
.todelete {
opacity: 0;
}
.fullclick p a {
color: lime;
z-index: 2;
position: relative;
}
.fullclick a.main {
color: #85baff;
text-align: right;
display: block;
z-index: 1;
}
.fullclick li a.main::after {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
content: ' ';
}
.fullclick:hover a.main,
.fullclick:focus-within a.main {
color: #cfe4ff;
}
.fullclick li button {
z-index: 2;
position: absolute;
top: 5px;
right: 5px;
opacity: 0;
transition: 400ms;
border: none;
color: #fff;
background: #333;
}
.fullclick li:hover button,
.fullclick li:focus-within button {
opacity: 1;
}
.fullclick li:hover, .fullclick li:focus-within {
background:#484848;
box-shadow: 0px 3px 6px #000;
}
nav {display:none}
</style>
</head>
<body>
<h1>Animals that make me happy</h1>
<ul class="fullclick">
<li>
<h2>Dogs</h2>
<p>
Dogs are excellent, and good people. If want to browse dogs
by breed, check <a href="https://codepo8.github.io/dog-browser/">
The dog browser</a>. Almost all dogs are good boys and girls.
</p>
<a href="dogs.html" class="main">More dog news</a>
<button title="click to close" aria-label="click to close">x</button>
</li>
<li>
<h2>Wombats</h2>
<p>
Wombats are cute as buttons and digging machines. They look always
chill and jolly, but aren't a good idea to keep in the house.
</p>
<a href="wombat.html" class="main">More wombat info</a>
<button title="click to close" aria-label="click to close">x</button>
</li>
</ul>
<script>
let list = document.querySelector('.fullclick');
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches){
list.addEventListener('click', e => {
if (e.target.nodeName === 'BUTTON') {
e.target.parentNode.remove();
}
});
} else {
list.addEventListener('click', e => {
if (e.target.nodeName === 'BUTTON') {
e.target.parentNode.style.transition = '1s';
e.target.parentNode.className = 'todelete';
}
});
list.addEventListener('transitionend', e => {
if(e.target.classList.contains('todelete')){
e.target.remove();
}
});
}
</script>
<script src="donav.js"></script>
</body>
</html>