»
EnglishFrenchVietnamese

Print - Vertical Slide-In-Slide-Out-Menu - JavaScriptBank.com

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

Vertical Slide-In-Slide-Out-Menu © JavaScriptBank.comThis 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



CSS
<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-->


JavaScript
<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-->


HTML
<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-->


Files
http://javascriptbank.com/javascript/menu/Vertical_Slide_In_Slide_Out_Menu/Vertical_Slide_In_Slide_Out_Menu_images.zip