<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js入门练习——菜单</title>
<link rel="stylesheet" type="text/css" href="../css/basic.css" />
<script type="text/javascript">
window.onload = function()
{
var oMenu1 = document.getElementById("menu1");/*获取第1个列表ul*/
var oLi = oMenu1.getElementsByTagName("li");/*获取所有的li*/
var i = 0;
for(i = 0;i<oLi.length;i++)
{
/*功能一：鼠标经过，添加当前效果，子列表显示*/
oLi[i].onmouseover = function(){/*鼠标经过，为li添加当前效果，子列表显示*/
if(this.children.length > 1){
this.className = "active";
this.children[2].style.display = "block";
}
}
/*功能二：鼠标离开，清除当前效果，子列表隐藏*/
oLi[i].onmouseout = function(){
this.className = "";
this.children[2].style.display = "none";
}
}
}
</script>
</head>
<body>
<div class="menu">
<ul class="menu1" id="menu1">
<li><a href="###">Home</a></li>
<li>
<a href="###">web</a>
<em>》</em>
<ul class="menu2">
<li><a href="###">html</a></li>
<li><a href="###">css</a></li>
<li><a href="###">jquery</a></li>
<li>
<a href="###">javascript</a>
<em>》</em>
<ul class="menu3">
<li><a href="###">javascript基础</a></li>
<li><a href="###">BOM</a></li>
<li><a href="###">DOM</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="###">javascript</a></li>
<li><a href="###">Contact</a></li>
</ul>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
body,ul,li{
margin:0;
padding:0;
}
.menu{
margin:20px auto;
width:600px;
}
ul{list-style:none;}
a{
text-decoration:none;
color:#000;
}
.menu1{
width:160px;
border:1px solid #ddd;
}
.menu1 li{
position:relative;
padding-left:20px;
width:140px;
line-height:42px;
}
.menu1 li:hover{background:#ccc;}
.menu2,.menu3{
display:none;
position:absolute;
top:-1px;
left:160px;
border:1px solid #ddd;
}
.menu1 li,.menu2 li,.menu3 li{border-bottom:1px dashed #ccc;}
.menu1 li:last-child,.menu2 li:last-child,.menu3 li:last-child{border:none;}
em{
font-style:normal;
float:right;
}
.active,li.active:hover{background:#C9F;}
- 大小: 41 KB
分享到：
相关推荐
在本项目"最简单的REACT菜单练习"中，开发者旨在通过React库构建一个基础的菜单导航系统，以帮助初学者熟悉React的基本用法和组件化思想。以下是该项目涉及的主要知识点和详细说明： 1. **React基础知识**：React是...
"menu菜单练习"这个主题旨在帮助开发者更好地理解和实践如何创建、管理和优化菜单功能。这篇博客文章可能提供了关于实现这一目标的具体代码示例和实用技巧。 首先，菜单通常包含了程序的主要操作选项，如“文件”、...
主是要一个树形菜单.dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
在编程领域，动态创建菜单是一项常见的任务，尤其是在开发应用程序时，为了提供用户友好的界面和交互体验。这里我们将深入探讨如何在PowerBuilder（PB）环境中实现动态创建菜单的源码。 PowerBuilder是一款强大的...
使用HAL 库(由于已经掌握标准库用HAL 库练手、易于移植)和FREERTOS 实现 OLED（PROTEUS 内部编号 OLED12863I2C）的多级菜单（采用 U8G2 图形库），功能包含通过外部中断进行操作， RTOS 保证实时性，实现多任务系统...
总的来说，ILP3是一个功能丰富的Java学习工具，通过提供交互式的菜单练习，为学习者创造了一个实用、动态的学习环境。它鼓励动手实践，有助于提升编程技能，特别是对初学者来说，是一种有效的学习途径。由于其开源...
在网页设计中，导航菜单是不可或缺的部分，它帮助用户快速浏览和访问网站的不同部分。`Jquery京东导航菜单`是一个基于jQuery实现的，模仿京东网站风格的导航菜单。这个菜单通常具有响应式设计，能够在不同设备上提供...
在JavaScript编程领域，实现类似京东商城的下拉弹出框菜单是一项常见的需求，它能够提供良好的用户体验，使得用户可以方便地浏览和选择商品分类。这个功能主要涉及到前端开发中的交互设计和DOM操作，下面我们将详细...
电影菜单是一种用户界面元素，主要用于电影播放应用或网站，它为用户提供了一种便捷的方式来浏览、选择和播放不同的影片。在本案例中，我们讨论的是一个横排布局的电影菜单，这意味着菜单中的各项会水平排列，给予...
“侧滑菜单练习”和“侧滑菜单练习(抽屉式一)”可能是逐步实现侧滑菜单的不同阶段，其中可能涵盖了基础的滑动逻辑、菜单项的设置以及菜单与主内容之间的交互处理。这些练习将帮助你理解侧滑菜单的实现过程，并提供...
在C++编程语言中，"c++入门练习简单菜单"是一个常见的学习项目，它帮助初学者熟悉控制流、函数和用户交互。这个练习通常涉及创建一个简单的命令行应用程序，该程序显示一个菜单供用户选择，然后执行相应的操作。以下...
在本项目"dynamic-menu-exercise"中，我们探讨了一个基于潜在动态JSON对象生成快速小菜单的练习。这个练习主要关注JavaScript编程，特别是处理JSON数据和DOM操作，这对于前端开发人员来说是至关重要的技能。 首先，...
本练习题旨在让你掌握如何在Android应用中使用菜单资源来实现一个“游记”应用的功能。以下是详细的步骤和知识点说明： 1. **创建基本布局**： - 首先，你需要在`activity_main.xml`布局文件中设计应用的首界面。...
VC++ 与 MFC 菜单编程学习 MFC 程序设计菜单是 VC++ 中的一种重要组件，菜单的创建、加载、显示和响应命令是 MFC 编程的核心内容。本文将详细介绍 MFC 中使用 VC++ 创建菜单的方法，并提供实例学习，旨在帮助读者...
模拟用列表实现一个点菜单，实现基础的加减菜，作为一个列表的练习，感觉不错，
在C#编程中，Windows Forms（Winform）应用程序经常需要根据特定需求动态创建用户界面元素，比如菜单。本文将深入探讨如何使用C#实现Winform动态添加菜单的方法，以及涉及的相关技巧。 首先，动态添加菜单的基本...
本文实例为大家分享了js实现右键菜单的具体代码，供大家参考...右键菜单练习</title> <style> *{ margin: 0; /*padding: 0;*/ } ul{ width: 120px; height: 150px; background-color: rgb(204,20
在编程领域，菜单栏和工具栏是用户界面（UI）设计中的重要元素，尤其是在桌面应用程序中。它们提供了直观且方便的途径，使用户能够访问和执行各种功能。本练习主要关注的是C#语言中如何创建和管理这两个组件，特别是...
这个“老裴帮助关于Javascript动态菜单树的小练习2”旨在教授如何利用JavaScript创建一个可交互的、自动生成的菜单树。在实际的网页开发中，动态菜单树通常用于导航，它允许用户以层级方式浏览复杂的信息结构。 ...
在“老裴帮助关于Javascript动态菜单树的小练习3”中，我们将探讨如何创建这样的动态菜单树，并通过实际的代码示例进行学习。 首先，动态菜单树的构建通常涉及到HTML结构的生成、CSS样式的应用以及JavaScript逻辑的...