// list with a // different ID, of course :). You can hae as many menus as you want on a page. // Here's a menu object to control the above list of menu data: // Copy the below line for each additional menu, create a unique object name and change the // first parameter of the object constructor to the same name. var listMenu = new FSMenu('listMenu', true, 'display', 'block', 'none'); // MENU REPOSITIONING: This will stop menus showing outside visible screen boundaries. page.winW=function() { with (this) return Math.max(minW, MS?win.document[db].clientWidth:win.innerWidth) }; page.winH=function() { with (this) return Math.max(minH, MS?win.document[db].clientHeight:win.innerHeight) }; page.scrollX=function() { with (this) return MS?win.document[db].scrollLeft:win.pageXOffset }; page.scrollY=function() { with (this) return MS?win.document[db].scrollTop:win.pageYOffset }; function repositionMenus(mN) { with (this) { var menu = this.menus[mN].lyr; // Showing before measuring corrects MSIE bug. menu.sty.display = 'block'; // Reset to and/or store original margins. if (!menu._fsm_origML) menu._fsm_origML = menu.ref.currentStyle ? menu.ref.currentStyle.marginLeft : (menu.sty.marginLeft || 'auto'); if (!menu._fsm_origMT) menu._fsm_origMT = menu.ref.currentStyle ? menu.ref.currentStyle.marginTop : (menu.sty.marginTop || 'auto'); menu.sty.marginLeft = menu._fsm_origML; menu.sty.marginTop = menu._fsm_origMT; // Calculate absolute position within document. var menuX = 0, menuY = 0, menuW = menu.ref.offsetWidth, menuH = menu.ref.offsetHeight, vpL = page.scrollX(), vpR = vpL + page.winW() - 16, vpT = page.scrollY(), vpB = vpT + page.winH() - 16; var tmp = menu.ref; while (tmp) { menuX += tmp.offsetLeft; menuY += tmp.offsetTop; tmp = tmp.offsetParent; } // Compare position to viewport, reposition accordingly. var mgL = 0, mgT = 0; if (menuX + menuW > vpR) mgL = vpR - menuX - menuW; if (menuX + mgL < vpL) mgL = vpL - menuX; if (menuY + menuH > vpB) mgT = vpB - menuY - menuH; if (menuY + mgT < vpT) mgT = vpT - menuY; if (mgL) menu.sty.marginLeft = mgL + 'px'; if (mgT) menu.sty.marginTop = mgT + 'px'; }}; // Set this to process menu show events for a given object. addEvent(listMenu, 'show', repositionMenus, true); // END of Menu Repositioning Code // The parameters of the FSMenu object are: // 1) Its own name in quotes. // 2) Whether this is a nested list menu or not (in this case, true means yes). // 3) The CSS property name to change when menus are shown and hidden. // 4) The visible value of that CSS property. // 5) The hidden value of that CSS property. // // There are some optional settings for delays, animation speed, highlighting, showing/hiding on // click, etc. Although not necessary, these options can be added to this script if extreme // customization is desired. Look at the source of fsmenu/fsmenu.html for information to copy // regarding these settings. // Now the fun part... animation! This script supports animation plugins you // can add to each menu object you create. I have provided 3 to get you started. // To enable animation, add one or more functions to the menuObject.animations // array; available animations are: // * FSMenu.animSwipeDown is a "swipe" animation that sweeps the menu down. // * FSMenu.animFade is an alpha fading animation using tranparency. // * FSMenu.animClipDown is a "blind" animation similar to 'Swipe'. // They are listed inside the "fsmenu.js" file for you to modify and extend :). // I'm applying two at once to listMenu. Delete this to disable! // For each menu, add animations desired like below. listMenu.animations[listMenu.animations.length] = FSMenu.animFade; listMenu.animations[listMenu.animations.length] = FSMenu.animSwipeDown; //listMenu.animations[listMenu.animations.length] = FSMenu.animClipDown; // Finally, on page load you have to activate the menu by calling its 'activateMenu()' method. // I've provided an "addEvent" method that lets you easily run page events across browsers. // You pass the activateMenu() function two parameters: // (1) The ID of the outermost