-
Notifications
You must be signed in to change notification settings - Fork 0
/
dropmenu_08.html
126 lines (106 loc) · 2.86 KB
/
dropmenu_08.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
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Drop Menu: Step 8</title>
<link rel="stylesheet" href="css/dropmenu.css">
<style type="text/css">
dl.drop-menu
{
position: absolute;
width: 160px;
left: 50%;
margin-top: 30px;
margin-left: -80px;
z-index: 1;
}
dl.drop-menu dt
{
padding: 0;
position: relative;
z-index: 1;
}
dl.drop-menu dd
{
padding: 0;
margin-top: -50px;
transition-property: margin-top;
transition-duration: 200ms;
transition-timing-function: ease-in;
}
dl.drop-menu:hover dd,
dl.drop-menu.open dd
{
margin-top: -1px;
transition-duration: 300ms;
transition-timing-function: ease-out;
}
dl.drop-menu a
{
display: inline-block;
width: inherit;
height: inherit;
padding: 15px 0;
text-decoration: none;
color: #c00;
}
dl.drop-menu a:focus
{
text-decoration: underline;
background: lightgoldenrodyellow;
}
dl.drop-menu a:active
{
background: #ccb;
color: black;
}
dl.drop-menu dt a,
dl.drop-menu dt a:focus,
dl.drop-menu dt a:active
{
color: white;
background: #69c;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<nav>
<dl class="drop-menu">
<dt><a href="#null">Days of the Week</a></dt>
<dd><a href="#null">Monday</a></dd>
<dd><a href="#null">Tuesday</a></dd>
<dd><a href="#null">Wednesday</a></dd>
<dd><a href="#null">Thursday</a></dd>
<dd><a href="#null">Friday</a></dd>
<dd><a href="#null">Saturday</a></dd>
<dd><a href="#null">Sunday</a></dd>
</dl>
</nav>
<section>
<p>A CSS Drop Menu.</p>
</section>
<script>
/* DROP-CSS
*
* 1. The keyCode 38 is the "up arrow" and keyCode 40 is the "down arrow".
* 2. An if (event.keyCode == 40) could perform an expression for just the down arrow.
* 3. The event.target will the the <a> element, so first use closest("li") to get the parent.
* 4. The down arrow show get the next("li"), and then a find("a") will get that menu item's link.
* 5. Finally, the focus() method will set that element to be the one in focus.
* 6. Do the same for if (event.keyCode == 38), except use prev("li") instead of next("li").
* 7. The keyCode 13 is the "enter" key. How could this execute a selection of the focused item?
* 8. How could an on("click") be added to execute a selection with the mouse instead of the keyboard?
*
*/
$(".drop-menu").on("mouseover", function() {
$(".drop-menu").addClass("open").on("keyup", function (event) {
console.log(event.keyCode, event.target);
});
});
$(".drop-menu").on("mouseout", function() {
$(".drop-menu").removeClass("open").off("keyup");
});
</script>
</body>
</html>