JavaScript推拉门式样的菜单

推拉门式样的菜单[根据提示修改][共2步]

====1、将以下代码加入到HEML的<head></head>之间：

<style type="text/css">
<!--
.link {
    color: #000000;
    text-decoration: none;
}

A.link:hover {
    color: red;
}

A.link:active {
    color: #000000;
    text-decoration: none;
} //-->
</style>
<style type="text/css">
<!-- 
#slidemenubar2 {
    position: absolute;
    left: -110pt;
    width: 120pt;
    top: 100pt;
    border: 1.5pt solid black;
    background-color: #ffffff;
    layer-background-color: #ffffff;
    font: 9pt/20pt "宋体";
}

body {
    font-size: 9pt;
    margin: 0pt
}

#slidemenubar {
    position: absolute;
    left: -110pt;
    width: 120pt;
    top: 100pt;
    border: 1.5pt black solid;
    background-color: #F3F3F3;
    layer-background-color: lightyellow;
    font: 9pt/20pt "宋体";
}
//-->
</style>

====2、将以下代码加入到HEML的<body></body>之间：

<script language="JavaScript1.2">
if (document.all)
    document.write('<div id="slidemenubar2" style="left:-100" onMouseover="pull()" onMouseout="draw()">')
</script>
<layer id="slidemenubar" onMouseover="pull()" onMouseout="draw()">
    <script language="JavaScript1.2">
    var sitems = new Array()
    var sitemlinks = new Array()
        //以下是菜单内容，自由设置；
    sitems[0] = "本站首页"
    sitems[1] = "最新更新"
    sitems[2] = "梦想软件"
    sitems[3] = "其它栏目"
    sitems[4] = "桌面壁纸"
    sitems[5] = "给我留言"
    sitems[6] = "下载特区"
    sitems[7] = "Email Me"
    sitems[8] = "我的简介"
        //菜单项目连接
    sitemlinks[0] = "http://www.happydrips.com"
    sitemlinks[1] = "http://www.abc.com"
    sitemlinks[2] = "http://abc.ab.com"
    sitemlinks[3] = "../index.htm"
    sitemlinks[4] = "../jsschool/index.htm"
    sitemlinks[5] = "../../../gsbook.htm"
    sitemlinks[6] = "../../../perl/index.htm"
    sitemlinks[7] = "mailto:yshot@263.net"
    sitemlinks[8] = "http://www.happydrips.com"
    for (i = 0; i <= sitems.length - 1; i++)
        document.write('<a href=' + sitemlinks[i] + '>' + sitems[i] + '</a><br>')
    </script>
</layer>
<script language="JavaScript1.2">
function regenerate() {
    window.location.reload()
}

function regenerate2() {
    if (document.layers)
        setTimeout("window.onresize=regenerate", 400)
}
window.onload = regenerate2
if (document.all) {
    document.write('</div>')
    themenu = document.all.slidemenubar2.style
    rightboundary = 0
    leftboundary = -150
} else {
    themenu = document.layers.slidemenubar
    rightboundary = 150
    leftboundary = 10
}

function pull() {
    if (window.drawit)
        clearInterval(drawit)
    pullit = setInterval("pullengine()", 50)
}

function draw() {
    clearInterval(pullit)
    drawit = setInterval("drawengine()", 50)
}

function pullengine() {
    if (document.all && themenu.pixelLeft < rightboundary)
        themenu.pixelLeft += 5
    else if (document.layers && themenu.left < rightboundary)
        themenu.left += 5
    else if (window.pullit)
        clearInterval(pullit)
}

function drawengine() {
    if (document.all && themenu.pixelLeft > leftboundary)
        themenu.pixelLeft -= 5
    else if (document.layers && themenu.left > leftboundary)
        themenu.left -= 5
    else if (window.drawit)
        clearInterval(drawit)
}
</script>

完整源码：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <meta name="GENERATOR" content="Microsoft FrontPage 4.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <title>New Page 1</title>
    <style type="text/css">
    <!--.link {
        color: #000000;
        text-decoration: none;
    }
   
    A.link:hover {
        color: red;
    }
    
    A.link:active {
        color: #000000;
        text-decoration: none;
    } //-->
    </style>
    <style type="text/css">
    <!-- #slidemenubar2 {
        position: absolute;
        left: -110pt;
        width: 120pt;
        top: 100pt;
        border: 1.5pt solid black;
        background-color: #ffffff;
        layer-background-color: #ffffff;
        font: 9pt/20pt "宋体";
    }
    
    body {
        font-size: 9pt;
        margin: 0pt
    }
    
    #slidemenubar {
        position: absolute;
        left: -110pt;
        width: 120pt;
        top: 100pt;
        border: 1.5pt black solid;
        background-color: #F3F3F3;
        layer-background-color: lightyellow;
        font: 9pt/20pt "宋体";
    }
    
    //-->
    </style>
</head>

<body>
    <script language="JavaScript1.2">
    if (document.all)
        document.write('<div id="slidemenubar2" style="left:-100" onMouseover="pull()" onMouseout="draw()">')
    </script>
    <layer id="slidemenubar" onMouseover="pull()" onMouseout="draw()">
        <script language="JavaScript1.2">
        var sitems = new Array()
        var sitemlinks = new Array()
            //以下是菜单内容，自由设置；
        sitems[0] = "本站首页"
        sitems[1] = "最新更新"
        sitems[2] = "梦想软件"
        sitems[3] = "其它栏目"
        sitems[4] = "桌面壁纸"
        sitems[5] = "给我留言"
        sitems[6] = "下载特区"
        sitems[7] = "Email Me"
        sitems[8] = "我的简介"
            //菜单项目连接
        sitemlinks[0] = "http://www.happydrips.com"
        sitemlinks[1] = "http://www.abc.com"
        sitemlinks[2] = "http://abc.ab.com"
        sitemlinks[3] = "../index.htm"
        sitemlinks[4] = "../jsschool/index.htm"
        sitemlinks[5] = "../../../gsbook.htm"
        sitemlinks[6] = "../../../perl/index.htm"
        sitemlinks[7] = "mailto:yshot@263.net"
        sitemlinks[8] = "http://www.happydrips.com"
        for (i = 0; i <= sitems.length - 1; i++)
            document.write('<a href=' + sitemlinks[i] + '>' + sitems[i] + '</a><br>')
        </script>
    </layer>
    <script language="JavaScript1.2">
    function regenerate() {
        window.location.reload()
    }

    function regenerate2() {
        if (document.layers)
            setTimeout("window.onresize=regenerate", 400)
    }
    window.onload = regenerate2
    if (document.all) {
        document.write('</div>')
        themenu = document.all.slidemenubar2.style
        rightboundary = 0
        leftboundary = -150
    } else {
        themenu = document.layers.slidemenubar
        rightboundary = 150
        leftboundary = 10
    }

    function pull() {
        if (window.drawit)
            clearInterval(drawit)
        pullit = setInterval("pullengine()", 50)
    }

    function draw() {
        clearInterval(pullit)
        drawit = setInterval("drawengine()", 50)
    }

    function pullengine() {
        if (document.all && themenu.pixelLeft < rightboundary)
            themenu.pixelLeft += 5
        else if (document.layers && themenu.left < rightboundary)
            themenu.left += 5
        else if (window.pullit)
            clearInterval(pullit)
    }

    function drawengine() {
        if (document.all && themenu.pixelLeft > leftboundary)
            themenu.pixelLeft -= 5
        else if (document.layers && themenu.left > leftboundary)
            themenu.left -= 5
        else if (window.drawit)
            clearInterval(drawit)
    }
    </script>
</body>
</html>