Solved

Javascript Delay for CSS dropdown menu

Posted on 2006-06-20
5
2,123 Views
Last Modified: 2013-11-19
SITUATION:
I recently took the suckerfish menu and modified it to my liking.  But, having the multi-tiered menus proposes problems with usability in that it doesnt have a delay. I dont know javascript, but only HTML/CSS.  

QUESTION:
If somebody could show me a simple javascript that I could use to have the menu delay for a fraction of a second it would help out a lot.  Also a simple explanation of the principle on how it works.


MY CODE:  (just make an html file)


<style type="text/css">

/* structure */

#nav, #nav ul {
      float: left;
      width: 400px;
      list-style: none;
      line-height: 1;
      font-weight: bold;
      padding: 0;
      background: #008E7E;
      margin: 0;
}
#nav a {
      display: block;
      text-decoration: none;
}
#nav a.daddy {
      margin-right: 10px;
      background: url(right.gif) center right no-repeat;
}
#nav .topdaddy {
      margin-right: 5px;
      background: url(down.gif) center right no-repeat;
}
#nav li {
      float: left;
}
#nav li ul {
      border: 5px solid #016A5E;
      position: absolute;
      left: -999em;
      width: 10em;
}
#nav li li {
      width: 10em;
}
#nav li ul ul {
      border: 5px solid #016A5E;
      margin: -1.7em 0 0 10em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
      left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
      background: #016A5E;
      left: auto;
}
#nav li:hover, #nav li.sfhover {
      background: #7BC7BF;
}

/* style */
#nav {
      position: relative;
      z-index: 1000;
}
#nav a,
#nav a:link,
#nav a:visited {
      text-decoration: none;
      color: white;
      white-space: nowrap;
      font-family: arial;
      font-size: 12px;
      padding: 5px 15px 5px 15px;
      text-decoration: none;
      display: block;
}
#nav li a {
      padding-left: 10px;
}
#nav a:hover {
      color: black;
}
</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
      var sfEls = document.getElementById("nav").getElementsByTagName("LI");
      for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                  this.className+=" sfhover";
            }
            sfEls[i].onmouseout=function() {
                  this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            }
      }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>



<ul id="nav">

      <li><a class="topdaddy">Item</a>
            <ul>
                  <li><a class="daddy">Item</a>
                        <ul>
                              <li><a href="xxxxxxxxx">Item</a></li>
                              <li><a href="xxxxxxxxx">Item</a></li>
                              <li><a href="xxxxxxxxx">Item</a></li>
                        </ul>
                  </li>
                  <li><a class="daddy">Item</a>
                        <ul>
                              <li><a href="xxxxxxxxx">Item</a></li>
                              <li><a href="xxxxxxxxx">Item</a></li>
                              <li><a href="xxxxxxxxx">Item</a></li>
                        </ul>
                  </li>
                  <li><a class="daddy">Item</a>
                        <ul>
                              <li><a href="xxxxxxxxx">Item</a></li>
                              <li><a href="xxxxxxxxx">Item</a></li>
                              <li><a href="xxxxxxxxx">Item</a></li>
                        </ul>
                  </li>
                  <li style="background: none"><hr></li>
                  <li><a class="daddy">Item</a>
                        <ul>
                              <li><a href="xxxxxxxxx">Item</a></li>
                              <li><a href="xxxxxxxxx">Item</a></li>
                              <li><a href="xxxxxxxxx">Item</a></li>
                        </ul>
                  </li>
                  <li><a class="daddy">Item</a>
                        <ul>
                              <li><a href="xxxxxxxxx">Item</a></li>
                              <li><a href="xxxxxxxxx">Item</a></li>
                              <li><a href="xxxxxxxxx">Item</a></li>
                              <li><a href="xxxxxxxxx">Item</a></li>
                        </ul>
                  </li>
            </ul>
      </li>
      <li><a href="xxxxxxxxx">Item</a></li>
      <li><a href="xxxxxxxxx">Item</a></li>
      <li><a href="xxxxxxxxx">Item</a></li>



</ul>
0
Comment
Question by:IIIKrazyKiDDIII
  • 2
5 Comments
 
LVL 10

Accepted Solution

by:
Khanh Doan earned 500 total points
ID: 16948245
0
 

Author Comment

by:IIIKrazyKiDDIII
ID: 16948443
Thanks for the references
0
 
LVL 10

Expert Comment

by:Khanh Doan
ID: 16948507
You are welcome.
Bonmat86.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Create animated movies for web page 18 84
xjs: how to get sum of value in for loop 2 18
return false must be hit after calling certain command 10 32
jQuery force form POST 7 44
Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to count occurrences of each item in an array.

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question