-
Notifications
You must be signed in to change notification settings - Fork 12
Expand file tree
/
Copy pathdemo.html
More file actions
133 lines (114 loc) · 7.77 KB
/
demo.html
File metadata and controls
133 lines (114 loc) · 7.77 KB
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery.naviDropDown</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="jquery.naviDropDown.js"></script>
<script type="text/javascript">
$(function(){
$('#navigation_horiz').naviDropDown({
dropDownWidth: '300px'
});
$('#navigation_vert').naviDropDown({
dropDownWidth: '300px',
orientation: 'vertical'
});
});
</script>
<style type="text/css">
* {margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; line-height:16px}
.container {margin:10px auto; width:950px; height:300px; background:#eee; padding:50px 0 0 0}
/* ----------------------------------------------------- */
/* navigation styles - BEGIN */
/* style for horizontal nav */
#navigation_horiz {width:820px; clear:both; padding:0 0 0 0; margin:0 auto}
#navigation_horiz ul {height:50px; display:block}
#navigation_horiz ul li {display:block; float:left; width:200px; height:50px; background:#999; margin:0 1px 0 0; position:relative}
#navigation_horiz ul li a.navlink {display:block; width:200px; height:30px; padding: 20px 0 0 0; text-align:center; color:#fff; text-decoration:none}
#navigation_horiz .dropdown {position:absolute; padding:20px; border-bottom-right-radius:10px; border-bottom-left-radius:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-bottomleft:10px}
/* style for vertical nav */
#navigation_vert {width:820px; clear:both; padding:0 0 0 0; margin:0 auto}
#navigation_vert ul {height:50px; display:block}
#navigation_vert ul li {display:block; width:200px; height:50px; background:#999; margin:0 0 1px 0; position:relative}
#navigation_vert ul li a.navlink {display:block; *display:inline-block; width:200px; height:30px; padding: 20px 0 0 0; text-align:center; color:#fff; text-decoration:none}
#navigation_vert .dropdown {position:absolute; padding:20px; border-bottom-right-radius:10px; border-top-right-radius:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-topright:10px}
/* style for each drop down - horizontal */
#navigation_horiz ul li #dropdown_one {background:#ccc; color:#fff}
#navigation_horiz ul li #dropdown_one a {color:red}
#navigation_horiz ul li #dropdown_two {background:#ccc; color:#fff}
#navigation_horiz ul li #dropdown_two a {color:black}
#navigation_horiz ul li #dropdown_three {background:#ccc; color:#fff}
#navigation_horiz ul li #dropdown_three a {color:gray}
/* style for each drop down - vertical */
#navigation_vert ul li #dropdown_four {background:#333; color:#fff}
#navigation_vert ul li #dropdown_four a {color:red}
#navigation_vert ul li #dropdown_five {background:#666; color:#fff}
#navigation_vert ul li #dropdown_five a {color:black}
#navigation_vert ul li #dropdown_six {background:#777; color:#fff}
#navigation_vert ul li #dropdown_six a {color:orange}
/* navigation styles - END */
/* ----------------------------------------------------- */
</style>
</head>
<body>
<div class="container">
<div id="navigation_horiz">
<ul>
<li>
<a href="" class="navlink">List Item</a>
<div class="dropdown" id="dropdown_one">
<p><a href="#">This is a Link</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam, a vulputate neque. Morbi sit amet nunc id quam mollis aliquet. Donec sed massa justo, ut congue enim. Praesent lobortis viverra dolor commodo euismod. </p>
</div><!-- .dropdown_menu -->
</li>
<li>
<a href="" class="navlink">List Item</a>
<div class="dropdown" id="dropdown_two">
<p><a href="#">This is a Link</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam, a vulputate neque. Morbi sit amet nunc id quam mollis aliquet. Donec sed massa justo, ut congue enim. Praesent lobortis viverra dolor commodo euismod. </p>
</div><!-- .dropdown_menu -->
</li>
<li><a href="" class="navlink">List Item</a></li>
<li>
<a href="" class="navlink">List Item</a>
<div class="dropdown" id="dropdown_three">
<p><a href="#">This is a Link</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam, a vulputate neque. Morbi sit amet nunc id quam mollis aliquet. Donec sed massa justo, ut congue enim. Praesent lobortis viverra dolor commodo euismod. </p>
</div><!-- .dropdown_menu -->
</li>
</ul>
</div><!-- #navigation_horiz -->
</div><!-- .container -->
<div class="container">
<div id="navigation_vert">
<ul>
<li>
<a href="" class="navlink">List Item</a>
<div class="dropdown" id="dropdown_four">
<p><a href="#">This is a Link</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam, a vulputate neque. Morbi sit amet nunc id quam mollis aliquet. Donec sed massa justo, ut congue enim. Praesent lobortis viverra dolor commodo euismod. </p>
</div><!-- .dropdown_menu -->
</li>
<li>
<a href="" class="navlink">List Item</a>
<div class="dropdown" id="dropdown_five">
<p><a href="#">This is a Link</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam, a vulputate neque. Morbi sit amet nunc id quam mollis aliquet. Donec sed massa justo, ut congue enim. Praesent lobortis viverra dolor commodo euismod. </p>
</div><!-- .dropdown_menu -->
</li>
<li><a href="" class="navlink">List Item</a></li>
<li>
<a href="" class="navlink">List Item</a>
<div class="dropdown" id="dropdown_six">
<p><a href="#">This is a Link</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit sodales justo, id fringilla eros dapibus vitae. Morbi molestie enim diam, a vulputate neque. Morbi sit amet nunc id quam mollis aliquet. Donec sed massa justo, ut congue enim. Praesent lobortis viverra dolor commodo euismod. </p>
</div><!-- .dropdown_menu -->
</li>
</ul>
</div><!-- #navigation_vert -->
</div><!-- .container -->
</body>
</html>