|
 | ||||||||||
|
|
|
|
|
|||||||
JavaScript ProjectsSTUDIO GRID TABLE MENU TREE XPBAR HINT EDITOR TAB FORM CALENDAR SCROLLER SHOPPINGCART TREEPHP PACKER |
|
CODETHATMENU MANUAL |
Build Menu in the Frame
This section will be useful for you if you'd like to use frames at your site.
For example, you have two frames that placed at
menu_fr.html - the upper frame dyn_doc.html - the lower frame |
You place the main menu level at the upper frame and you'd like that the other levels will appear at the lower frame.
In this case menu will be always awailable even if your lower frame is too long.
But working across frames requires some additional scripting, such as manual submenu positioning and "popup" calls.
Content of the upper frame is:
<html>
<head>
<title>Upper frame</title>
<script language="javascript1.2" src="scripts/codethatsdk.js"></script>
<script language="javascript1.2" src="scripts/codethatmenupro.js"></script>
<script language="javascript1.2" src="menufr.js"></script>
<script language="javascript1.2">
<!--
var menufr = new CMenu(MenuDef, 'menufr');
//-->
</script>
<style type="text/css">
.box {
font-size : 14px;
}
.boxover {
font-size : 15px;
}
</style>
</head>
<body>
<script language="javascript1.2">
<!--
menufr.create();
menufr.run();
//-->
</script>
</body>
</html>
|
Content of the lower frame is:
<html><head>
<title>
Using dynamic manipulation methods (lower frame)
</title>
<script language="Javascript1.2" type="text/javascript" src="scripts/codethatsdk.js"></script>
<script language="Javascript1.2" type="text/javascript" src="scripts/codethatmenustd.js"></script>
<script language="Javascript1.2" type="text/javascript" src="subfr.js"></script>
<script language="Javascript" type="text/javascript">
<!--
var popup1 = new CMenu( Popup1, 'popup1' );
var popup2 = new CMenu( Popup2, 'popup2' );
var popup3 = new CMenu( Popup3, 'popup3' );
//-->
</script>
<style type=text/css>
.box {
font-size : 14px;
}
.boxover {
font-size : 15px;
}
</style>
</head>
<body>
<script language="javascript1.2">
<!--
popup1.create();
popup2.create();
popup3.create();
popup1.run();
popup2.run();
popup3.run();
//-->
</script>
<h1><a name="Style"></a>
...
|
At the menufr.js and subfr.js we describe main menu and three pop-up menu accordingly:
// MENUFR.JS
//menus and their positions by x
var menu_coords = {
"popup1" : 50, "popup2" : 150, "popup3" : 250
};
function menu_act (name, mode)
{
var fr = top.frames.cont; //get the lower frame object
if (name && (!fr || !fr[name] || !fr[name]._op)) return;
if (mode == 1) {
var x = fr.CodeThat.getScrollX() + menu_coords[name];
var y = fr.CodeThat.getScrollY() + 1;
for (var i in menu_coords)
{
fr[i].clearTimer();
fr[i].hide();
}
fr[name].popupAt(x, y)
}
else if (!mode) {
fr[name].clearTimer();
fr[name].setTimer();
}
}
var MenuDef = {
"style" : {
"css" : "box",
"align" : "center",
"bgcolor" : "#CCCCCC",
"size" : [100, 25],
"border" : {
"color" : "black", "width" : 1
},
"direction" : "h"
},
"itemover" : {
"bgcolor" : "#EEEEEE", "css" : "boxover"
},
"position" : {
"absolute" : true, "pos" : [50, 0]
},
"items" : [
{
"text" : "Search", "action" : {
"over" : "menu_act('popup1', 1)", "out" : "menu_act('popup1', 0)"
}
},
{
"text" : "OS", "action" : {
"over" : "menu_act('popup2', 1)", "out" : "menu_act('popup2', 0)"
}
},
{
"text" : "CodeThat", "action" : {
"over" : "menu_act('popup3', 1)", "out" : "menu_act('popup3', 0)"
}
} ]
};
// SUBFR.JS
var style = {
"css" : "box",
"align" : "center",
"bgcolor" : "#CCCCCC",
"size" : [130, 25],
"shadow" : {
"color" : "#AAAAAA", "width" : 5
},
"border" : {
"color" : "black", "width" : 1
},
"imgspace" : 5,
"imgendon" : {
"src" : "img/arr_down.gif", "width" : 16, "height" : 16
},
"imgendoff" : {
"src" : "img/arr_right.gif", "width" : 16, "height" : 16
},
"direction" : "v"
};
var Popup1 = {
"type" : "popup",
"style" : style,
"itemover" : {
"bgcolor" : "#DDDDDD"
},
"position" : {
"anchor_side" : "nw", "pos" : [50, 1]
},
"items" : [
{
"text" : "Yahoo!", "action" : {
"url" : "http://yahoo.com", "target" : "_blank"
}
},
{
"text" : "More...",
"menu" : {
"items" : [
{
"text" : "Google", "action" : {
"url" : "http://www.google.com"
}
},
{
"text" : "Altavista", "action" : {
"url" : "http://altavista.com"
}
} ]
}
} ]
};
var Popup2 = {
"type" : "popup",
"style" : style,
"itemover" : {
"bgcolor" : "#DDDDDD"
},
"position" : {
"anchor" : "nw", "pos" : [150, 1]
},
"items" : [
{
"text" : "FreeBSD", "action" : {
"url" : "http://www.freebsd.org", "title" : "FreeBSD site"
}
},
{
"text" : "Linux", "action" : {
"url" : "http://linux.org", "target" : "_blank"
}
},
{
"text" : "Windows", "action" : {
"url" : "http://microsoft.com/windows"
}
} ]
};
var Popup3 = {
"type" : "popup",
"style" : style,
"itemover" : {
"bgcolor" : "#DDDDDD"
},
"position" : {
"anchor_side" : "nw", "pos" : [251, 1]
},
"items" : [
{
"text" : "CodeThat.Com", "action" : {
"url" : "http://www.codethat.com", "target" : "_blank"
}
},
{
"text" : "CodeThatMenu", "action" : {
"url" : "http://www.codethat.com/javascript-menu.html"
}
} ]
};
|
Example - Build Menu in the Frame
You can see an example and complete code here - Build Menu in the Frame Example
[ Home ] [ Contacts ] [ Site Map ] [ News ] [ Links ] [ Downloads ] |
[ Go Top ] |
© CodeThat.com, 2003-2010
Design by XTLabs, Inc
Sponsored by Rocket Division Software, LTD.