Tigra Menu v 1

[Total: 0    Average: 0/5]

This builds a menu that can be vertical or horizontal.

Head Code:

<!-- static styles for demo menu #0-->
<style>
/* --- static menu styles ---
note:
	1. not all browsers render styles the same way so try out your style sheet
	on different browsers before publishing;
style naming convention:
	m<zero based menu number>l<zero based level number>i|o<for inner or outer tag>
*/

.m0l0i {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration : none;
	padding: 4px;
}
.m0l0o {
	text-decoration : none;
	border : 1px solid #ffffff;
}
.m0l1i {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration : none;
	padding: 4px;
}
.m0l1o {
	text-decoration : none;
	border : 1px solid #ffffff;
}
.m0l2i {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration : none;
	padding: 4px;
}
.m0l2o {
	text-decoration : none;
	border : 1px solid #ffffff;
}
</style>

<!-- static styles for demo menu #1-->
<style>
/* --- static menu styles ---
note:
	1. not all browsers render styles the same way so try out your style sheet
	on different browsers before publishing;
style naming convention:
	m<zero based menu number>l<zero based level number>i|o<for inner or outer tag>
*/

.m1l0i {
	font-family: Tahoma, Verdana, sans-serif;
	font-size: 12px;
	text-decoration : none;
	padding: 4px;
}
.m1l0o {
	text-decoration : none;
	border : 1px solid #666666;
}
.m1l1i {
	font-family: Tahoma, Verdana, sans-serif;
	font-size: 12px;
	text-decoration : none;
	padding: 4px;
}
.m1l1o {
	text-decoration : none;
	border : 1px solid #666666;
}
.m1l2i {
	font-family: Tahoma, Verdana, sans-serif;
	font-size: 12px;
	text-decoration : none;
	padding: 4px;
}
.m1l2o {
	text-decoration : none;
	border : 1px solid #666666;
}
</style>

<!-- static styles for demo menu #2-->
<style>
/* --- static menu styles ---
note:
	1. not all browsers render styles the same way so try out your style sheet
	on different browsers before publishing;
style naming convention:
	m<zero based menu number>l<zero based level number>i|o<for inner or outer tag>
*/

.m2l0i {
	font-family: Tahoma, Verdana, sans-serif;
	font-size: 12px;
	text-decoration : none;
	padding: 4px;
}
.m2l0o {
	text-decoration : none;
	border : 1px solid #6699cc;
}
</style>

Body Code:

<!-- menu script itself. you should not modify this code -->
<script language="JavaScript">
// Title: tigra menu
// Description: See the demo at url
// URL: http://menu.softcomplex.com/
// Version: 1.0
// Date: 01-09-2002 (mm-dd-yyyy)
// Author: Denis Gritcyuk <denis@softcomplex.com>
// Notes: Registration needed to use this script on your web site.
//  Registration for this version (1.0) is free of charge.
// See official site for details
// Got questions - visit forum http://menu.softcomplex.com/forum/

var menus = [];

// --- menu class ---
function menu (item_struct, pos, styles) {
// browser check
this.item_struct = item_struct;
this.pos = pos;
this.styles = styles;
this.id = menus.length;
this.items = [];
this.children = [];

this.add_item = menu_add_item;
this.hide = menu_hide;

this.onclick = menu_onclick;
this.onmouseout = menu_onmouseout;
this.onmouseover = menu_onmouseover;
this.onmousedown = menu_onmousedown;

var i;
for (i = 0; i < this.item_struct.length; i++)
new menu_item(i, this, this);
for (i = 0; i < this.children.length; i++)
this.children[i].visibility(true);
menus[this.id] = this;
}
function menu_add_item (item) {
var id = this.items.length;
this.items[id] = item;
return (id);
}
function menu_hide () {
for (var i = 0; i < this.items.length; i++) {
this.items[i].visibility(false);
this.items[i].switch_style('onmouseout');
}
}
function menu_onclick (id) {
var item = this.items[id];
return (item.fields[1] ? true : false);
}
function menu_onmouseout (id) {
this.hide_timer = setTimeout('menus['+ this.id +'].hide();',
this.pos['hide_delay'][this.active_item.depth]);
if (this.active_item.id == id)
this.active_item = null;
}
function menu_onmouseover (id) {
this.active_item = this.items[id];
clearTimeout(this.hide_timer);
var curr_item, visib;
for (var i = 0; i < this.items.length; i++) {
curr_item = this.items[i];
visib = (curr_item.arrpath.slice(0, curr_item.depth).join('_') ==
this.active_item.arrpath.slice(0, curr_item.depth).join('_'));
if (visib)
curr_item.switch_style (
curr_item == this.active_item ? 'onmouseover' : 'onmouseout');
curr_item.visibility(visib);
}
}
function menu_onmousedown (id) {
this.items[id].switch_style('onmousedown');
}
// --- menu item Class ---
function menu_item (path, parent, container) {
this.path = new String (path);
this.parent = parent;
this.container = container;
this.arrpath = this.path.split('_');
this.depth = this.arrpath.length - 1;
// get pointer to item's data in the structure
var struct_path = '', i;
for (i = 0; i <= this.depth; i++)
struct_path += '[' + (Number(this.arrpath[i]) + (i ? 2 : 0)) + ']';
eval('this.fields = this.container.item_struct' + struct_path);
if (!this.fields) return;

// assign methods
this.get_x = mitem_get_x;
this.get_y = mitem_get_y;
// these methods may be different for different browsers (i.e. non DOM compatible)
this.init = mitem_init;
this.visibility = mitem_visibility;
this.switch_style = mitem_switch_style;

// register in the collections
this.id = this.container.add_item(this);
parent.children[parent.children.length] = this;

// init recursively
this.init();
this.children = [];
var child_count = this.fields.length - 2;
for (i = 0; i < child_count; i++)
new menu_item (this.path + '_' + i, this, this.container);
this.switch_style('onmouseout');
}
function mitem_init() {
document.write (
'<a id="mi_' + this.container.id + '_'
+ this.id +'" class="m' + this.container.id + 'l' + this.depth 
+'o" href="' + this.fields[1] + '" style="position: absolute; top: '
+ this.get_y() + 'px; left: ' + this.get_x() + 'px; width: '
+ this.container.pos['width'][this.depth] + 'px; height: '
+ this.container.pos['height'][this.depth] + 'px; visibility: hidden;'
+' background: black; color: white; z-index: ' + this.depth + ';" '
+ 'onclick="return menus[' + this.container.id + '].onclick('
+ this.id + ');" onmouseout="menus[' + this.container.id + '].onmouseout('
+ this.id + ');" onmouseover="menus[' + this.container.id + '].onmouseover('
+ this.id + ');" onmousedown="menus[' + this.container.id + '].onmousedown('
+ this.id + ');"><div class="m'  + this.container.id + 'l' + this.depth + 'i">'
+ this.fields[0] + "</div></a>n"
);
this.element = document.getElementById('mi_' + this.container.id + '_' + this.id);
}
function mitem_visibility(make_visible) {
if (make_visible != null) {
if (this.visible == make_visible) return;
this.visible = make_visible;
if (make_visible)
this.element.style.visibility = 'visible';
else if (this.depth)
this.element.style.visibility = 'hidden';
}
return (this.visible);
}
function mitem_get_x() {
var value = 0;
for (var i = 0; i <= this.depth; i++)
value += this.container.pos['block_left'][i]
+ this.arrpath[i] * this.container.pos['left'][i];
return (value);
}
function mitem_get_y() {
var value = 0;
for (var i = 0; i <= this.depth; i++)
value += this.container.pos['block_top'][i]
+ this.arrpath[i] * this.container.pos['top'][i];
return (value);
}
function mitem_switch_style(state) {
if (this.state == state) return;
this.state = state;
var style = this.container.styles[state];
for (var i = 0; i < style.length; i += 2)
if (style[i] && style[i+1])
eval('this.element.style.' + style[i] + "='" 
+ style[i+1][this.depth] + "';");
}
// that's all folks
</script>


<!-- items structure. used for 2 menus on this page -->
<script language="JavaScript">
/* --- menu items --- */
/* # is where you put your URL links */
/*     can be mailto:someone@site.com */
/*     or http://www.site.com */
/*     or page.html */
/* null means no link */
var MENU_ITEMS = [
['Header1', null,
['Item1-A', '#'],
['Item1-B', '#',
['Item1-B1', '#'],
['Item1-B2', '#'],
['Item1-B3', '#'],
],
['Item1-C', '#'],
],
['Header2', null,
['Item2-A', null,
['Item2-A1', null],
['Item2-A2', null],
['Item2-A3', null],
['Item2-A4', null],
['Item2-A5', null],
['Item2-A6', null],
['Item2-A7', null],
['Item2-A8', null],
],
['Item2-B', null,
['Item2-B1', null],
['Item2-B2', null],
['Item2-B3', null],
],
['Item2-C', '#'],
],
['Header3', null,
['Item3-A', '#'],
['Item3-B', '#'],
['Item3-C', '#'],
['Item3-D', '#'],
['Item3-E', '#'],
['Item3-F', '#'],
['Item3-G', '#'],
['Item3-H', '#'],
['Item3-I', '#'],
],
['Header4', '#',
['Item4-A', '#',
['Item4-A1', '#'],
['Item4-A2', '#'],
['Item4-A3', '#'],
],
['Item4-B', null,
['Item4-B1', '#'],
['Item4-B2', null],
['Item4-B3', null],
['Item4-B4', null],
],
['Item4-C', '#'],
],
];
</script>


<script language="JavaScript">
/* this is the menu with the green popup dhtml */
/* --- menu items --- */
var MENU_ITEMS3 = [
['Topic1'],
['Topic2', null,
[pupup(
'<div style="text-decoration: none; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 13px; color: black; margin: 4px;"><p><a href="#" style="color: white; font-weight: bold;">Timestamp Picker</a><br>Popup timestamp picker is a JavaScript that makes it easy for your visitors to fill out the date/time field(s) of your form, by selecting the date from a popup calendar.</p>'+
'<p><a href="#" style="color: white; font-weight: bold;">Tigra Menu PRO v1.0</a><br>Tigra Menu PRO is flexiple menu solution for commercial applications offering high reliability and wide browsers support.</p></div>'
), '#'],
],
["Topic3", null,
[pupup('<div style="text-decoration: none; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 13px; color: black; margin: 4px;"><p><span style="color: white; font-weight: bold;">' + "Let's cooperate" + '</span><br>Got original configuration of Tigra Menu on your site? Want some traffic? <a href="#">' + "Mail me</a> and I'll publish your link in coming soon designs library for others to see what creative person can do with Tigra Menu.</p></div>"), '#'],
],
['Topic4', null,
[pupup('<div style="text-decoration: none; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 13px; color: black; margin: 4px;"><p><a href="#" style="color: white; font-weight: bold;">Softcomplex</a><br>Contact us at SoftComplex if you need any kind of software solution. For details visit our site at <a href="#">www.softcomplex.com</a>. We are open to discuss your needs. You will like our rates.</p></div>'), '#'],
],
];

/*
This simple function is wrapper. It puts html around text given.
You can write your own wrappers for higher efficiency and better
code maintanebility
*/
function pupup (text) {
return '<table border=0 cellpadding=0 cellspacing=0><tr><td><img border=0 src="/data/img_ex_886/01.gif" width=9 height=11></td><td background="/data/img_ex_886/02.gif"><img border=0 src="/data/img_ex_886/pixel.gif" width=261 height=11></td><td colspan=2 rowspan=2><img border=0 src="/data/img_ex_886/03.gif" width=89 height=167></td><td><img border=0 src="/data/img_ex_886/pixel.gif" width=1 height=11></td></tr><tr><td rowspan=2 background="/data/img_ex_886/04.gif"><img border=0 src="/data/img_ex_886/pixel.gif" width=9 height=200></td><td rowspan="2" bgcolor="#339933" valign="top" style="font-decoration: none;">'
+ text + '</td><td><img border=0 src="/data/img_ex_886/pixel.gif" width=1 height=156></td></tr><tr><td background="/data/img_ex_886/05.gif"><img border=0 src="/data/img_ex_886/pixel.gif" width=13 height=70></td><td rowspan="2"><img border=0 src="/data/img_ex_886/pixel.gif" width=76 height=70></td><td><img border=0 src="/data/img_ex_886/pixel.gif" width=1 height=70></td></tr><tr><td><img border=0 src="/data/img_ex_886/06.gif" width=9 height=17></td><td background="/data/img_ex_886/07.gif"><img border=0 src="/data/img_ex_886/pixel.gif" width=1 height=17></td><td><img border=0 src="/data/img_ex_886/08.gif" width=13 height=17></td><td><img border=0 src="/data/img_ex_886/pixel.gif" width=1 height=17></td></tr></table>';
}
</script>

<!-- files with geometry and styles structures for coresponding menus -->
<script language="JavaScript">
/* --- geometry and timing of the menu --- */
var MENU_POS1 = new Array();
// item sizes for different levels of menu
MENU_POS1['height'] = [25, 20, 20];
MENU_POS1['width'] = [130, 170, 170];
// menu block offset from the origin:
// for root level origin is upper left corner of the page
// for other levels origin is upper left corner of parent item
MENU_POS1['block_top'] = [80, 25, 0];
MENU_POS1['block_left'] = [12, 0, 171];
// offsets between items of the same level
MENU_POS1['top'] = [0, 21, 21];
MENU_POS1['left'] = [131, 0, 0];
// time in milliseconds before menu is hidden after cursor has gone out
// of any items
MENU_POS1['hide_delay'] = [200, 200, 200];

/* --- dynamic menu styles ---
note: you can add as many style properties as you wish but be not all browsers
are able to render them correctly. The only relatively safe properties are
'color' and 'background'.
*/
var MENU_STYLES1 = new Array();
// default item state when it is visible but doesn't have mouse over
MENU_STYLES1['onmouseout'] = [
'color', ['#ffffff', '#000000', '#000000'], 
'background', ['#336699', '#339966', '#993366'],
'fontWeight', ['normal', 'normal', 'normal'],
'textDecoration', ['none', 'none', 'none'],
];
// state when item has mouse over it
MENU_STYLES1['onmouseover'] = [
'color', ['#ffffff', '#000000', '#000000'], 
'background', ['#6699cc', '#66cc99', '#cc6699'],
'fontWeight', ['normal', 'bold', 'normal'],
'textDecoration', ['underline', 'none', 'none'],
];
// state when mouse button has been pressed on the item
MENU_STYLES1['onmousedown'] = [
'color', ['#ffffff', '#000000', '#000000'], 
'background', ['#99ccff', '#99ffcc', '#cc99ff'],
'fontWeight', ['normal', 'bold', 'normal'],
'textDecoration', ['underline', 'none', 'none'],
];
</script>


<script language="JavaScript">
/* --- geometry and timing of the menu --- */
var MENU_POS2 = new Array();
// item sizes for different levels of menu
MENU_POS2['width'] = [160, 130, 130];
MENU_POS2['height'] = [20, 20, 20];
// menu block offset from the origin:
// for root level origin is upper left corner of the page
// for other levels origin is upper left corner of parent item
MENU_POS2['block_top'] = [80, 10, 10];
MENU_POS2['block_left'] = [590, -100, 100];
// offsets between items of the same level
MENU_POS2['top'] = [21, 21, 21];
MENU_POS2['left'] = [0, 0, 0];
// time in milliseconds before menu is hidden after cursor has gone out
// of any items
MENU_POS2['hide_delay'] = [200, 200, 200];

/* --- dynamic menu styles ---
note: you can add as many style properties as you wish but be not all browsers
are able to render them correctly. The only relatively safe properties are
'color' and 'background'.
*/
var MENU_STYLES2 = new Array();
// default item state when it is visible but doesn't have mouse over
MENU_STYLES2['onmouseout'] = [
'color', ['#000000', '#000000', '#000000'], 
'background', ['#ffffff', '#ffffff', '#ffffff'],
];
// state when item has mouse over it
MENU_STYLES2['onmouseover'] = [
// 'color', ['#000000, '#000000', '#000000'], 
'background', ['#cccccc', '#cccccc', '#cccccc'],
];
MENU_STYLES2['onmousedown'] = [
// 'color', ['#000000', '#000000', '#000000'], 
'background', ['#cccccc', '#cccccc', '#cccccc'],
];
</script>


<script language="JavaScript">
/* --- geometry and timing of the menu --- */
var MENU_POS3 = new Array();
// item sizes for different levels of menu
MENU_POS3['height'] = [25, 250];
MENU_POS3['width'] = [150, 363];
// menu block offset from the origin:
// for root level origin is upper left corner of the page
// for other levels origin is upper left corner of parent item
MENU_POS3['block_top'] = [200, 10];
MENU_POS3['block_left'] = [590, -363];
// offsets between items of the same level
MENU_POS3['top'] = [24, 21];
MENU_POS3['left'] = [0, 0, 0];
// time in milliseconds before menu is hidden after cursor has gone out
// of any items
MENU_POS3['hide_delay'] = [200, 200];

/* --- dynamic menu styles ---
note: you can add as many style properties as you wish but be not all browsers
are able to render them correctly. The only relatively safe properties are
'color' and 'background'.
*/
var MENU_STYLES3 = new Array();
// default item state when it is visible but doesn't have mouse over
MENU_STYLES3['onmouseout'] = [
'background', ['#336699', '#ffffff'],
'textDecoration', ['none', 'none']
];
// state when item has mouse over it
MENU_STYLES3['onmouseover'] = [
'background', ['#6699cc', '#ffffff'],
'textDecoration', ['none', 'none']
];
// state when mouse button has been pressed on the item
MENU_STYLES3['onmousedown'] = [
'background', ['#99ccff', '#ffffff'],
'textDecoration', ['none', 'none']
];
</script>


<script language="JavaScript">
// create as many menus as you wish
// each menu gets three parameters (see demo files)
// 1. items structure
// 2. geometry structure
// 3. dynamic styles structure
new menu (MENU_ITEMS, MENU_POS1, MENU_STYLES1);
new menu (MENU_ITEMS, MENU_POS2, MENU_STYLES2);
new menu (MENU_ITEMS3, MENU_POS3, MENU_STYLES3);
// also take a look at stylesheets loaded in header in order to set static styles
</script>

Times Viewed: 2

Leave a Reply

Your email address will not be published. Required fields are marked *