-
Notifications
You must be signed in to change notification settings - Fork 0
/
two.html
173 lines (153 loc) · 5.05 KB
/
two.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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<!--
Taken from html5boilerplate, set the charset and X-UA-Compatible header.
The compatible header can be returned via the webserver to be a little faster.
-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Example One</title>
<style>
/* Styles would normally be in an external stylesheet (combined and minified)
* I'm putting them here for simplicity sake.
*/
body {
}
/* Corrects `block` display not defined in IE 7/8/9 and Firefox 3. */
nav, footer, header, section { display: block; }
header,
footer {
background-color: #ccc; /* just to make it stand out */
}
nav {
width: 300px;
}
ul {
border: solid 1px #ccc;
padding: 0;
margin: 0;
}
ul li {
position: relative;
border-top: solid 1px #ccc;
list-style: none;
}
ul li:first-child { border: none; }
ul a {
display: block;
color: #fff;
background: #666;
font-weight: bold;
text-decoration: none;
padding: 5px 10px;
}
ul > li > ul {
display: none;
position: absolute;
left: 300px;
top: 0;
min-width: 300px;
}
ul > li > ul > a {
background: #999;
}
/*
* The .no-js class is on the html element on page load and is removed via Moderizr. If javascript is not
* enabled, we use the :hover pseudo class, otherwise, we have javascript (with hover intent) to add a .hover
* class on our elements.
*/
.no-js ul > li:hover > ul,
ul > li.hover > ul {
display: block;
}
</style>
<!--
Modernizr (mainly) is being used to enable html5 elements in older IE.
Html5 semantic tags aren't required, just make for better markup.
Modernizr has to be loaded before the html to make the html5 elements work.
Other javascript would be loaded at the bottom of the markup.
-->
<script src="js/modernizr-2.5.3.min.js"></script>
</head>
<body>
<div id="page">
<header>
<h1>This is a header</h1>
</header>
<div id="content">
<section class="main-content">
<p>
Write HTML, CSS, and JavaScript code to implement a short drop-down menu. The list should consist of 5 menu items; when the user mouses over one of the menu items, a corresponding submenu should pop out to the right of the main menu.
</p>
<p>
Javascript is not required with this example but is used to create a 'hover intent' feature to prevent sloppy mousework from closing the sub menus prematurely.
</p>
<nav>
<ul id="main-nav">
<li>
<a href="#1">1. Menu One</a>
<ul>
<li><a href="#1-1">1.1 Sub Item One</a></li>
<li><a href="#1-2">1.2 Sub Item Two</a></li>
<li><a href="#1-3">1.3 Sub Item Three</a></li>
</ul>
</li>
<li>
<a href="#2">2. Second Item</a>
<ul>
<li><a href="#2-1">2.1 Sub Item One</a></li>
<li><a href="#2-2">2.2 Sub Item Two</a></li>
</ul>
</li>
<li>
<a href="#3">3. Item Three</a>
<ul>
<li><a href="#3-1">3.1 Sub Item One</a></li>
<li><a href="#3-2">3.2 Sub Item Two</a></li>
<li><a href="#3-3">3.3 Sub Item Three</a></li>
<li><a href="#3-4">3.4 Sub Item Four</a></li>
</ul>
</li>
<li>
<a href="#4">4. Fourth Item</a>
<ul>
<li><a href="#4-1">4.1 Sub Item One</a></li>
<li><a href="#4-2">4.2 Sub Item Two</a></li>
<li><a href="#4-3">4.3 Sub Item Three</a></li>
</ul>
</li>
<li>
<a href="#5">5. Item Number Five</a>
<ul>
<li><a href="#2-1">5.1 Sub Item One</a></li>
<li><a href="#2-2">5.2 Sub Item Two</a></li>
</ul>
</li>
</ul>
</nav>
</section>
</div>
<footer>
<p>This is the footer</p>
</footer>
</div>
<!-- Just using jquery/hoverIntent for easier event handling. Other libraries would be just as capable. -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/jquery.hoverIntent.min.js"></script>
<script>
$(function () {
var hoverOn = function () {
$(this).addClass("hover");
};
var hoverOff = function () {
$(this).removeClass("hover");
};
$("#main-nav li").hoverIntent({ over: hoverOn, out: hoverOff, timeout: 250 });
});
</script>
</body>
</html>