1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 8:05 am May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

Creating a dropdown script

Having a few problems

         

Blue_Jeans

9:31 pm on May 14, 2008 (gmt 0)

10+ Year Member



Edit: The space in 
/ over/
apparently matters in Mozilla based browsers. Typical, I find the problem right after I finally post for help. The following is out-dated:

I wanted to create my own dropdown script that would be smooth. To start out, I needed some base code. I decided to just use the Suckerfish dropdown menu. This site is generic, and is not mine.

[htmldog.com...]

This dropdown system wasn't quite set up for what I needed because it simply used :hover for the browsers that supported it. So first, I did this: 

/* change this: */
li:hover ul, li.over ul {
display: block;
}
/* to this: */
/*li:hover ul, */li.over ul {
display: block;
}

This got rid of the :hover. The script they used was designed to support crappy IE browsers, so I need to rewrite it a little bit. 


/* change this: */
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", "");
}
}
}
}
}
/* to this: */
startList = function() {
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", "");
}
}
}
}

And here is where I'm stuck. In Mozilla based browsers (haven't checked anything else besides IE), the hover works correctly, but when you mouseout, it does not give the class the proper name, or the class is given the proper name, but is not redrawn.

Why? My first thought was that the replace should be: 

this.className=this.className.replace(/ over/, "");
but that didn't help. Off-topic slightly: it should use the /'s, right? I've already successfully created a smooth dropdown effect, but until I can figure this out, the smoothing effect is worthless...

[edited by: Blue_Jeans at 9:45 pm (utc) on May 14, 2008]

[edited by: engine at 5:24 pm (utc) on May 15, 2008]
[edit reason] WebmasterWorld TOS [/edit]

httpwebwitch

10:46 pm on May 14, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



hey Blue_Jeans, glad you figured it out.

Suckerfish is elegant and highly customizable, a pioneer in the abuse of unordered lists. Hard to believe it's already 4.5 years old!

Blue_Jeans

12:01 am on May 15, 2008 (gmt 0)

10+ Year Member



What I find harder to believe is that after 4.5 years, there isn't a smooth-dropdown script that extends it. Or at least a widely known one.

Blue_Jeans

12:35 am on May 15, 2008 (gmt 0)

10+ Year Member



Okay... I decided to take a different mark-up for my dropdown. It might seem like it has extra mark-up, but believe me, this is using the fewest elements possible. The external script in the mark-up below does the smooth transitions. However, it requires specific id tags for each dt and dl. I don't want to write each one, and neither would a user. So the goal of the embedded script is to dynamically give each one an id. It is what I need help with. It doesn't seem to work. 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JavaScript Dropdown Menu Demo</title>
<link rel="stylesheet" href="dropdown.css" type="text/css" />
<script type="text/javascript" src="dropdown.js"></script>
<script type="text/javascript"><!--//--><![CDATA[//><!--
menuHover = function() {
var node = document.getElementById("navigation").getElementsByTagName("DL");
var dtNode;
var ddNode;
for (var i=0; i<node.length; i++) {
dtNode = node[i].getElementsByTagName("DT")
ddNode = node[i].getElementsByTagName("DD")
for (var l=0; l<ddNode.length; l++) {
dtNode[l].id = "id" + l;
ddNode[l].id = "id" + l + "-fade";
dtNode[l].onmouseover=function() {
ddMenu(this.id,1)
}
dtNode[l].onmouseout=function() {
ddMenu(this.id,-1)
}
ddNode[l].onmouseover=function() {
cancelHide(this.id)
}
ddNode[l].onmouseout=function() {
ddMenu(this.id,-1)
}
}
}
window.onload=menuHover;
//--><!]]></script>
</head>
<body>
<div id="navigation">
<dl>
 <dt>Home</dt>
 <dd></dd>
</dl>
<dl>
 <dt>Templates</dt>
 <dd></dd>
</dl>
<!--
<dl>
 <dt id="forums" onmouseover="ddMenu('forums',1)" onmouseout="ddMenu('forums',-1)">Forums</dt>
 <dd id="forums-fade" onmouseover="cancelHide('forums')" onmouseout="ddMenu('forums',-1)">
<ul>
 <li><a href="#">Navigation Item 1</a></li>
 <li><a href="#">Navigation Item 2</a></li>
 <li><a href="#">Navigation Item 3</a></li>
 <li><a href="#">Navigation Item 4</a></li>
</ul>
 </dd>
</dl>-->
<dl>
 <dt>Forums</dt>
 <dd>
<ul>
 <li><a href="#">Navigation Item 1</a></li>
 <li><a href="#">Navigation Item 2</a></li>
 <li><a href="#">Navigation Item 3</a></li>
 <li><a href="#">Navigation Item 4</a></li>
</ul>
 </dd>
</dl>
<dl>
 <dt id="tutorials" onmouseover="ddMenu('tutorials',1)" onmouseout="ddMenu('tutorials',-1)">Tutorials</dt>
 <dd id="tutorials-fade" onmouseover="cancelHide('tutorials')" onmouseout="ddMenu('tutorials',-1)">
<ul>
 <li><a href="#">Navigation Item 1</a></li>
 <li><a href="#">Navigation Item 2</a></li>
 <li><a href="#">Navigation Item 3</a></li>
 <li><a href="#">Navigation Item 4</a></li>
 <li><a href="#">Navigation Item 5</a></li>
</ul>
 </dd>
</dl>
<dl>
 <dt id="graphics" onmouseover="ddMenu('graphics',1)" onmouseout="ddMenu('graphics',-1)">Graphics</dt>
 <dd id="graphics-fade" onmouseover="cancelHide('graphics')" onmouseout="ddMenu('graphics',-1)">
<ul>
 <li><a href="#">Navigation Items 1</a></li>
 <li><a href="#">Navigation Item 2</a></li>
 <li><a href="#">Navigation Itemff 3</a></li>
 <li><a href="#">Navigation Item</a></li>
 <li><a href="#">Navigation Item 5</a></li>
</ul>
 </dd>
</dl>
<dl>
 <dt id="seditio" onmouseover="ddMenu('seditio',1)" onmouseout="ddMenu('seditio',-1)">Seditio</dt>
 <dd id="seditio-fade" onmouseover="cancelHide('seditio')" onmouseout="ddMenu('seditio',-1)">
<ul>
 <li><a href="#">Navigation Item 1</a></li>
 <li><a href="#">Navigation Item 2</a></li>
 <li><a href="#">Navigation Item 3</a></li>
 <li><a href="#">Navigation Item 4</a></li>
 <li><a href="#">Navigation Item 5</a></li>
</ul>
 </dd>
</dl>
<dl>
 <dt>Submissions</dt>
</dl>
<dl>
 <dt>Contact Us</dt>
</dl>
<dl>
 <dt>Search</dt>
</dl>
</div>
<div style="clear:both" />
<p>Nulla ultrices, dolor quis ullamcorper eleifend, pede tortor dignissim lorem, in condimentum diam mi ut risus. Vivamus ligula dui, viverra et, suscipit ac, scelerisque adipiscing, orci. Sed a nisi. Donec dui. Maecenas erat mauris, molestie nec, suscipit vel, scelerisque sit amet, tortor. Nunc egestas aliquam sapien. Proin ante pede, placerat id, eleifend id, pellentesque posuere, odio. Nulla facilisi. Curabitur tincidunt convallis sapien. Maecenas vehicula sodales neque. Vivamus sed elit vitae dui vulputate molestie. Nulla facilisi. Praesent molestie risus ut odio.</p>
<p>Nullam sit amet erat vitae nulla tempus faucibus. Mauris volutpat scelerisque enim. Etiam vel dolor. Fusce dolor elit, lobortis pretium, adipiscing sit amet, rhoncus et, libero. Sed vel odio. Nunc commodo, erat id semper venenatis, tellus nisl placerat felis, venenatis blandit elit massa sed est. Suspendisse in metus. Curabitur diam. Vivamus accumsan tortor vel elit. Sed purus odio, gravida nec, facilisis sed, bibendum tincidunt, justo. Etiam mollis diam nec erat. Aliquam rutrum fringilla pede. Nunc rhoncus suscipit odio. Nunc sit amet sem id est adipiscing euismod. Etiam sed neque eu ante euismod dignissim. In tempus arcu vitae eros.</p>
<p>Mauris aliquet. Phasellus commodo, lacus feugiat lobortis porta, turpis dolor dapibus est, sed hendrerit mauris odio rutrum odio. Nulla erat quam, imperdiet varius, eleifend vel, rhoncus nec, ligula. Nulla pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam massa. Quisque convallis pellentesque neque. Nam eu lectus. Maecenas est odio, egestas eget, viverra ac, viverra quis, nisi. Integer pharetra, justo ut interdum adipiscing, libero odio adipiscing lectus, et condimentum ipsum ipsum eget justo. Nunc libero est, auctor ac, aliquam id, semper eget, nisi. Phasellus rhoncus tempor velit. Phasellus accumsan iaculis justo. Vivamus quis leo et nunc rutrum ultricies. Pellentesque elit est, vehicula id, mattis et, volutpat vel, lectus. Duis purus nunc, feugiat quis, scelerisque ut, sodales ut, erat. Nam lectus. </p>
</body>
</html>

[edited by: Blue_Jeans at 12:36 am (utc) on May 15, 2008]

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 8:05 am May 14, 2026