JavaScript_test/NavigationBar.html at master · andychiu923/JavaScript_test · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Navigation Bar</title>
	<style type="text/css">
		#container {
			position: relative;
			text-align: left;
			width: 500px;
		}

		#header h1 {
			height: 45px;
			color: #555;
		}

		#content {
			padding: 0 15px 10px 15px;
		}

		p {
			padding: 5px;
		}

		#navigation {
			position: absolute;
			width: inherit;
			top: 0;
			right: 0;
			margin: 0;
		}

		#navigation li{
			text-align: center;
			float: left;
			list-style-type: none;
			height: 20px;
			width: 60px;
			padding: 3px;
			border-right: 1px solid #FFFFFF;
			background-color: #777;
			background-position: center 30px;
			background-repeat: no-repeat;
		}

		#navigation ul {
			padding: 0;
			margin: 0;
		}

		#navigation li a {
			color: #FFFFFF;
		}

		#navigation #home {
			background-image: url('png/home.png');
			background-size: 30px 30px;
		}

		#navigation #dir {
			background-image: url('png/dir.png');
			background-size: 30px 30px;
		}

		#navigation #cart {
			background-image: url('png/cart.png');
			background-size: 30px 30px;
		}

		#navigation #info {
			background-image: url('png/info.png');
			background-size: 30px 30px;
		}
	</style>
	<script src="jquery-3.2.1.min.js"></script>
	<script>
		$(document).ready(function() {
			$('#navigation li').hover(
				function() {
					$(this).animate({
						height: '60px'
					}, 500, 'swing');
				},function() {
					$(this).animate({
						height: '20px'
					}, 500, 'swing');
				});
		});
	</script>
</head>
<body>
	<div id="container">
		<div id="header">
			<h1>Navigation Bar</h1><hr/>
		</div>
		<div id="content">
			<div id="navigation">
				<ul>
					<li id="home"><a href="#">Home</a></li>
					<li id="dir"><a href="#">Index</a></li>
					<li id="cart"><a href="#">Cart</a></li>
					<li id="info"><a href="#">Info</a></li>
				</ul>
			</div>
			<p>jQuery was invented in 2006 by John Resig at BarCamp.</p>
		</div>
	</div>
</body>
</html>