/* */ // 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 // 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 ( '\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 /* */ /* --- 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 = [ [' ','index.php?vasalat', ['  ZÁRBETÉTEK', 'index.php?termek=1'], ['  ZÁRLATI RENDSZER', 'index.php?termek=2'], ['  KILINCSEK', 'index.php?termek=3'], ['  VASALATOK', 'index.php?termek=4'], ['  POSTALÁDÁK', 'index.php?termek=5'], ['  KERTI ESZKÖZÖK', 'index.php?termek=6'], ['  EGYÉB', 'index.php?termek=7'], ], ['  ','/ablak'], ['  ','/kavezo'] ]; /* this is the menu with the green popup dhtml */ /* --- menu items --- */ /* 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 '
' + text + '
'; } /* */ /* --- geometry and timing of the menu --- */ var MENU_POS1 = new Array(); // item sizes for different levels of menu MENU_POS1['height'] = [63, 16, 0]; MENU_POS1['width'] = [215, 160, 0]; // 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'] = [130, 58, 0]; var szel = 0; if (screen.width==800) {szel=320-screen.width/15} else { if (screen.width==1024) {szel=302} else { if (screen.width==1280) {szel=431} }; }; if (screen.width==1152) {szel=368}; MENU_POS1['block_left'] = [szel, 55, 0]; // offsets between items of the same level MENU_POS1['top'] = [0, 21, 0]; MENU_POS1['left'] = [215, 0, 0]; // time in milliseconds before menu is hidden after cursor has gone out // of any items MENU_POS1['hide_delay'] = [200, 400, 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', ['', '#C9DBED', '#FFFFFF'], 'fontWeight', ['normal', 'normal', 'normal'], 'textDecoration', ['none', 'none', 'none'], ]; // state when item has mouse over it MENU_STYLES1['onmouseover'] = [ 'color', ['#ffffff', '#000000', '#000000'], 'background', ['', '#C9DBED', '#C9DBED'], 'fontWeight', ['normal', 'bold', 'normal'], 'textDecoration', ['none', 'none', 'none'], ]; // state when mouse button has been pressed on the item MENU_STYLES1['onmousedown'] = [ 'color', ['#ffffff', '#000000', '#000000'], 'background', ['', '#C9DBED', '#A8C5E1'], 'fontWeight', ['normal', 'bold', 'normal'], 'textDecoration', ['underline', '', ''], ]; // 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); // also take a look at stylesheets loaded in header in order to set static styles