/    Sign up×
Community /Pin to ProfileBookmark

looking for help in putting a delay on displaying a menu

Copy linkTweet thisAlerts:
Mar 07.2008

After searching the forums, I didn’t find anything that specifically addressed what I need to do, so I decided to post something here and ask for help from the experts.

I’ve got a drop down menu created in HTML & CSS and I would like to set it up so that there is a delay on how soon the menu displays after running the mouse over it. I’m assuming this will just require that I put a delay on the onMouseOver event(s) somewhere, but I’m not sure how to do this.

As my code is rather lengthy, I’m attaching it in a .zip file. Hopefully, this is acceptable practice for thie forum.

Thanks in advance for any assistance..

Steve

[upl-file uuid=439d257a-cb37-4367-9e79-5c2e43a8af1c size=11kB]redesign_SM_4.zip[/upl-file]

to post a comment
JavaScript

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@skywalker2208Mar 07.2008 — I didn't look at the code but to delay something from happening you could use the setTimeout function.

Details on it here
Copy linkTweet thisAlerts:
@stevemtnoauthorMar 07.2008 — I didn't look at the code but to delay something from happening you could use the setTimeout function.

Details on it here[/QUOTE]

Skywalker,

I just checked out the link (thanks). From what I can tell, it's assuming you already have Javascript on the page for whatever you're trying to delay. In this case, the menu is currently all HTML & CSS. There is not JS on it at all.

Am I just not looking closely enough at what you sent me? I'm a serious JS newbie..

Thanks,

Steve
Copy linkTweet thisAlerts:
@skywalker2208Mar 07.2008 — Well you would have an onmouseover event on the menu items with that would drop down. The mouseover event will call a function that can set a timeout to call another function to delay of how soon you want that second function to be called.
Copy linkTweet thisAlerts:
@stevemtnoauthorMar 07.2008 — Well you would have an onmouseover event on the menu items with that would drop down. The mouseover event will call a function that can set a timeout to call another function to delay of how soon you want that second function to be called.[/QUOTE]

I really don't know how to proceed with that. Right now, I'm displaying the menu via CSS (display: block). Where would I put an onMouseOver event?
Copy linkTweet thisAlerts:
@skywalker2208Mar 07.2008 — Do you have a link of some sort where I can view it? The on mouseover event would go with the html element that you want the mouseover event to happen like a list element or a div
Copy linkTweet thisAlerts:
@stevemtnoauthorMar 07.2008 — All of the code is in the .zip file attached to the thread..
Copy linkTweet thisAlerts:
@stevemtnoauthorMar 10.2008 — Here is an edited version of the code I'm using, for those who may not want to mess with d/l'ing a .zip file (all but one section of the menu has been removed - what works for one will work for all of them). Scroll down to almost the bottom of the code to see the menu.

Thanks,

Steve

<i>
</i>

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
&lt;head&gt;
&lt;title&gt;STLtoday.com Redesign - SM&lt;/title&gt;


&lt;style type="text/css"&gt;

&lt;!-- nav styles start here --&gt;

<i> </i>.clearboth {
<i> </i> clear: both;
<i> </i>}

<i> </i>.heading {
<i> </i> color: #990000;
<i> </i> font-size: 12px;
<i> </i> font-weight: bold;
<i> </i> text-decoration: none;
<i> </i>}

<i> </i>.indent {
<i> </i> margin-left: 20px;
<i> </i>}

<i> </i>.nav-block a {
<i> </i> display: block;
<i> </i> width: 160px;
<i> </i> text-decoration: none;
<i> </i> padding: 0px;
<i> </i> color: #333 !important;
<i> </i>}

<i> </i>.nav-block a span {
<i> </i> padding-left: 5px;
<i> </i>}

<i> </i>.nav-block a:hover {
<i> </i> color: #900 !important;
<i> </i> padding: 0px;
<i> </i> text-decoration: underline;
<i> </i>}

<i> </i>.nav-item {
<i> </i> z-index: 999;
<i> </i> float: left;
<i> </i> position: relative;
<i> </i> background: black;
<i> </i> width: auto;
<i> </i> margin-right:1px;
<i> </i>}

<i> </i>.nav-item .nav-btn a {
<i> </i> display: block;
<i> </i> text-decoration: none;
<i> </i> font-size: 16px;
<i> </i> color: #fff;
<i> </i> border-top: 1px solid black;
<i> </i> border-left: 1px solid black;
<i> </i> padding-left: 10px;
<i> </i> padding-right: 10px;
<i> </i> margin: 0px;
<i> </i> text-align: center;
<i> </i>}

<i> </i>.nav-item .nav-btn a span.btn-height {
<i> </i> display: block;
<i> </i> height: 29px;
<i> </i>}

<i> </i>.nav-item .nav-btn a span span {
<i> </i> display: block;
<i> </i> padding: 8px 0 0 0px;
<i> </i>}

<i> </i>.nav-item .nav-block {
<i> </i> display: none;
<i> </i> position: absolute;
<i> </i> top: 30px;
<i> </i> left: 0px;
<i> </i> background: #fff;
<i> </i> border-width: 0px 1px 1px 1px;
<i> </i> border-style: solid;
<i> </i> border-color: #000;
<i> </i>}

<i> </i>.nav-item .nav-block-pad {
<i> </i> padding: 2px 0 5px 0px;
<i> </i>}

<i> </i>.nav-block-pad-text {
<i> </i> float: left;
<i> </i> width: auto;
<i> </i>}

<i> </i>.nav-item:hover .nav-block, .over .nav-block {
<i> </i> display: block;
<i> </i>}

<i> </i>.nav-item:hover .nav-btn a, .over .nav-btn a {
<i> </i> background: #fff;
<i> </i> color: #000;
<i> </i> border-width: 1px 1px 0 0px;
<i> </i> border-style: solid;
<i> </i> border-color: #000;
<i> </i>}

<i> </i>#stl-nav-box ul {
<i> </i> clear: both;
<i> </i> margin: 0px;
<i> </i> padding: 0px;
<i> </i> list-style-type: none;
<i> </i>}

&lt;!-- nav styles end here --&gt;


&lt;/style&gt;

&lt;/head&gt;
&lt;body class="stlbody"&gt;

&lt;!-- Header starts --&gt;
&lt;div id="header"&gt;

&lt;div id="masthead"&gt;


<i> </i>&lt;!-- Navigation code starts --&gt;
<i> </i>&lt;div id="stl-nav-box"&gt;

<i> </i> &lt;!-- News Navigation code starts --&gt;
<i> </i> &lt;div class="nav-item"&gt;
<i> </i> &lt;div class="nav-btn"&gt;
<i> </i> &lt;a href="#"&gt;&lt;span class="btn-height"&gt;&lt;span&gt;News&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;
<i> </i> &lt;/div&gt;
<i> </i> &lt;div class="nav-block" style="left:-1px;"&gt;
<i> </i> &lt;div style="width:1000px"&gt;
<i> </i> &lt;div class="nav-block-pad" style="background-image: url(http://images.stltoday.com/stltoday/images/gradient.gif)" &gt;
<i> </i> &lt;div class="nav-block-pad-text"&gt;
<i> </i> &lt;span class="heading"&gt;News&lt;/span&gt;
<i> </i> &lt;ul&gt;
<i> </i> &lt;li&gt;&lt;a href="/news/missouri"&gt;Metro &amp;amp; Missouri&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;li&gt;&lt;a href="/news/illinois-news"&gt;Illinois&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;li&gt;&lt;a href="/news/stcharles"&gt;St. Charles&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;li&gt;&lt;a href="/washington"&gt;Washington D.C.&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;li&gt;&lt;a href="/news/world"&gt;Nation/World&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;li&gt;&lt;a href="/news/law"&gt;Crime&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;li&gt;&lt;a href="/news/politics"&gt;Politics&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;li&gt;&lt;a href="/news/science"&gt;Science &amp;amp; Tech&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;li&gt;&lt;a href="http://www.legacy.com/stltoday/DeathNotices.asp"&gt;Obits&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;/ul&gt;
<i> </i> &lt;/div&gt;

<i> </i> &lt;div class="clearboth"&gt;&lt;/div&gt;
<i> </i> &lt;/div&gt;
<i> </i> &lt;/div&gt;
<i> </i> &lt;/div&gt;
<i> </i> &lt;/div&gt;
<i> </i> &lt;!-- News Navigation code ends --&gt;


<i> </i>&lt;/div&gt;
<i> </i>&lt;!-- Navigation code ends --&gt;

&lt;!-- Header ends --&gt;
&lt;/div&gt;
&lt;/div&gt;


&lt;/body&gt;
&lt;/html&gt;

×

Success!

Help @stevemtno spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...