PDA

View Full Version : navigation menu


sunny747
10-17-2005, 09:20 AM
HI,
does anybody has any idea how in www.motorola.com they did the navigation menu? it's not a drop down menu and it is not not done in flash also......
can anybody help me with any sort of tutorials or something?

thanks in advance...

sunny747
10-17-2005, 09:22 AM
HI,
does anybody has any idea how in www.motorola.com they did the navigation menu? it's not a drop down menu and it is not not done in flash also......
can anybody help me with any sort of tutorials or something?

thanks in advance...

davidj
10-17-2005, 09:58 AM
the menu is created using dynamic layers (<div>'s)

there is is a good extension here

www.projectseven.com ('http://www.projectseven.com/extensions/listing.htm')

and is called AniMagic Layers

This extension has been available for a few years now so test it in all environments before making it live

sunny747
10-17-2005, 11:00 AM
Thanks a lot for ur help.........
and sorry for double submission.....

regards,
Sunny

davidj
10-17-2005, 12:44 PM
try this

it needs work!!!!!



<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#menuLayer {
position:absolute;
left:34px;
top:33px;
width:402px;
height:33px;
z-index:1;
}
#Layer1 {
position:absolute;
left:5px;
top:6px;
width:247px;
height:19px;
z-index:3;
overflow: visible;
}
#Layer2 {
position:absolute;
left:8px;
top:13px;
width:454px;
height:58px;
z-index:1;
}
#Layer3 {
position:absolute;
left:66px;
top:3px;
width:316px;
height:33px;
z-index:2;
overflow: hidden;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function P7AniMagic(el, x, y, a, b, c, s) { //v2.5 PVII
var g,elo=el,f="",m=false,d="";x=parseInt(x);y=parseIn t(y);
var t = 'g.p7Magic = setTimeout("P7AniMagic(\''+elo+'\',';
if ((g=MM_findObj(el))!=null) {d=(document.layers)?g:g.style;}else{return;}
if (parseInt(s)>0) {eval(t+x+','+y+','+a+','+b+','+c+',0)",' + s+')');return;}
var xx=(parseInt(d.left))?parseInt(d.left):0;
var yy=(parseInt(d.top))?parseInt(d.top):0;
if(parseInt(c)==1) {x+=xx;y+=yy;m=true;c=0;}
else if (c==2) {m=false;clearTimeout(g.p7Magic);}
else {var i=parseInt(a);
if (eval(g.moved)){clearTimeout(g.p7Magic);}
if (xx<x){xx+=i;m=true;if(xx>x){xx=x;}}
if (xx>x){xx-=i;m=true;if(xx<x){xx=x;}}
if (yy<y){yy+=i;m=true;if(yy>y){yy=y;}}
if (yy>y){yy-=i;m=true;if(yy<y){yy=y;}}}
if (m) {if((navigator.appName=="Netscape") && parseInt(navigator.appVersion)>4){
xx+="px";yy+="px";}
d.left=xx;d.top=yy;g.moved=true;eval(t+x+','+y+',' +a+','+b+','+c+',0)",'+b+')');
}else {g.moved=false;}
}
//-->
</script>
</head>

<body>
<div id="Layer3">
<div id="Layer1" >menu1 | menu2 | menu3 | menu4 | menu5 </div>
</div>
<p><br />
<br />
<img src="images/button-activity.gif" width="73" height="25" onclick="P7AniMagic('Layer1',500,0,10,30,1,0)"/><img src="images/button-activity.gif" width="73" height="25" onclick="P7AniMagic('Layer1',0,0,10,30,0,0)"/></p>
</body>
</html>

domedia
10-17-2005, 01:08 PM
It's basically what we in DW speak would call a show/hide layer effect. The only thing different is that the layer is scrolled into view when the main menu item is hovered, and then hides when it hovers another main link.

Projectseven has done many neat extensions for DW in this manner, check them out.
http://www.projectseven.com/ ('http://www.projectseven.com/')

domedia
10-17-2005, 01:47 PM
just merged the threads, my comment above was before I knew about davids posts :)

sunny747
10-18-2005, 09:35 AM
Thanks guys...i really appreciate it..

sunny747
10-19-2005, 09:13 AM
HI,
does anybody has any idea how in www.motorola.com they did the navigation menu? it's not a drop down menu and it is not not done in flash also......
can anybody help me with any sort of tutorials or something?

thanks in advance...
HI,
i guess i figure out what they used in motorola...

script ('http://simplythebest.net/scripts/DHTML_scripts/dhtml_script_114a.html')