-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdropmenu_07.html
121 lines (102 loc) · 2.58 KB
/
dropmenu_07.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Drop Menu: Step 7</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 TAB key works, but another event handler could capture keyboard events for the ARROW keys too.
* 2. After the addClass("open"), chain an on("keyup") with an event handler function(event).
* 3. Within this new handler, use the console.log to trace both (event.keyCode, event.target);
* 4. Test this in a browser and watch the JavaScript console. to see the results.
* 5. When the .drop-menu is NOT open, the "keyup" event handler should probably be disabled.
* 6. An on(event) can be disabled with an off(event). Where would this go?
*
*/
$(".drop-menu").on("mouseover", function() {
$(".drop-menu").addClass("open");
});
$(".drop-menu").on("mouseout", function() {
$(".drop-menu").removeClass("open");
});
</script>
</body>
</html>