|
|
Posted by Jonathan N. Little on 12/07/06 04:43
windandwaves wrote:
> Hi Dudes
>
> If you visit www.photowarehouse.co.nz again.... Do you find the menu
> loads faster now? I have added a bit of script that is supposed to
> action before the body onload thing is ready.
>
Nope still slow, and having the menu fully expanded upon init is
distracting. Here is a little demo as to how you could start with the
menu closed, and support if the visitor has JavaScript disabled. In the
demo the style and JavaScript is in the head, but you would have them in
external files. Not that the body markup pristine and does not have any
JavaScript, but it is assigned upon loading....
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>template</title>
<style type="text/css">
#sm1,#sm2,#sm3 {
display: block;
}
</style>
<script type="text/javascript">
var buf='<style type="text/css">#sm1, #sm2, #sm3 { display: none;
}</style>';
document.write(buf);
</script>
<script type="text/javascript">
var menus=new Array('m1', 'm2', 'm3');
function toggle(e){
var me;
if(!e) var e=window.event;
if(e.target) me=e.target; // W3C
else if(e.srcElement) me=e.srcElement; // MSIE
if(me.nodeType == 3) me=me.parentNode; // Safari bug on elements
with TEXT
var id='s' + me.id;
var submenu=document.getElementById(id);
me.flag =! me.flag;
if(me.flag) submenu.style.display="block";
else submenu.style.display="none";
}
function initMenus(){
for( var i=0; i<menus.length; i++){
var menu=document.getElementById(menus[i]);
//alert('Init ' + menus[i] + ' which is ' + menu.tagName );
menu.flag=false;
if(menu.addEventListener){
menu.addEventListener('click', toggle, false);
}
else if(menu.attachEvent){ //MS IE support
menu.attachEvent('onclick', toggle);
}
}
}
// attach event after page loads
if( window.addEventListener ) {
window.addEventListener('load',initMenus,false); //legacy
} else if( document.addEventListener ) {
document.addEventListener('load',initMenus,false); //proper
} else if( window.attachEvent ) {
window.attachEvent("onload", initMenus); //IE only
}
</script>
</head>
<body>
<ul>
<li><a href="#" id="m1">Menu 1</a>
<ul id="sm1">
<li>Submenu 1.1</li>
<li>Submenu 1.2</li>
<li>Submenu 1.3</li>
</ul>
</li>
<li><a href="#" id="m2">Menu 2</a>
<ul id="sm2">
<li>Submenu 2.1</li>
<li>Submenu 2.2</li>
<li>Submenu 2.3</li>
<li>Submenu 2.4</li>
</ul>
</li>
<li><a href="#" id="m3">Menu 3</a>
<ul id="sm3">
<li>Submenu 3.1</li>
<li>Submenu 3.2</li>
</ul>
</li>
<ul>
</body>
</html>
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Navigation:
[Reply to this message]
|