<html>
<head>
<script SRC="layers.js"></SCRIPT>
<script LANGUAGE="JavaScript">
// tree menuing system - Danny Sauer, 12/13/2000
// uses hidden layers to build a tree menu dealie :)
// *requires* that my layers.js be included with another "SCRIPT SRC="
// Wait, I wrote this on my own time - that must mean that this is
// a product of Aardvarks With Chisels! That means that this comment
// field can not be removed or altered. Otherwise, the code can be
// mangled in any way that's likewise released for public consumption.
// there are 2 things in the script that you need to deal with. First,
// you need to set the elements of "inits" to the name of each menu you
// have set up. For example, if you have menu1 and menu2, you'd set
// inits = ["menu1", "menu2"], and then need 4 layers, with id "menu1-c"
// "menu1-e", "menu2-c", "menu2-e".
// the second thing is to change the style sheet around, making sure that
// the content and menubar are located in the proper posiitons relative
// to each other.
// the third thing (yes, number 3 of 2?) is to set menuTop and menuLeft.
// the menu names (ick) in the order they should appear
// remember - this is all you really have to change in the javascript code... :)
// Hmm, does that mean that the rest of the stuff could be moved to an
// external library? menus.js? Ohh, I'll bet it does! ;) Just as soon as I get
// nested submenus implemented, I might do that.
var inits = ["a_menu", "b_menu", "c_menu"];
// the upper left of the menu
// you might want to change this as well.
var menuTop = 5;
var menuLeft = 5;
// the array of menu elements - kinda dynamically built
var collapsed = new Array;
var expanded = new Array;
var displayed = new Array;
// init is ugly. It gets the names of each menu item from inits[]
// and adds them to an array. It assumes that menu items are
// called menu_c and menu_e for the collapsed and expanded
// versions, respectively. Bah. Oh, and starts out all collapsed.
function init(){
for(var i=0; i<inits.length; i++){
collapsed[i] = getObject(inits[i] + '_c');
expanded[i] = getObject(inits[i] + '_e');
displayed[i] = collapsed[i];
moveObjTo(collapsed[i], menuTop, menuLeft);
moveObjTo(expanded[i], menuTop, menuLeft);
// reflow will show hidden stuff, right?
hide(collapsed[i]);
hide(expanded[i]);
}
reflow();
return true;
}
// collapse takes a layer and replaces it with the collapsed version,
// then reflows the menu
// BTW, if we can assume that only one item is collapsed at a time, we
// could replace this whole thing with "displayed = collapsed", since
// by definition, the thing we're collapsing must be the only thing
// that is not collapsed, and thus after we return all should be
// collapsed. (well, there should actually be a reflow() here too)
function collapse(item){
// find what we are to collapse
for(var i=0; i<collapsed.length; i++){
if(mangle(collapsed[i].id) == item.toLowerCase()){
hide(displayed[i]);
displayed[i] = collapsed[i];
i = collapsed.length;
}
}
reflow();
return false; // to disable the clicking thingie
}
// uncollapse is like collapse, only different :)
// (Again, if assuming only one expanded at any given time, we would
// first make all collapsed, then expand one)
function uncollapse(item){
for(var i=0; i<expanded.length; i++){
if(mangle(expanded[i].id) == item.toLowerCase()){
hide(displayed[i]);
displayed[i] = expanded[i];
i = expanded.length;
}
}
reflow();
return false; // to disable the clicking thingie (maybe)
}
// reflow handles moving the elements - it should be called after every
// collapse and uncollaapse
function reflow(){
var tTop = menuTop;
var tLeft = menuLeft;
for(var i=0; i<displayed.length; i++){
moveObjTo(displayed[i], tLeft, tTop);
show(displayed[i]);
tTop += getObjHeight(displayed[i]);
}
}
// flip the menu upside down (last elem goes first, etc)
function invert(){
collapsed.reverse();
expanded.reverse();
displayed.reverse();
reflow();
}
// mangle returns the lowercased name without the _e or _c
function mangle(prettyFace){
prettyFace = prettyFace.toLowerCase();
prettyFace = prettyFace.substring(0, prettyFace.lastIndexOf('_'));
return prettyFace;
}
</SCRIPT>
<style TYPE="text/css">
BODY{
padding:0px;
margin:0px;
}
.menu {
position:absolute;
width:100px;
height:100%;
left:0;
top:0;
padding:0px;
margin:0px;
background-color:lightgrey; /* stupid NS */
border:1px solid lightgrey; /* stupid NS */
layer-background-color:lightgrey; }
.menuitem {
width:90px;
padding:0px;
margin:0px;
height:auto;
position:absolute;
visibility:hidden; }
#content_pane {
left:100px;
padding:10px;
margin:0px;
position:absolute; }
</STYLE>
</head>
<body OnLoad="init();">
<!-- content -->
<div ID="content_pane">
Hello, I'm the content. Hey, look at me! I'm content!
<a HREF="javascript:reflow();">reflow</a>
<a HREF="javascript:invert();">invert</a><br>
<a HREF="javascript:moveToCenter(displayed[0]);">center displayed[0]</a>
<a HREF="javascript:moveToCenter(displayed[1]);">center displayed[1]</a>
<a HREF="javascript:moveToCenter(displayed[2]);">center displayed[2]</a>
</div>
<!-- end content -->
<!-- menu bar -->
<p CLASS="menu">
<!-- menu item 1 -->
<div CLASS="menuitem" ID="a_menu_c">
<a HREF="#" OnClick="uncollapse('a_menu')">expand</a><br>
menu 1
</div>
<div CLASS="menuitem" ID="a_menu_e">
<a HREF="#" OnClick="collapse('a_menu')">collapse</a><br>
This is menu 1 expanded.<br>
It could easily be a table with rollover highlighted images,
or with IE, could even be text with changing color table
background elements.
</div>
<!-- menu item 2 -->
<div CLASS="menuitem" ID="b_menu_c">
<a HREF="#" OnClick="uncollapse('b_menu')">expand</a><br>
menu 2
</div>
<div CLASS="menuitem" ID="b_menu_e">
<a HREF="#" OnClick="collapse('b_menu')">collapse</a><br>
Like menu 1, this is menu 2 expanded<br>
Unlike menu 1, this one has more than<br>
one line...
</div>
<!-- menu item 3 -->
<div CLASS="menuitem" ID="c_menu_c">
<a HREF="#" OnClick="uncollapse('c_menu')">expand</a><br>
menu 3
</div>
<div CLASS="menuitem" ID="c_menu_e">
<a HREF="#" OnClick="collapse('c_menu')">collapse</a><br>
Like menu 1, this is menu 3 expanded
</div>
</p>
<!-- end menubar -->
</body>
</html> |
Products of Aardvarks With Chisels :