Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Javascript Delay for CSS dropdown menu

Posted on 2006-06-20
5
Medium Priority
?
2,146 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 2000 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: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying 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

Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL several years ago, it seemed like now was a good time to update it for object-oriented PHP.  This article does that, replacing as much as possible the pr…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

719 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