»
EnglishFrenchVietnamese

Print - MenuShooter - JavaScriptBank.com

Full version: jsB@nk » Menu » Navigation » MenuShooter
URL: http://www.javascriptbank.com/menushooter-index.html

MenuShooter © JavaScriptBank.comThis full-fledged slide-in-slide-out JavaScript menu can not be opened by clicking on a button. Instead you have to shooting gun open each menu-item with your Colt.

Full version: jsB@nk » Menu » Navigation » MenuShooter
URL: http://www.javascriptbank.com/menushooter-index.html



CSS
<STYLE type=text/css>#menu1 {LEFT: -1000px; POSITION: absolute}#menu2 {LEFT: -1000px; POSITION: absolute}#menu3 {LEFT: -1000px; POSITION: absolute}#menu4 {LEFT: -1000px; POSITION: absolute}#gun1 {LEFT: -1000px; POSITION: absolute}#gun2 {LEFT: -1000px; POSITION: absolute}#bullet {LEFT: -1000px; POSITION: absolute}#hole {LEFT: -1000px; POSITION: absolute}.baseline {COLOR: #000000; FONT-FAMILY: Verdana; FONT-SIZE: 8pt; LEFT: 175px; POSITION: absolute; TOP: 10px}</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 -// MenuShooter by Urs Dudli , info@24fun.com// CONFIGURATION:// Configure the variables below:// The vertical position of your menu-items (pixels from top-margin)// If you have 4 menu-items you need 4 variables 'menuXtop'var menu1top=10var menu2top=100var menu3top=190var menu4top=280// If you have 4 menu-items you need 4 variables 'vorzeimenuX'var vorzeimenu1=-1var vorzeimenu2=-1var vorzeimenu3=-1var vorzeimenu4=-1// The horizontal position of your menu-items (pixels from left-margin)var menuleft=-115// Do not edit the variables belowvar pace=14var stepvar stepgun=10var pausegun=15var stepbullet=50var pausebullet=30var directionvar pause=25var bulletposheightvar bulletposrightvar thismenuvar vorzeichen=1var gunposrightvar gunmaxheightvar marginbottomvar menuismoving="no"// Edit ths function only if you have more or less than 4 menu-itemsfunction inite() {if (document.layers) {marginbottom=window.innerHeightgunposright=window.innerWidth-200    gunmaxheight=marginbottom-150bulletposright=gunposright-80        document.menu1.left=menuleft        document.menu2.left=menuleft        document.menu3.left=menuleft document.menu4.left=menuleft         document.menu1.top=menu1top        document.menu2.top=menu2top        document.menu3.top=menu3topdocument.menu4.top=menu4topdocument.gun1.left=gunposright        document.gun1.top=gunmaxheightdocument.onkeypress=keyDown document.captureEvents(Event.KEYPRESS)movegun()}if (document.all) {marginbottom=document.body.clientHeightgunmaxheight=marginbottom-150    gunposright=document.body.clientWidth-200bulletposright=gunposright-80        document.all.menu1.style.posLeft=menuleft        document.all.menu2.style.posLeft=menuleft        document.all.menu3.style.posLeft=menuleftdocument.all.menu4.style.posLeft=menuleft        document.all.menu1.style.posTop=menu1top        document.all.menu2.style.posTop=menu2top        document.all.menu3.style.posTop=menu3topdocument.all.menu4.style.posTop=menu4topdocument.all.gun1.style.posLeft=gunposright        document.all.gun1.style.posTop=gunmaxheightdocument.onkeydown=keyDownmovegun()}}// Edit ths function only if you have more or less than 4 menu-itemsfunction getmenuname() {    if (menuismoving=="no") {if (bulletposheight>menu1top && bulletposheight<menu2top) {var clickedmenu="menu1"}else if (bulletposheight>menu2top && bulletposheight<menu3top) {var clickedmenu="menu2"}else if (bulletposheight>menu3top && bulletposheight<menu4top) {var clickedmenu="menu3"}else if (bulletposheight>menu4top && bulletposheight<menu4top+90) {var clickedmenu="menu4"}else {var clickedmenu="nohit"}    if (document.layers && clickedmenu!="nohit") {            thismenu=eval("document."+clickedmenu)    }    if (document.all && clickedmenu!="nohit") {            thismenu=eval("document.all."+clickedmenu+".style")    }        step=paceif (clickedmenu!="nohit") {showhole()        checkdirection()    movemenu()}    }}// Edit ths function only if you have more or less than 4 menu-itemsfunction 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 (thismenu==document.menu4){vorzeimenu4=vorzeimenu4*-1;vorzeichen=vorzeimenu4}     }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}  if (thismenu==document.all.menu4.style){vorzeimenu4=vorzeimenu4*-1;vorzeichen=vorzeimenu4}  }    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)        }    }}function keyDown(DownEvents){if (document.all) {  var k=window.event.keyCodeif (k==83 || k==115) {bulletposheight=document.all.gun1.style.posTop+50document.all.bullet.style.posTop=bulletposheightdocument.all.bullet.style.posLeft=bulletposrightshowgunup()movebullet()} }if (document.layers){var k=DownEvents.whichif (k==83 || k==115) {bulletposheight=document.gun1.top+50document.bullet.top=bulletposheightdocument.bullet.left=bulletposrightshowgunup()movebullet()}}}function movegun(){if (document.all) {if (document.all.gun1.style.posTop<-100) {stepgun=stepgun*(-1)}else if (document.all.gun1.style.posTop>gunmaxheight) {stepgun=stepgun*(-1)}document.all.gun1.style.posTop+=stepgunvar timer=setTimeout("movegun()",pausegun) }if (document.layers) {if (document.gun1.top<-100) {stepgun=stepgun*(-1)}else if (document.gun1.top>gunmaxheight) {stepgun=stepgun*(-1)}document.gun1.top+=stepgunvar timer=setTimeout("movegun()",pausegun) }}function movebullet(){if (document.all) {if (document.all.bullet.style.posLeft>20) {document.all.bullet.style.posLeft-=stepbulletwindow.status=document.all.bullet.style.posLeftvar timerbullet=setTimeout("movebullet()",pausebullet)}else {clearTimeout(timerbullet)document.all.bullet.style.posLeft=-1000getmenuname()} }if (document.layers) {if (document.bullet.left>20) {document.bullet.left-=stepbulletvar timerbullet=setTimeout("movebullet()",pausebullet)}else {clearTimeout(timerbullet)document.bullet.left=-1000getmenuname()} }}function showgunup(){if (document.all) {document.all.gun2.style.posTop=document.all.gun1.style.posTopdocument.all.gun2.style.posLeft=document.all.gun1.style.posLeftdocument.all.gun1.style.visibility="hidden" }if (document.layers) {document.gun2.top=document.gun1.topdocument.gun2.left=document.gun1.leftdocument.gun1.document.visibility="hidden" }var gunuptimer=setTimeout("hidegunup()",50)}function hidegunup(){if (document.all) {document.all.gun2.style.posLeft=-1000document.all.gun1.style.visibility="visible" }if (document.layers) {document.gun2.left=-1000document.gun1.document.visibility="show" }return}function showhole(){if (document.all) {document.all.hole.style.posTop=bulletposheight-20document.all.hole.style.posLeft=thismenu.posLeft+120 }if (document.layers) {document.hole.top=bulletposheight-20document.hole.left=thismenu.left+120 }var holetimer=setTimeout("hidehole()",200)}function hidehole(){if (document.all) {document.all.hole.style.posLeft=-1000 }if (document.layers) {document.hole.left=-1000 }return }// - 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="pics412.gif" useMap=#m1 width=150> <MAP name=m1><AREA coords=19,9,82,24   href="http://jsbank.topcities.com/home.jpg" shape=RECT   target=_blank><AREA coords=17,25,82,36   href="http://jsbank.topcities.com/home.jpg" shape=RECT   target=_blank><AREA coords=19,37,81,50   href="http://jsbank.topcities.com/home.jpg" shape=RECT   target=_blank><AREA coords=19,51,82,64   href="http://jsbank.topcities.com/home.jpg" shape=RECT   target=_blank><AREA coords=19,66,82,78   href="http://jsbank.topcities.com/home.jpg" shape=RECT   target=_blank></MAP></DIV><DIV id=menu2><IMG border=0 height=93 src="fun412.gif" useMap=#m2 width=150> <MAP name=m2><AREA coords=19,9,82,24   href="http://jsbank.topcities.com/home.jpg" shape=RECT   target=_blank><AREA coords=17,25,82,36   href="http://jsbank.topcities.com/home.jpg" shape=RECT   target=_blank><AREA coords=19,37,81,50   href="http://jsbank.topcities.com/home.jpg" shape=RECT   target=_blank><AREA coords=19,51,82,64   href="http://jsbank.topcities.com/home.jpg" shape=RECT   target=_blank><AREA coords=19,66,82,78   href="http://jsbank.topcities.com/home.jpg" shape=RECT   target=_blank></MAP></DIV><DIV id=menu3><IMG border=0 height=93 src="vip412.gif" useMap=#m3 width=150> <MAP name=m3><AREA coords=19,9,82,24   href="http://jsbank.topcities.com/home.jpg" shape=RECT   target=_blank><AREA coords=17,25,82,36   href="http://jsbank.topcities.com/home.jpg" shape=RECT   target=_blank><AREA coords=19,37,81,50   href="http://jsbank.topcities.com/home.jpg" shape=RECT   target=_blank><AREA coords=19,51,82,64   href="http://jsbank.topcities.com/home.jpg" shape=RECT   target=_blank><AREA coords=19,66,82,78   href="http://jsbank.topcities.com/home.jpg" shape=RECT   target=_blank></MAP></DIV><DIV id=menu4><IMG border=0 height=93 src="news412.gif" useMap=#m4 width=150> <MAP name=m4><AREA coords=19,9,82,24   href="http://jsbank.topcities.com/home.jpg" shape=RECT   target=_blank><AREA coords=17,25,82,36   href="http://jsbank.topcities.com/home.jpg" shape=RECT   target=_blank><AREA coords=19,37,81,50   href="http://jsbank.topcities.com/home.jpg" shape=RECT   target=_blank><AREA coords=19,51,82,64   href="http://jsbank.topcities.com/home.jpg" shape=RECT   target=_blank><AREA coords=19,66,82,78   href="http://jsbank.topcities.com/home.jpg" shape=RECT   target=_blank></MAP></DIV><DIV id=gun1><IMG src="gun412.gif" width="200" height="161"></DIV><DIV id=gun2><IMG src="gunup412.gif" width="200" height="161"></DIV><DIV id=bullet><IMG src="bullet412.gif" width="48" height="10"></DIV><DIV id=hole><IMG src="hole412.gif" width="71" height="71"></DIV><DIV class=baseline id=text>  <IMG src="menuhead412.gif" width="360" height="50"> <UL>  <LI><B>IMPORTANT: Wait until all images are loaded then <BR><FONT   color=#ff0000>press the key &#39;s&#39; to shoot open a menu item.</FONT></B><BR><BR>  <LI>Full-fledged slide-in-slide-out menu.   <LI>This slide-menu can not be opened by clicking on a button.   <LI>Instead you have to shoot open each menu-item with your Colt.   <LI>The latest crossbrowser-fun by the makers of www.24fun.com. </LI></UL><UL><B>Installation</B>   <LI>Delete the DIV-block with the id &quot;text&quot; and save all the rest as HTML-file.   <LI>Put all images into the same directory as the HTML-file.   <LI>Produce the imagemaps that contain your submenus. In this sample we use 4 imagemaps. They are called fun412.gif, news412.gif, pics412.gif, vip412.gif. You need 1 imagemap for each menu-item.   <LI>Put those imagemaps into DIV-containers. You need as many DIV-containers as imagemaps. Call those DIV-containers menu1, menu2, menu3, menu4 and so on.   <LI>Configure the position of your menu-items inside the head-section of the script.   <LI>This script uses 4 menu-items. If you are useing less or more menu-items you have to edit a view variables inside the head section of the script and you have to configure the first three functions of the script as well as the style block. </UL></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/MenuShooter/MenuShooter_images.zip