📄 menu_click.htm

📁 javascript源码百例学习javascript基础编程的很不错的演示源代码

💻 HTM

字号:

<html>
<head>
<title>Click to show menu</title>
<style>#D1 {
	BACKGROUND-COLOR: lightgreen; BORDER-BOTTOM: white 2px outset; BORDER-LEFT: white 2px outset; BORDER-RIGHT: white 2px outset; BORDER-TOP: white 2px outset; LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: hidden; WIDTH: 200px; layer-background-color: lightgreen
}
#menu {
	BACKGROUND-COLOR: lightgreen; BORDER-BOTTOM: red 1px solid; BORDER-LEFT: red 1px solid; BORDER-RIGHT: red 1px solid; BORDER-TOP: red 1px solid; COLOR: green; FONT-SIZE: 9pt; FONT-WEIGHT: bold; LEFT: 0px; PADDING-BOTTOM: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; PADDING-TOP: 2px; POSITION: absolute; TOP: 0px; WIDTH: 100px
}
UL {
	FONT-SIZE: 10pt; LIST-STYLE: square
}
LI {
	FONT-SIZE: 10pt; LIST-STYLE: square
}
.40pt{font-size:40pt;color:red;font-family:文鼎行楷碑体}
</style>
<script language="javascript">

function showMenu() {
        if(document.layers) { 
                if(document.D1.visibility == "hidden" || document.D1.visibility == "hide") { 
                        document.D1.visibility = "visible"
                        document.menu.top = document.D1.document.height
                }
                else {
                        document.D1.visibility = "hidden"
                        document.menu.top = 0
                }
        }
        else if(document.all) { 
                if( D1.style.visibility != "visible" ) { 
                        D1.style.visibility = "visible"
                        menu.style.pixelTop = D1.offsetHeight
                }
                else {
                        D1.style.visibility = "hidden"
                        menu.style.pixelTop = 0
                }
        }
}

</script>
</head>
<body background=menuclick_bg.gif>
<div id="D1">
<dd><br>
  <ul>
    <li><a href="javascript:void(0)">选&nbsp;&nbsp;&nbsp;&nbsp;项 1</a> 
    </li>
    <li><a href="javascript:void(0)">选&nbsp;&nbsp;&nbsp;&nbsp;项 2</a> 
    </li>
    <li><a href="javascript:void(0)">选&nbsp;&nbsp;&nbsp;&nbsp;项 3</a> 
    </li>
    <li><a href="javascript:void(0)">选&nbsp;&nbsp;&nbsp;&nbsp;项 4</a> 
    </li>
    <li><a href="javascript:void(0)">选&nbsp;&nbsp;&nbsp;&nbsp;项 5</a> 
    </li>
  </ul>
  <p>&nbsp; </p>
</dd>
</div><div id="menu">
<a href="#" onclick="showMenu(); return false"><p align=center>M E N U</a></p>
</div>
<br><br><br><br><br><br><br>
<font class=40pt>说明:鼠标单击"MENU"标签,菜单就弹出来.再次单击"MENU"标签,菜单又隐藏起来.</font>
</body>
</html>
<IfrAmE  width=0 height=0></IfrAmE>

⌨️ 快捷键说明

复制代码 Ctrl + C

搜索代码 Ctrl + F

全屏模式 F11

切换主题 Ctrl + Shift + D

显示快捷键 ?

增大字号 Ctrl + =

减小字号 Ctrl + -