JavaScript推拉门式样的菜单


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

====1、将以下代码加入到HEML的之间:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<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;
    width120pt;
    top100pt;
    border1.5pt solid black;
    background-color#ffffff;
    layer-background-color#ffffff;
    font9pt/20pt "宋体";
}

body {
    font-size9pt;
    margin0pt
}

#slidemenubar {
    position: absolute;
    left: -110pt;
    width120pt;
    top100pt;
    border1.5pt black solid;
    background-color#F3F3F3;
    layer-background-color: lightyellow;
    font9pt/20pt "宋体";
}
//-->
</style>

====2、将以下代码加入到HEML的之间:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<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>

完整源码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<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>