PDA

View Full Version : Drop down way slow to respond


AlexC
03-25-2011, 09:03 PM
Hi,

I have an extremely simple horizontal menu. Just one item with a submenu of two.

When I preview the page (doesn't matter which browser), there is about a one second delay between mouseover and drop down. Conversely, when I take the cursor off, it takes about a second for the submenu to disappear.

I've made some other dummy menu's to test, haven't altered the css at all, and same issue.

Running CS3 on Leopard.
Thanks.

@charset "UTF-8";


ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
}

ul.MenuBarActive
{
z-index: 1000;
}
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 100px;
float: left;
}
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 100px;
position: absolute;
left: -1000em;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}
ul.MenuBarHorizontal ul li
{
width: 100px;
}
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}

ul.MenuBarHorizontal ul
{
border: 1px solid #CCC;
}
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #000000;
color: #FFFFFF;
text-decoration: none;
}
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
background-color: #33C;
color: #FFF;
}
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #33C;
color: #FFF;
}

*/
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-repeat: no-repeat;
background-position: 95% 50%;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-repeat: no-repeat;
background-position: 95% 50%;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-repeat: no-repeat;
background-position: 95% 50%;
}
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-repeat: no-repeat;
background-position: 95% 50%;
}


ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
}
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #FFF;
}
}

gentleone
03-25-2011, 10:40 PM
You can change the delays in SpryMenuBar.js
Look for these lines somewhere at the top:

// represents the current (sub)menu we are operating on
this.currMenu = null;
this.showDelay = 250;
this.hideDelay = 600;

AlexC
03-25-2011, 10:57 PM
Perfect! I love it when the answer is simple.

It actually looked like this though:
Thanks!

opentime = window.setTimeout(function(){self.showSubmenu(menu );}, 250);
}

{
closetime = window.setTimeout(function(){self.hideSubmenu(menu );}, 600);
}

gentleone
03-25-2011, 11:06 PM
ah okay... I did look in the SpryMenuBar.js from the adobe labs site, because I couldn't check yours. :)

AlexC
03-25-2011, 11:17 PM
OK. Next question. Is there a way to make it fade it?

gentleone
03-26-2011, 01:09 PM
It should be possible. There is also an effect library: SpryEffect.js
You'll have to include it in the head as well and then I'm not sure either how you'll have to combine the effect with the Spry Horizontal Menu.

Perhaps these examples will get you somewhere:
http://labs.adobe.com/technologies/spry/samples/effects/fade_sample.html

AlexC
03-27-2011, 01:41 AM
Ok. Thanks!