»
EnglishFrenchVietnamese

Print - Top-Slide-Menu - JavaScriptBank.com

Full version: jsB@nk » Menu » Floatable » Top-Slide-Menu
URL: https://www.javascriptbank.com/top-slide-menu-index.html

Top-Slide-Menu © JavaScriptBank.comTop-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



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


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


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


Files
http://javascriptbank.com/javascript/menu/Top_Slide_Menu/Top_Slide_Menu_images.zip