JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

Drop Down Menu with Sucker Fish

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: Mar 2007
Posts: 52
Reputation: cakka is an unknown quantity at this point 
Solved Threads: 1
cakka's Avatar
cakka cakka is offline Offline
Junior Poster in Training

Drop Down Menu with Sucker Fish

 
0
  #1
Sep 26th, 2008
Hi, i am being creating a drop down menu. But i getting trouble in that.
The sub menu that must be displayed when the link is hover is displayed although the link is not hover.

This is the script that i create , please help me for correcting the wrong script.
Thanks

The html scripts

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1.         <ul id="menu">
  2.         	<li class="noDivider"><a href="home.html" title="Home">Home</a></li>
  3.         	<li><a href="contact_information/about-us.html" rel="nofollow" title="About Us">About Us</a></li>
  4.         	<li><a href="products/products.html" rel="nofollow, noindex" title="Products">Products</a></li>
  5.         	<li>
  6.             <a href="/transformers" rel="nofollow, noindex" title="Catalog">Catalog</a>
  7.            	<ul class="catalogNav">
  8.             	<li><a href="transformers" rel="nofollow" title="Transformers">Transformers</a></li>
  9.             	<li><a href="products/switch-panel.html" rel="nofollow" title="Switchgear">Switchgear</a></li>
  10.             	<li><a href="products/switch-panel.html#panels" rel="nofollow" title="Circuit Breakers">Circuit Breakers</a></li>
  11.             	<li><a href="products/qualty-con-un.html#power" rel="nofollow" title="UPS Systems">UPS Systems</a></li>
  12.             	<li><a href="products/switch-panel.html#panels" rel="nofollow" title="Panelboards">Panelboards</a></li>
  13.             	<li><a href=/power-line-conditioners" rel="nofollow" title="Power Line Conditioners">Power Line Conditioners</a></li>
  14.             	<li><a href="products/qualty-con-un.html" rel="nofollow" title="Constant Voltage Power Conditioners">Constant Voltage Power Conditioners</a></li>
  15.             	<li><a href="products/rect-phase.html#converters" rel="nofollow" title="Phase Converters">Phase Converters</a></li>
  16.             	<li><a href="products/qualty-con-un.html#quality" rel="nofollow" title="Power Quality Equipment">Power Quality Equipment</a></li>
  17.             	<li><a href="/transient-voltage-surge-suppressors" rel="nofollow" title="TVSS">TVSS</a></li>
  18.             	<li><a href="/all-categories" rel="nofollow" title="Generators">Generators</a></li>
  19.             	<li><a href="products/motors.html" rel="nofollow" title="Motors &amp; Motor Control">Motors &amp; Motor Control</a></li>
  20.             	<li><a href="products/rect-phase.html" rel="nofollow" title="Rectifiers">Rectifiers</a></li>
  21.             	<li><a href="products/switch-panel.html" rel="nofollow" title="Fuses">Fuses</a></li>
  22.           </ul>
  23.           </li>
  24.         	<li><a href="contact_information/contact.html" rel="nofollow" title="Contact Us">Contact Us</a></li>
  25.         </ul>
  26.  

The Javascript
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. sfHover = function() {
  2. 	var sfEls = document.getElementById("menu").getElementsByTagName("li");
  3. 	for (var i=0; i<sfEls.length; i++) {
  4. 		sfEls[i].onmouseover=function() {
  5. 			this.className+="catalogNav";
  6. 		}
  7. 		sfEls[i].onmouseout=function() {
  8. 			this.className=this.className.replace(new RegExp(" catalogNav\\b"), "");
  9. 		}
  10. 	}
  11. }
  12. if (window.attachEvent) window.attachEvent("onload", sfHover);

The CSS that i have created
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. #wrapper div#header ul li ul.catalogNav{
  2. 	width:214px;
  3. 	padding:6px 0 0;
  4. 	position:absolute;
  5. 	left:0px;
  6. 	top:20px;
  7. 	float:none;
  8. 	}
  9. #wrapper div#header ul li ul.catalogNav li {
  10.  
  11. }
  12.  
  13.  
  14. #wrapper div#header ul li ul.catalogNav li a{
  15.     background: url(../images/black_arrow.gif) no-repeat 2px 8px #fff;;
  16.     color:#3B3B3B;
  17.     font:11px/21px Arial, Helvetica, sans-serif;
  18.     display:block;
  19.     padding:0 0 0 13px;
  20.     height:21px;
  21.     width: 214px;
  22. }
  23.  
  24.  
  25. #wrapper div#header ul li ul.catalogNav li a:hover{
  26.     background-color:#FFFCE5;
  27.     color:#990000;
  28. }
Website Development Services - Online Tips, Trick & Resources for Bloggers, Tech Users & Web Designers
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: Drop Down Menu with Sucker Fish

 
0
  #2
Sep 26th, 2008
Sorry to keep you waiting! Here's your code and ive fixed some of the lines in your script.


html Syntax (Toggle Plain Text) 
  1. <html>
  2. <head>
  3. <title><!--Sample--></title>
css Syntax (Toggle Plain Text) 
  1. <style type="text/css">
  2. <!--
  3. /* Part of the testing that's why i have to simplify things.
  4. Just dont forget to replace this one with ur default attribution */
  5.  
  6. li.blue a { color: blue; }
  7. li.yellow { background-color: yellow; }
  8.  
  9. -->
  10. </style>
javascript Syntax (Toggle Plain Text) 
  1. <script type="text/javascript">
  2. <!--
  3.  
  4. function sfHover() 
  5. { 
  6. for ( var x = 0; x <= document.getElementsByTagName('ul').length; x++ ) { 
  7.  
  8. var sfEls = document.getElementsByTagName('ul')[x].getElementsByTagName('li'); 
  9.  
  10. for ( var i = 0; i <= sfEls.length; i++ ) { 
  11. sfEls[i].onmouseover = function() { this.className += " yellow"; };
  12.  
  13.  
  14.  
  15. sfEls[i].onmouseout = function() { this.className = this.className.replace(/yellow/g, ''); 
  16.    } 
  17.   } 
  18.  } 
  19. }
  20.  
  21. if ( window.addEventListener ) 
  22. window.addEventListener("load", sfHover, false ); 
  23.  
  24.  
  25. else if ( window.attachEvent ) 
  26. window.attachEvent ("onload", sfHover); 
  27.  
  28. else if ( document.getElementById ) 
  29. window.onload = sfHover; 
  30.  
  31. //-->
  32. </script>
html Syntax (Toggle Plain Text) 
  1. </head>
  2. <body>
  3.  
  4. <ul id="menu">  
  5. <li class="blue"><a href="home.html" title="Home">Home</a></li>  
  6.  
  7. <li><a href="contact_information/about-us.html" rel="nofollow" title="About Us">About Us</a></li>  
  8.  
  9. <li><a href="products/products.html" rel="nofollow, noindex" title="Products">Products</a></li>   
  10.  
  11. <li><a href="/transformers" rel="nofollow, noindex" title="Catalog">Catalog</a></li> <!--Here's where you got those headache! Just try to observe this line of your code. Something is missing but all things got fixed now! -->  
  12.  
  13. <ul class="catalogNav">   
  14.  
  15. <li><a href="transformers" rel="nofollow" title="Transformers">Transformers</a></li>   
  16.  
  17. <li><a href="products/switch-panel.html" rel="nofollow" title="Switchgear">Switchgear</a></li>   
  18.  
  19. <li><a href="products/switch-panel.html#panels" rel="nofollow" title="Circuit Breakers">Circuit Breakers</a></li>   
  20.  
  21. <li><a href="products/qualty-con-un.html#power" rel="nofollow" title="UPS Systems">UPS Systems</a></li>   
  22.  
  23. <li><a href="products/switch-panel.html#panels" rel="nofollow" title="Panelboards">Panelboards</a></li>   
  24.  
  25. <li><a href=/power-line-conditioners" rel="nofollow" title="Power Line Conditioners"> Power Line Conditioners</a> </li>    
  26.  
  27. <li> <a href="products/qualty-con-un.html" rel="nofollow" title="Constant Voltage Power Conditioners"> Constant Voltage Power Conditioners</a> </li>    
  28.  
  29. <li> <a href="products/rect-phase.html#converters" rel="nofollow" title="Phase Converters"> Phase Converters</a> </li>    
  30.  
  31. <li> <a href="products/qualty-con-un.html#quality" rel="nofollow" title="Power Quality Equipment"> Power Quality Equipment</a> </li>    
  32.  
  33. <li> <a href="/transient-voltage-surge-suppressors" rel="nofollow" title="TVSS"> TVSS</a> </li>    
  34.  
  35. <li> <a href="/all-categories" rel="nofollow" title="Generators"> Generators</a> </li>     
  36.  
  37. <li> <a href="products/motors.html" rel="nofollow" title="Motors &amp; Motor Control"> Motors &amp; Motor Control</a> </li>  
  38.  
  39. <li> <a href="products/rect-phase.html" rel="nofollow" title="Rectifiers"> Rectifiers</a> </li> 
  40. <li> <a href="products/switch-panel.html" rel="nofollow" title="Fuses"> Fuses</a> </li>    </ul> </li>   
  41. <li> <a href="contact_information/contact.html" rel="nofollow" title="Contact Us"> Contact Us</a> </li>   
  42. </ul> 
  43.  
  44.  
  45.  
  46. </body> 
  47. </html>
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



acid2 ajax ajaxcode ajaxhelp animate automatically beta box browser bug calendar captchaformproblem checkbox child class close column cookies createrange() css cursor decimal dependent design disablefirebug dom download dropdown editor element engine error events explorer ext file form forms google gwt gxt highlightedword html htmlform ie8 iframe image() images index internet java javascript jawascriptruntimeerror jquery jsf jsfile jump listbox math microsoft mimic mp4 object onmouseoutdivproblem onmouseover onreadystatechange parent pdf php player post problem progressbar rated rating regex runtime scroll search select session shopping size sql star starrating stars synchronous text textarea validation w3c web website window windowofwords windowsxp wysiwyg xml \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC