Full version: jsB@nk » Menu » Floatable » Vertical Slide-In-Slide-Out-Menu
URL: https://www.javascriptbank.com/vertical-slide-in-slide-out-menu-index.html
This elegant JavaScript menu sticks at the left side of your webpage and consumes almost no space (trick: vertical labeling of the main-topics). Easy to configure.
Full version: jsB@nk » Menu » Floatable » Vertical Slide-In-Slide-Out-Menu
URL: https://www.javascriptbank.com/vertical-slide-in-slide-out-menu-index.html
<STYLE type=text/css>#menu1 {LEFT: -1000px; POSITION: absolute}#menu2 {LEFT: -1000px; POSITION: absolute}#menu3 {LEFT: -1000px; POSITION: absolute}.baseline {COLOR: #000000; FONT-FAMILY: Arial; FONT-SIZE: 9pt; LEFT: 250px; POSITION: absolute; TOP: 40px}</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 -// Vertical-Slide-Menu// Set the starting position of the categories of your menuvar menu1top=5var menu2top=95var menu3top=185var menuleft=-115// This number configures the length and the speed of the menu-movement. // Play around with it until you are satisfied.var pace=14// Don't change the variables below.var stepvar directionvar pause=25var thismenuvar vorzeichen=1var vorzeimenu1=-1var vorzeimenu2=-1var vorzeimenu3=-1var menuismoving="no"function gotourl(thisurl) { alert("\n\nThis is onlay a demonstration.\nYou will not be linked to "+thisurl+".html.")}function inite() {if (document.layers) { document.menu1.left=menuleft document.menu2.left=menuleft document.menu3.left=menuleft document.menu1.top=menu1top document.menu2.top=menu2top document.menu3.top=menu3top}if (document.all) { document.all.menu1.style.posLeft=menuleft document.all.menu2.style.posLeft=menuleft document.all.menu3.style.posLeft=menuleft document.all.menu1.style.posTop=menu1top document.all.menu2.style.posTop=menu2top document.all.menu3.style.posTop=menu3top}}function 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() }}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"}function movemenu() {if (document.layers) { if (step>=0) { thismenu.left+=step*vorzeichen step-- var movetimer=setTimeout("movemenu()",pause) } else { menuismoving="no" clearTimeout(movetimer) }} if (document.all) { if (step>=0) { thismenu.posLeft+=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 id=menu1><IMG border=0 height=93 src="menu1dec99.gif" useMap=#menu1dec99.gif width=150> <MAP name=menu1dec99.gif><AREA coords=117,10,132,83 href="javascript:getmenuname('menu1')" shape=RECT><AREA coords=22,10,91,24 href="javascript:gotourl('contact1')" shape=RECT><AREA coords=22,25,91,38 href="javascript:gotourl('contact2')" shape=RECT><AREA coords=19,39,92,51 href="javascript:gotourl('contact3')" shape=RECT><AREA coords=19,54,91,64 href="javascript:gotourl('contact4')" shape=RECT><AREA coords=20,67,93,79 href="javascript:gotourl('contact5')" shape=RECT></MAP></DIV><DIV id=menu2><IMG border=0 height=93 src="menu2dec99.gif" useMap=#menu2dec99.gif width=150> <MAP name=menu2dec99.gif><AREA coords=117,7,133,82 href="javascript:getmenuname('menu2')" shape=RECT><AREA coords=20,12,63,23 href="javascript:gotourl('link1')" shape=RECT><AREA coords=18,24,65,37 href="javascript:gotourl('link2')" shape=RECT><AREA coords=18,40,66,52 href="javascript:gotourl('link3')" shape=RECT><AREA coords=19,55,71,63 href="javascript:gotourl('link4')" shape=RECT><AREA coords=16,68,72,80 href="javascript:gotourl('link5')" shape=RECT></MAP></DIV><DIV id=menu3><IMG border=0 height=93 src="menu3dec99.gif" useMap=#menu3dec99.gif width=150> <MAP name=menu3dec99.gif><AREA coords=117,7,133,82 href="javascript:getmenuname('menu3')" shape=RECT><AREA coords=19,9,82,24 href="javascript:gotourl('theme1')" shape=RECT><AREA coords=17,25,82,36 href="javascript:gotourl('theme2')" shape=RECT><AREA coords=19,37,81,50 href="javascript:gotourl('theme3')" shape=RECT><AREA coords=19,51,82,64 href="javascript:gotourl('theme4')" shape=RECT><AREA coords=19,66,82,78 href="javascript:gotourl('theme5')" shape=RECT></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/Vertical_Slide_In_Slide_Out_Menu/Vertical_Slide_In_Slide_Out_Menu_images.zip