hi
1) create a layer ( say Layer 1) in dreamweaver(or in the code page
write <div id="Layer1"> Menu item 1 here</div>)
2) in that layer type ur menu item one, position that layer where ever
u want by dragging it
3) create another layer(say layer2). in that type all the items u
want to show onclick or on mouse over ofLayer1(created in step 1)
4) Select Layer2 by clicking it, now in property window( if u are not
able to See that, click Window on the main menu and select properties)
u can see a eye like icon click that(Or in Dream MX change the Vis
Property to hidden) ( make sure that layer2s visibility is hidden, so
that initially it will be hidden)
5) determine where u want to show the layer2 when u click or
mouserover layer1 , Drag layer2 to that position
6)now select layer1 and Press Shift + F11
7) Now u can see the Behaviours window U can see a + symbol click that
and select Show hide layers
8) no u get a additioal widow showing all the layers present in the
page select Layer2 and click Show , in events(in behaviour window)
change onclick to onmouseouver
9)once again Select the layer1 and click the + symbol in behaviour
window and select show hide layers behaviour and choose hide to
layer2, and change the event to mouse out
no try it and out and tell me
refer the attached code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" 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 MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if
((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style;
v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>
<body>
<div id="Layer1" style="position:absolute; left:81px; top:23px;
width:161px; height:21px; z-index:1; background-color: #FF9900;
layer-background-color: #FF9900; border: 1px none #000000;"
onMouseOut="MM_showHideLayers('Layer2','','hide')"
onMouseOver="MM_showHideLayers('Layer1','','show','Layer2','','show')">Main
menu </div>
<div id="Layer2" style="position:absolute; left:81px; top:45px;
width:162px; height:170px; z-index:2; background-color: #FFCC66;
layer-background-color: #FFCC66; border: 1px none #000000; visibility:
hidden;">
<p>Menu item one</p>
<p>Menu item Two </p>
</div>
</body>
</html> |
