js 单击式的下拉菜单效果实例
2018-10-12 13:52
555 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>js 单击式的下拉菜单效果</title>
<style>
.div1 { width: 120px; height: 20px; line-height:20px; text-align:center; }
.div2 {width: 120px; position:absolute; left:0; top:10px;visibility:hidden; }
.div2 a{ display:block;}
</style>
</head>
<body>
<script language="JavaScript">
var zindex=100
function dropit2(whichone){
if (window.themenu&&themenu.id!=whichone.id)
themenu.style.visibility="hidden"
themenu=whichone
if (document.all){
themenu.style.left=document.body.scrollLeft+event.clientX-event.offsetX
themenu.style.top=document.body.scrollTop+event.clientY-event.offsetY+18
if (themenu.style.visibility=="hidden"){
themenu.style.visibility="visible"
themenu.style.zIndex=zindex++}
else{
hidemenu()}}}
function dropit(e,whichone){
if (window.themenu&&themenu.id!=eval(whichone).id)
themenu.visibility="hide"
themenu=eval(whichone)
if (themenu.visibility=="hide")
themenu.visibility="show"
else
themenu.visibility="hide"
themenu.zIndex++
themenu.left=e.pageX-e.layerX
themenu.top=e.pageY-e.layerY+19
return false}
function hidemenu(whichone){
if (window.themenu)
themenu.style.visibility="hidden"}
function hidemenu2(){
themenu.visibility="hide"}
if (document.all)
document.onclick=hidemenu
</script>
<span class="div1" onClick="dropit2(dropmenu);event.cancelBubble=true;return false"> <a href="###" onClick="if(document.layers) return dropit(event, 'document.dropmenu')">[点击显示菜单]</a> </span>
<div class="div2" id="dropmenu">
<a href="//www.jb51.net">脚本之家</a><a href="#">个性名字网</a>
<a href="#">个性名字网</a>
</div>
</body>
</html> </td>
</tr>
</table>
您可能感兴趣的文章:
相关文章推荐
- js 单击式的下拉菜单效果实例
- Js点击弹出下拉菜单效果实例
- JS实现的简单鼠标跟随DiV层效果完整实例
- JS实现在状态栏显示打字效果完整实例
- js(JavaScript)实现TAB标签切换效果的简单实例
- js实现下拉菜单动画效果
- JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例
- js实现简单的省市县三级联动效果实例
- js形成页面的一种遮罩效果实例代码
- JS实现点击目录名变换颜色的效果实例
- JS实现切换标签页效果实例代码
- js省市联动效果完整实例代码
- 实例讲解多个js毫秒倒计时同时进行效果
- 使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
- JS onmousemove鼠标移动坐标接龙DIV效果实例
- js 写lightbox效果[实例]
- 利用Js+Css实现折纸动态导航效果实例源码
- js实现仿Windows风格选项卡和按钮效果实例