Howdy_McGee Posted July 16, 2010 Share Posted July 16, 2010 So I found this simple drop down menu script online a few days ago, came with CSS and all - which would be perfect but as soon as I add divs, so I can put categories in a single drop down menu, the whole thing kinda messes up. When I add a div it like deletes them from the menu. I don't know if this is a HTML problem, CSS problem, or javascript problem. Here's the java script: // Copyright 2006-2007 javascript-array.comvar timeout = 0;var closetimer = 0;var ddmenuitem = 0;// open hidden layerfunction mopen(id){ // cancel close timer mcancelclosetime(); // close old layer if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; // get new layer and show it ddmenuitem = document.getElementById(id); ddmenuitem.style.visibility = 'visible';}// close showed layerfunction mclose(){ if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';}// go close timerfunction mclosetime(){ closetimer = window.setTimeout(mclose, timeout);}// cancel close timerfunction mcancelclosetime(){ if(closetimer) { window.clearTimeout(closetimer); }}// close layer when click-outdocument.onclick = mclose(); HTML: <ul id="sddm"> <li> <a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">about us</a> <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="overview.html" alt="Company Overview">Overview</a> <a href="future.html" alt="Future">Future</a> <a href="team.html" alt="Meet The Team">Meet The Team</a> <a href="liam.html" alt="Meet Liam">Meet Liam</a> <a href="services.html" alt="Services Offered">Services Offered</a> <a href="whychoose.html" alt="Why Choose?">Why Choose?</a> <a href="process.html" alt="The Process">The Process</a> <a href="" alt="Download Brochure">Download Brochure</a> <a href="testimonials.html" alt="Testimonials">Testimonials</a> <a href="careers.html" alt="Careers">Careers</a> </div> </li></ul> and the CSS: #sddm{ margin: 0; padding: 0; z-index: 30} #sddm li{ margin: 0; padding: 0; list-style: none; float: left; font: bold 11px arial}#sddm li a{ display: block; padding: 10px 41px; text-align: center; color: #00a94f; font-size: 16px; text-decoration: none}#sddm li a:hover{ background-color: #00a94f; color: #fff;}#sddm div{ position: absolute; visibility: hidden; margin: 0; padding: 0; border: 3px solid #00a94f; z-index: 1000;}#sddm div a { position: relative; display: block; margin: 0; padding: 5px 10px; text-align: left; text-decoration: none; background-color: #fff; color: #000; font: 11px arial bold; } #sddm div a:hover { background: #00a94f; color: #FFF} #sddm a { position: relative; display: block; margin: 0; padding: 5px 10px; text-align: left; text-decoration: none; background-color: #fff; color: #000; font: 11px arial bold; } #sddm #floats a:hover { background: #00a94f; color: #FFF} #m1{ width: 145px;} Link to comment Share on other sites More sharing options...
xjx424 Posted July 16, 2010 Share Posted July 16, 2010 are you saying that the links in the drop down menu disappear? Link to comment Share on other sites More sharing options...
Howdy_McGee Posted July 16, 2010 Author Share Posted July 16, 2010 Yeah, if i put a link from the drop down menu inside of a div (so i can float it and make into categories) it disappears completely. I don't understand why. Link to comment Share on other sites More sharing options...
xjx424 Posted July 16, 2010 Share Posted July 16, 2010 Try this. As far as I can tell it was working before. I just cleaned it up a little and added a few semi-colons. Also added another li to test <html><head><style>#sddm { margin: 0; padding: 0; z-index: 30;}#sddm li { margin: 0; padding: 0; width:160px; list-style: none; float: left; font: bold 11px arial;}#sddm li a { display: block; padding: 10px 41px; text-align: center; color: #00a94f; font-size: 16px; text-decoration: none;}#sddm li a:hover { background-color: #00a94f; color: #fff;}#sddm div { position: absolute; visibility: hidden; margin: 0; padding: 0; border: 3px solid #00a94f; z-index: 1000;}#sddm div a { position: relative; display: block; margin: 0; padding: 5px 10px; text-align: left; text-decoration: none; background-color: #fff; color: #000; font: 11px arial bold;}#sddm div a:hover { background: #00a94f; color: #FFF;}#sddm a { position: relative; display: block; margin: 0; padding: 5px 10px; text-align: left; text-decoration: none; background-color: #fff; color: #000; font: 11px arial bold;}#sddm #floats a:hover { background: #00a94f; color: #FFF;}#m1 { width: 154px;}#m2 { width: 154px;}</style><script type="text/javascript">var timeout = 0;var closetimer = 0;var ddmenuitem = 0;// open hidden layerfunction mopen(id){ // cancel close timer mcancelclosetime(); // close old layer if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; // get new layer and show it ddmenuitem = document.getElementById(id); ddmenuitem.style.visibility = 'visible';}// close showed layerfunction mclose(){ if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';}// go close timerfunction mclosetime(){ closetimer = window.setTimeout(mclose, timeout);}// cancel close timerfunction mcancelclosetime(){ if(closetimer) { window.clearTimeout(closetimer); }}// close layer when click-outdocument.onclick = mclose();</script></head><body><ul id="sddm"> <li> <a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">about us</a> <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="overview.html" alt="Company Overview">Overview</a> <a href="future.html" alt="Future">Future</a> <a href="team.html" alt="Meet The Team">Meet The Team</a> <a href="liam.html" alt="Meet Liam">Meet Liam</a> <a href="services.html" alt="Services Offered">Services Offered</a> <a href="whychoose.html" alt="Why Choose?">Why Choose?</a> <a href="process.html" alt="The Process">The Process</a> <a href="" alt="Download Brochure">Download Brochure</a> <a href="testimonials.html" alt="Testimonials">Testimonials</a> <a href="careers.html" alt="Careers">Careers</a> </div> </li> <li> <a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">about them</a> <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="overview.html" alt="Company Overview">Overview</a> <a href="future.html" alt="Future">Future</a> <a href="team.html" alt="Meet The Team">Meet The Team</a> <a href="liam.html" alt="Meet Liam">Meet Liam</a> <a href="services.html" alt="Services Offered">Services Offered</a> <a href="whychoose.html" alt="Why Choose?">Why Choose?</a> <a href="process.html" alt="The Process">The Process</a> <a href="" alt="Download Brochure">Download Brochure</a> <a href="testimonials.html" alt="Testimonials">Testimonials</a> <a href="careers.html" alt="Careers">Careers</a> </div> </li></ul></body> Link to comment Share on other sites More sharing options...
Howdy_McGee Posted July 16, 2010 Author Share Posted July 16, 2010 Nope, I incased my links (overview - careers) and they all disappeared. I think it's in the java script:ddmenuitem = document.getElementById(id);like how does it know what ID to get? If I add another div and give it a id then maybe its getting confused, im not sure? Link to comment Share on other sites More sharing options...
thescientist Posted July 16, 2010 Share Posted July 16, 2010 the function knows which ID to get because its gets passed to it during the function call. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 16, 2010 Share Posted July 16, 2010 are you sure you are copying the correct content for new menu, because i just copied a menu over and it works fine for me. <!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=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style>#sddm { margin: 0; padding: 0; z-index: 30;}#sddm li { margin: 0; padding: 0; width:160px; list-style: none; float: left; font: bold 11px arial;}#sddm li a { display: block; padding: 10px 41px; text-align: center; color: #00a94f; font-size: 16px; text-decoration: none;}#sddm li a:hover { background-color: #00a94f; color: #fff;}#sddm div { position: absolute; visibility: hidden; margin: 0; padding: 0; border: 3px solid #00a94f; z-index: 1000; width: 154px;}#sddm div a { position: relative; display: block; margin: 0; padding: 5px 10px; text-align: left; text-decoration: none; background-color: #fff; color: #000; font: 11px arial bold;}#sddm div a:hover { background: #00a94f; color: #FFF;}#sddm a { position: relative; display: block; margin: 0; padding: 5px 10px; text-align: left; text-decoration: none; background-color: #fff; color: #000; font: 11px arial bold;}#sddm #floats a:hover { background: #00a94f; color: #FFF;}/* NOTE: this is not required, use width in #sddm div instead.#m1 { width: 154px;}#m2 { width: 154px;}*/</style><script type="text/javascript">var timeout = 0;var closetimer = 0;var ddmenuitem = 0;// open hidden layerfunction mopen(id){ // cancel close timer mcancelclosetime(); // close old layer if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; // get new layer and show it ddmenuitem = document.getElementById(id); ddmenuitem.style.visibility = 'visible';}// close showed layerfunction mclose(){ if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';}// go close timerfunction mclosetime(){ closetimer = window.setTimeout(mclose, timeout);}// cancel close timerfunction mcancelclosetime(){ if(closetimer) { window.clearTimeout(closetimer); }}// close layer when click-outdocument.onclick = mclose();</script></head><body><ul id="sddm"><!--start link1--> <li> <a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">about us</a> <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="overview.html" alt="Company Overview">Overview</a> <a href="future.html" alt="Future">Future</a> <a href="team.html" alt="Meet The Team">Meet The Team</a> <a href="liam.html" alt="Meet Liam">Meet Liam</a> <a href="services.html" alt="Services Offered">Services Offered</a> <a href="whychoose.html" alt="Why Choose?">Why Choose?</a> <a href="process.html" alt="The Process">The Process</a> <a href="" alt="Download Brochure">Download Brochure</a> <a href="testimonials.html" alt="Testimonials">Testimonials</a> <a href="careers.html" alt="Careers">Careers</a> </div> </li> <!--end link1--> <!--start link2--> <li> <a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">about them</a> <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="overview.html" alt="Company Overview">Overview</a> <a href="future.html" alt="Future">Future</a> <a href="team.html" alt="Meet The Team">Meet The Team</a> <a href="liam.html" alt="Meet Liam">Meet Liam</a> <a href="services.html" alt="Services Offered">Services Offered</a> <a href="whychoose.html" alt="Why Choose?">Why Choose?</a> <a href="process.html" alt="The Process">The Process</a> <a href="" alt="Download Brochure">Download Brochure</a> <a href="testimonials.html" alt="Testimonials">Testimonials</a> <a href="careers.html" alt="Careers">Careers</a> </div> </li> <!--end link2--> <!--start link3--> <li> <a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">about them</a> <div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="overview.html" alt="Company Overview">Overview</a> <a href="future.html" alt="Future">Future</a> <a href="team.html" alt="Meet The Team">Meet The Team</a> <a href="liam.html" alt="Meet Liam">Meet Liam</a> <a href="services.html" alt="Services Offered">Services Offered</a> <a href="whychoose.html" alt="Why Choose?">Why Choose?</a> <a href="process.html" alt="The Process">The Process</a> <a href="" alt="Download Brochure">Download Brochure</a> <a href="testimonials.html" alt="Testimonials">Testimonials</a> <a href="careers.html" alt="Careers">Careers</a> </div> </li> <!--end link3--> </ul></body> Link to comment Share on other sites More sharing options...
Howdy_McGee Posted July 18, 2010 Author Share Posted July 18, 2010 yeah that works as a drop down menu. I'm trying to get multiple categories under one drop down item. If I add a div after the ('m1') div then it gets rid of the items inside that newly added div. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 18, 2010 Share Posted July 18, 2010 if you talkiing about sub menu as inparent menu |-sub menu lev 1 | |-sub menu lev 2 | |-sub menu lev 2 |-sub menu lev 1 |-sub menu lev 1I don't think it this menu was meant to be used as a multi sub level level menu.you want to look up suckerfish or son of suckerfish menus, which do use muliti sublevel menus (about 6 if i remember rightly). Link to comment Share on other sites More sharing options...
Howdy_McGee Posted July 21, 2010 Author Share Posted July 21, 2010 aight i'll check it out ! Thanks Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.