<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<title>弹出菜单</title>
<script type="text/javascript">
window.onload = function () {
var menu = document.getElementById("menu");
var links = menu.getElementsByTagName("LI");
var linksArr = new Array();
for (var i=0;i<links.length;i++) {
if (links[i].className == "menuLink") {
linksArr.push(links[i]);
}
}
var childMenus = menu.getElementsByTagName("UL");
for (var i=0;i<childMenus.length;i++) {
childMenus[i].style.display = "none";
}
for (var i=0;i<linksArr.length;i++) {
linksArr[i].menu = childMenus[i];
linksArr[i].onmouseover = show;
linksArr[i].onmouseout = hide;
}
function show() {
this.menu.style.display ="block";
};
function hide() {
this.menu.style.display ="none";
};
};
</script>
<style type="text/css">
ul {
list-style-type:none;
}
#menu {
top: 200px;
left: 200px;
height:200px;
padding:4px;
margin:130px 400px;
}
#menu>li {
width:100px;
height:28px;
border:1px solid #06f;
float:left;
text-align:center;
line-height:28px;
background:white;
margin-right:10px;
cursor:pointer;
position:relative;
}
#menu>li a {
color:navy;
}
#menu>li:hover {
background:blue;
color:white;
}
#menu>li:hover a {
color:white;
}
ul.childMenu {
width:100px;
height:100px;
background:green;
}
</style>
</head>
<body>
<ul id="menu">
<li class="menuLink">
<a href="###">菜单</a>
<ul class="childMenu">
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
</ul>
</li>
</ul>
</body>
</html>
分享到：
相关推荐
本案例通过JavaScript实现了广告弹窗的功能，旨在帮助网站开发者了解如何简单有效地在网页中添加动态广告弹窗。 #### 二、技术选型 本项目主要采用了HTML、CSS以及JavaScript技术进行开发。其中，HTML用于构建网页...
用JavaScript实现的消息弹窗，比较基础的
本文将详细讨论如何使用JavaScript实现这一功能，并解释相关代码和配置。 首先，我们看到一个计算属性`popupStatus`，它返回一个布尔值，表示是否有弹窗显示。`SendCircle_visible`、`generateInfo_visible`和`...
在JavaScript地物编辑弹窗增加属性值这一主题中，我们主要关注的是如何使用SuperMap iClient for JavaScript库来实现地理信息系统（GIS）中的地物编辑功能，并在编辑过程中动态添加或修改属性值。SuperMap iClient ...
本文实例为大家分享了JavaScript实现弹窗效果的具体代码，供大家参考，具体内容如下 使用css动画效果实现弹窗缓慢弹出和收回。 使用JavaScript实现定时弹出定时收回。 <!DOCTYPE html> <html lang="en"> &...
3. **JavaScript实现弹窗交互** 使用JavaScript为关闭按钮添加点击事件，实现点击后关闭弹窗的功能。在JavaScript中，可以通过修改DOM元素的CSS样式或者动态改变其显示状态来隐藏弹窗。此外，为了防止弹窗被重复...
弹窗通常通过JavaScript或jQuery来实现。首先，你需要在HTML页面中添加一个iframe元素，用于加载弹出的内容。这个iframe可以设置为隐藏，然后在需要打开弹窗时将其显示出来。例如： ```html ;"> ...
本文将详细介绍如何使用JavaScript实现类似MSN的弹窗功能。 MSN（Microsoft Network）是曾经流行的即时通讯软件，其弹窗功能是用户间进行实时交流的重要组成部分。在网页上模拟MSN的弹窗，主要是为了实现一种通知或...
在本文中，我们将探讨如何使用原生JavaScript实现一个图片弹窗交互效果，主要涉及以下几个关键知识点： 1. **变量声明优化**： 在JavaScript中，使用`var`关键字声明变量是常见的做法。在代码示例中，为了提高效率...
在本项目中，我们将探讨如何利用它们实现弹窗功能，一个在网页设计中不可或缺的交互元素。 标题“jq、js实现的弹窗”暗示我们将讨论如何用jQuery库和JavaScript原生语法创建弹出窗口，这些弹窗可以用于显示警告、...
JavaScript弹窗插件是一种在网页上实现交互式提示或通知功能的工具，它通常通过JavaScript编程语言来编写，可以提供丰富的用户体验。JavaScript是Web开发中的重要脚本语言，它允许开发者在用户与网页之间建立动态...
总结，"arcgis js实现的弹窗"是一个结合了地图交互、UI设计和地理信息展示的实例，它展示了ArcGIS JavaScript API的强大功能。通过学习和实践，开发者可以掌握创建类似功能的技术，提升GIS应用的用户体验。
"JavaScript版弹窗,错误提示"这个主题主要关注如何利用JavaScript实现弹出窗口来向用户提供错误提示信息。在网页开发中，这样的功能对于提高用户体验至关重要，因为它能够及时地将系统或用户操作中的错误信息反馈给...
基于Cesium实现自定义弹窗效果组件，弹窗样式内容可以自定义，弹窗可跟随场景自适应移动，完整demo和源代码，代码未加密/未压缩，可直接调用运行 文章描述：...
以下将详细介绍如何使用JavaScript实现弹窗效果，并考虑浏览器兼容性。 1. **基本原理** JavaScript弹窗通常通过创建新的HTML元素（如`<div>`），然后将其添加到页面DOM中来实现。这个元素可以被设计为具有透明...
本篇文章将详细讲解如何利用jQuery实现弹窗效果，这是一种常见的用户交互功能，常用于提示信息、确认操作或者展示详细内容。 首先，我们需要引入jQuery库。在HTML文件的`<head>`部分，添加以下代码来链接到jQuery的...
在JavaScript编程中，实现相册弹窗功能是常见的交互设计，尤其在网页中展示图片时。Zepto.js是一个轻量级的JavaScript库，类似于jQuery，适用于移动设备，它提供了许多便利的DOM操作方法，使得创建这样的功能变得...
5. 实现弹窗内的交互，如按钮点击后的反馈，关闭弹窗的逻辑等。 6. 最后，测试弹窗在不同浏览器和屏幕尺寸下的表现，确保兼容性和响应式设计。 这个过程涵盖了前端开发的基本流程，从静态页面到动态交互，展示了...
以上就是纯JavaScript实现弹窗效果的基本思路和关键点。通过掌握这些知识，你可以自由地创建各种自定义弹窗，满足不同场景的需求。记住，实践是检验真理的唯一标准，多动手尝试，结合实际项目进行练习，你会更加熟练...