In - Menu trượt ở phía trái trang web - JavaScriptBank.com

Phiên bản đầy đủ: jsB@nk » Trình đơn » Có thể di chuyển » Menu trượt ở phía trái trang web
URL: https://www.javascriptbank.com/vertical-slide-in-slide-out-menu-index.html

Hiệu ứng dùng các hình ảnh để tạo ra các trình đơn trượt nằm ở phía trái trang web. Ban đầu các trình đơn này chỉ hiển thị phần tiêu đề, để xem các tùy chọn, bạn phải dùng chuột nhấn vào phần tiêu đề các của menu.

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