Solved

Javascript Delay for CSS dropdown menu

Posted on 2006-06-20
5
2,124 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
PHP: Filling Out/Creating a PDF 29 94
JavaScript code not working 3 31
Validating Date Part2 2 25
Put POST values into cookies. 14 29
This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

735 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