Solved

Javascript Delay for CSS dropdown menu

Posted on 2006-06-20
5
2,112 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 Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
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 the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

746 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now