Full version: jsB@nk » Menu » Floatable » Top-Slide-Menu
URL: https://www.javascriptbank.com/top-slide-menu-index.html
Top-Slide-Menu is a space-saving slidemenu on the top of your webpage. Just click on a category and the JavaScript menu item will slide down revealing its mapped submenus. Click on the spot again and the JavaScript menu item will slide back. As the script is based on simple imagemaps you can design them as you like.
Full version: jsB@nk » Menu » Floatable » Top-Slide-Menu
URL: https://www.javascriptbank.com/top-slide-menu-index.html
<STYLE type=text/css>.menu {LEFT: -1000px; POSITION: absolute}</STYLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT language=JavaScript><!-- Beginning of JavaScript -// Top-Slide-Menu// INSTRUCTIONS:// 1. Create an imagemap (image with hotspots) for each of your menu categories.// 2. Put each imagemap into a DIV-Container. These DIV-containers must be called // menu1, menu2, menu3 and so on. Insert those DIV-containers at the end// of the body-section.// 3. Configure the vertical and horizontal position of each imagemap (just below)// 4. The bottom part of each imagemap calls a special function called // getmenuname('menu1'). See inside the body-section how this should look like.// 5. The top part of each imagemap is simple imagemapping where you can configure// the hotspots for your links. In this sample only one URL for each category // has been configured. Yet you can add as many links as you like.// 6. Do not forget to copy the style-tag inside the head-section of the document.// 7. Configure the script-variables just below.// Configure the horizontal position for each menu-category (pixels)// If you want more than 3 menu categories you have to add menu4left, menu5left // and so on.var menu1left=10var menu2left=103var menu3left=196// Configure the vertical position for your menu-categories (pixels).// This value should be the same for all menu-categoriesvar menutop=-110// This variable configures the length and the speed of the menu-movement. // Play around with it until you are satisfied.var pace=14// If you want more than 3 menu categories you have to add vorzeimenu4, // vorzeimenu5, vorzeimenu6 and so onvar vorzeimenu1=-1var vorzeimenu2=-1var vorzeimenu3=-1// Don't edit the variables below.var stepvar directionvar pause=25var thismenuvar vorzeichen=1var menuismoving="no"// If you have more than 3 menu-catagories// you have to change this function too. It sould be not too difficult. // In fact it's just a matter of proper counting!function inite() {if (document.layers) { document.menu1.left=menu1left document.menu2.left=menu2left document.menu3.left=menu3left document.menu1.top=menutop document.menu2.top=menutop document.menu3.top=menutop}if (document.all) { document.all.menu1.style.posLeft=menu1left document.all.menu2.style.posLeft=menu2left document.all.menu3.style.posLeft=menu3left document.all.menu1.style.posTop=menutop document.all.menu2.style.posTop=menutop document.all.menu3.style.posTop=menutop}}// This function needs no configurationfunction getmenuname(clickedmenu) { if (menuismoving=="no") { if (document.layers) { thismenu=eval("document."+clickedmenu) } if (document.all) { thismenu=eval("document.all."+clickedmenu+".style") } step=pace checkdirection() movemenu() }}// If you have more than 3 menu-catagories// you have to change this function too. It's just a matter of proper counting!function checkdirection() {if (document.layers) { if (thismenu==document.menu1){vorzeimenu1=vorzeimenu1*-1;vorzeichen=vorzeimenu1} if (thismenu==document.menu2){vorzeimenu2=vorzeimenu2*-1;vorzeichen=vorzeimenu2} if (thismenu==document.menu3){vorzeimenu3=vorzeimenu3*-1;vorzeichen=vorzeimenu3} }if (document.all) { if (thismenu==document.all.menu1.style){vorzeimenu1=vorzeimenu1*-1;vorzeichen=vorzeimenu1} if (thismenu==document.all.menu2.style){vorzeimenu2=vorzeimenu2*-1;vorzeichen=vorzeimenu2} if (thismenu==document.all.menu3.style){vorzeimenu3=vorzeimenu3*-1;vorzeichen=vorzeimenu3} } menuismoving="yes"}// This function needs no configurationfunction movemenu() {if (document.layers) { if (step>=0) { thismenu.top+=step*vorzeichen step-- var movetimer=setTimeout("movemenu()",pause) } else { menuismoving="no" clearTimeout(movetimer) }} if (document.all) { if (step>=0) { thismenu.posTop+=step*vorzeichen step-- var movetimer=setTimeout("movemenu()",pause) } else { menuismoving="no" clearTimeout(movetimer) } }}// - End of JavaScript - --></SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><BODY onload=inite()><DIV class=menu id=menu1> <IMG border=0 src="navtopslider1.gif" useMap=#men1 width="93" height="150"> <MAP name=men1><AREA coords=0,115,93,150 href="javascript:getmenuname('menu1')" shape=RECT><AREA coords=0,30,93,100 href="http://www.JavaScriptBank.com/" shape=RECT target=_blank></MAP></DIV><DIV class=menu id=menu2> <IMG border=0 src="navtopslider2.gif" useMap=#men2 width="93" height="150"> <MAP name=men2><AREA coords=0,115,93,150 href="javascript:getmenuname('menu2')" shape=RECT><AREA coords=0,30,93,100 href="http://www.JavaScriptBank.com/" shape=RECT target=_blank></MAP></DIV><DIV class=menu id=menu3> <IMG border=0 src="navtopslider3.gif" useMap=#men3 width="93" height="150"> <MAP name=men3><AREA coords=0,115,93,150 href="javascript:getmenuname('menu3')" shape=RECT><AREA coords=0,30,93,100 href="http://www.JavaScriptBank.com/" shape=RECT target=_blank></MAP></DIV> </BODY><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->http://javascriptbank.com/javascript/menu/Top_Slide_Menu/Top_Slide_Menu_images.zip