|
|||||||||
|
|||||||||
| |||||||||
|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
#1
October 7th, 2004, 12:47 PM
|
|||
|
|||
|
Drop Down Menu's Won't Work!
Alright, I've been working on what should be some simple dropdown menus. I used three seperate files to do so.
dropdown.shtml stylesheet.css drop_down.js Now my first level of the dropdown works I can highlight over "Home" and down drops About F.A.Q. Help Contact Logout There problems lies within my "Athletics" part of the dropdown... from there I want to be able to put the cursor over "Fall" and have the Fall Sports dropdown... same with Winter ect ect. I tried this but soon as I highlight over athletics it automatically shows whats under fall. Any ideas? Below is my code for the .shtml page and then the .js page
|
|
#2
October 7th, 2004, 12:48 PM
|
|||
|
|||
|
.shtml page code
<!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> <title>Horizontal Drop Down Menus</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="drop_down.js"></script> <style type="text/css"> @import "stylesheet.css"; </style> </head> <body> <ul id="nav"> <li><a href="#"><strong>Home</strong></a> <ul> <li><a href="#">About</a></li> <li><a href="#">F.A.Q.</a></li> <li><a href="#">Help</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Logout</a></li> </ul> <li><a href="#"><strong>Athletics</strong></a> <ul> <li><a href="#">Fall</a> <li><a href="#">Winter</a></li> <li><a href="#">Spring</a></li> <li><a href="#">Club</a></li> </ul> <li><a href="#"><strong>Teachers</strong></a> <ul> <li><a href="#">Administrative</a></li> <li><a href="#">Math</a></li> <li><a href="#">English</a></li> <li><a href="#">Science</a></li> <li><a href="#">History</a></li> <li><a href="#">Others</a></li> </ul> <li><a href="#"><strong>Clubs</strong></a> <ul> <li><a href="#">Administrative</a></li> <li><a href="#">Academic Decathalon</a></li> <li><a href="#">Drama</a></li> <li><a href="#">Hugs</a></li> <li><a href="#">Key Club</a></li> <li><a href="#">Latin Club</a></li> <li><a href="#">Newspaper</a></li> <li><a href="#">NHS</a></li> <li><a href="#">Philosophy</a></li> <li><a href="#">Student Council</a></li> <li><a href="#">West G TV</a></li> <li><a href="#">Yearbook</a></li> <li><a href="#">Currio</a></li> </ul> </body> </html>
|
|
#3
October 7th, 2004, 12:49 PM
|
|||
|
|||
|
.js page code
// JavaScript Document
startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } } window.onload=startList;
|
|
#4
October 13th, 2004, 09:39 AM
|
|||
|
|||
|
Up!
|
|
#5
October 13th, 2004, 01:45 PM
|
|||
|
|||
|
Quote:
These sources might help you: http://www.htmldog.com/articles/suckerfish/dropdowns/ http://www.wpdfd.com/editorial/wpd1004news.htm#feature
|
|
| Viewing: Dev Shed Forums > Web Design > Web Design Help > Drop Down Menu's Won't Work! |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
