Jquery Drop-down Navigation on Mouse over
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml"><head>
3
4
5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6 <title>Animated Drop Down Menu with jQuery</title>
7 <link href="example_files/style.css" rel="stylesheet" type="text/css">
8 <script type="text/javascript" src="example_files/jquery.js"></script>
9 <script type="text/javascript">
10 $(document).ready(function () {
11
12 $('#nav li').hover(
13 function () {
14 //show its submenu
15 //$('ul', this).slideDown(100);
16 $(this).children('ul').slideDown(100);
17
18 },
19 function () {
20 //hide its submenu
21 $(this).children('ul').slideUp(100);
22 }
23 );
24
25 });
26 </script>
27
28 </head><body>
29 <div class="container" style="text-align: center;">
30 <ul id="nav">
31 <li><a href="#" class="menu_head" style="color: #333;padding: 10px;background: #CCC;">Log in to SNL</a>
32 <ul class="menu_body">
33 <li>
34 <div id="login-panel" align="center">
35 <img src="images/login-help.png" border="0" style="padding: 10px 0px 0px 0px;"><br /><br /><br />
36 <span class="nav-text">Please call us at 888-275-2822<br />or e-mail<br />
37 <a href="mailto:support@snl.com">Support@snl.com</a> with questions.</br></br>We're happy to assist you by phone or<br />to arrange an in-person training at<br />your convenience.</span>
38 </div>
39 </li>
40 <li>
41 <div id="login-panel2" align="center">
42 <img src="images/subscriber.png" border="0" style="padding: 10px 0px 0px 0px;"><br /><br /><br /><br />
43 <span class="nav-text">Click <a href="https://www.snl.com/Interactivex/default.aspx?Action=register">here</a> for a 15-day<br />Free Trial to SNL<br /></span>
44 <img src="images/logo-sm.png" border="0" style="padding: 45px 0px 0px 5px;">
45 </div>
46 </li>
47 <li>
48 <div id="login-panel3">
49 <div style="padding: 10px 0px 0px 0px;">
50 <span class="nav-text" >You are not logged in.<br/><br/><br/>
51 E-Mail: <input type="text" name="login" size="20" class="login-textbox"/><br/>
52 Password: <input type="text" name="login" size="20" class="login-textbox"/><br/>
53 <input type="checkbox" name="auto" value="auto" class="login-checkbox" size="10"/>
54 <span style="font-size:8pt;">Enable Auto-Login</span><br/>
55 <img src="images/login.gif" border="0" style="padding: 10px 0px 10px 0px;"><br/>
56 <a href="https://www.snl.com/Interactivex/validate.aspx?action=forgot" style="padding: 10px 0px 10px 0px;">Forgot My Password</a><br/>
57 <a href="https://www.snl.com/interactivex/">Secure Login<img src="images/circle-arrow.png" border="0" style="padding: 10px 0px 0px 5px; margin-top:5px;"></a></span>
58 </div>
59 </div>
60 </li>
61 </ul>
62 <div class="clearAllFloats"></div>
63
64 </li>
65 </ul>
66 <div class="clearAllFloats"></div>
67 </div>
68
69 </body></html>
70
71 <!-- CSS Code -->
72 /* remove the list style */
73 #nav {
74 margin:0;
75 padding:0;
76 list-style:none;
77
78 }
79
80 /* make the LI display inline */
81 /* it's position relative so that position absolute */
82 /* can be used in submenu */
83
84
85 /* this is the parent menu */
86 #nav li a {
87 display:block;
88 width: 100px;
89 padding:8px 5px 0 5px;
90 font-weight:700;
91 height:23px;
92 text-decoration:none;
93 color:#fff;
94 text-align:center;
95 color:#333;
96 }
97
98 #nav li a:hover {
99 color:#fff;
100 }
101
102 /* you can make a different style for default selected value */
103 #nav a.selected {
104 color:#f00;
105 }
106
107 /* submenu, it's hidden by default */
108 #nav ul {
109 position:relative;
110 left:0;
111 display:none;
112 margin:0 0 0 -1px;
113 padding:0;
114 list-style:none;
115 width: 600px;
116 }
117
118 #nav ul li {
119 width:100px;
120 float:left;
121 border-top:1px solid #fff;
122 }
123
124 /* display block will make the link fill the whole area of LI */
125 #nav ul a {
126 display:block;
127 height:15px;
128 padding: 8px 5px;
129 color:#666;
130 }
131
132 #nav ul a:hover {
133 text-decoration:underline;
134 }
135
136 /* fix ie6 small issue */
137 /* we should always avoid using hack like this */
138 /* should put it into separate file : ) */
139 *html #nav ul {
140 margin:0 0 0 -2px;
141 }
Comments
Sign in to leave a comment.
