PDA

View Full Version : Menu ul blinks before menu is parsed.



Pegarm
16 Jul 2009, 12:02 PM
I'm building a website for a client. I've implemented the Core 3.0 menu system into the site.

The menu loads first as a regular ul list, very quickly, but then it parses to the drop down menu format.

The client is complaining about the blink. (I hate clients.)

Is there a way to prevent this from happening?

tryanDLS
16 Jul 2009, 1:52 PM
http://extjs.com/learn/Ext_Forum_Help#Posting_a_working_showcase

All browsers?

Pegarm
16 Jul 2009, 10:04 PM
Here's what's happening; since the Core Menu is formatted as <ul> and <li> tags, the browser is displaying that list as a rendered unordered list for a split second. It's lightning quick, and it appears more like a blink, but it's there.

Yes, this is occurring on all browsers.

The sample is live at http://www.strandmarketing.com/preview/endwave


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">

<link rel="stylesheet" type="text/css" href="css/menu.css" />

<script src="js/ext-core.js"></script>
<script src="js/menu.js"></script>

<script>
Ext.onReady(function() {
new Ext.ux.Menu('navigation', {
transitionType: 'slide',
direction: 'horizontal',
delay: 0.2,
autoWidth: true,
transitionDuration: 0.2,
animate: true,
currentClass: 'current'
});
});
</script>
</head>

<body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><img src="images/navLeft.png" width="14" height="23" hspace="0" vspace="0" border="0" /></td>
<td valign="top" style="background-image: url(Images/navBackground.png); background-repeat: repeat-x; padding-left: 8px; padding-right: 8px;">
<ul id="navigation">
<cfif session.loggedIn>
<li>
<a href="#">News Administration</a>
<ul style="background: url(images/menu-bg.png);">
<li><a href="index.cfm?Action=News.Admin">Home</a></li>
<li><a href="index.cfm?Action=News.addForm">New Story</a></li>
</ul>
</li>
<li style="padding-top: 4px;">|</li>
</cfif>
<li>
<cfif request.Circuit eq "Company">
<a href="#"><span style="color: Blue;">Company</span></a>
<cfelse>
<a href="#">Company</a>
</cfif>
<ul style="background: url(images/menu-bg.png);">
<li><a href="overview.cfm">Overview</a></li>
<li><a href="engineering.cfm">Engineering</a></li>
<li><a href="quality.cfm">Quality</a></li>
<li><a href="supply-chain.cfm">Supply Chain</a></li>
<li><a href="executive-management.cfm">Executive Management</a></li>
<li><a href="board-of-directors.cfm">Board of Directors</a></li>
<li><a href="mission-and-values.cfm">Mission and Values</a></li>
<li><a href="legal-notices.cfm">Legal Notices</a></li>
<li><a href="http://investor.shareholder.com/endwave">Investor Relations</a></li>
</ul>
</li>
<li style="padding-top: 4px;">|</li>
<li>
<cfif request.Circuit eq "Technology">
<a href="#"><span style="color: Blue;">Technology</span></a>
<cfelse>
<a href="#">Technology</a>
</cfif>
<ul style="background: url(images/menu-bg.png);">
<li>
<a href="#">Transceivers &gt;</a>
<ul style="background: url(images/menu-bg.png);">
<li><a href="transceivers.cfm">Overview</a></li>
<li><a href="base-models.cfm">Base Models</a></li>
<li><a href="60-ghz-tr-modules.cfm">60 GHz T/R Modules</a></li>
<li><a href="smart-tr-modules.cfm">Smart T/R Modules</a></li>
<li><a href="packageless-transceivers.cfm">Packageless Transceivers</a></li>
</ul>
</li>
<li><a href="custom-mmics.cfm">Custom MMICs</a></li>
<li><a href="proprietary-technology.cfm">Proprietary Technology</a></li>
<li><a href="knowledge-center.cfm">Knowledge Center</a></li>
</ul>
</li>
<li style="padding-top: 4px;">|</li>
<li>
<cfif request.Circuit eq "News">
<a href="#"><span style="color: Blue;">News</span></a>
<cfelse>
<a href="#">News</a>
</cfif>
<ul style="background: url(images/menu-bg.png);">
<li><a href="product-news.cfm">Product News</a></li>
<li><a href="http://investor.shareholder.com/endwave/releases.cfm">Corporate News</a></li>
</ul>
</li>
<li style="padding-top: 4px;">|</li>
<li>
<cfif request.Circuit eq "Contact">
<a href="#"><span style="color: Blue;">Contact</span></a>
<cfelse>
<a href="#">Contact</a>
</cfif>
<ul style="background: url(images/menu-bg.png);">
<li><a href="locations.cfm">Locations</a></li>
<li><a href="representatives.cfm">Representatives</a></li>
</ul>
</li>
<li style="padding-top: 4px;">|</li>
<li><a href="Home.cfm">Home</a></li>
</ul>
</td>
<td valign="top"><img src="images/navRight.png" width="14" height="23" hspace="0" vspace="0" border="0" /></td>
</tr>
</table>
</body>
</html>

mystix
17 Jul 2009, 8:42 AM
set a css class (call it x-hide-offsets or something) on the original <ul> which displays it at a negative page offset, convert the <ul> to a menu, then remove the css class after successful conversion.