<html>
<head>
<style type="text/css">
.item1, .item2, .item1_mover, .item2_mover, .subitem1, .subitem1_mover, .subitem2, .subitem2_mover{color:white; background-color:#6262ff; width:100px; height:25px; padding:3px;
border:1px solid #1717ff;}
.item1_mover{background-color:#2037d7;}
.item2{border-top:1px solid #b0b0b0;}
.item2_mover{background-color:#2037d7; border-top:1px solid #f0f0f0;}
.subitem1{background-color:#b5bdf4;}
.subitem2{background-color:#b5bdf4; border-top:1px solid #b0b0b0;}
.subitem1_mover{background-color:#f0f0f0;}
.subitem2_mover{background-color:#e0e0e0; border-top:1px solid #f0f0f0;}
</style>
<title>Popup menu</title>
<script TYPE="text/javascript">
<!--
//----Change style class of a DIV----
function change_bgcolor( obj, val ){
obj.className = val;
}
//----Change a menu' visibility----
function change_menu(mid, mode) {
document.getElementById(mid).style.display = mode;
}
function jump_url(url) {
window.open(url,'new');
}
function jump_url2(url) {
location.href(url);
}
//-->
</script>
</head>
<body>
<div class="item1" onmouseover="change_menu( 'sub1','block' );change_bgcolor(this,
'item1_mover');" onmouseout="change_bgcolor(this, 'item1');change_menu( 'sub1','none' );" >Menu1</div>
<div id="sub1" style="display:none;">
<div id="sub11" class="subitem1" onclick="jump_url('http://www.itworld21.com/')" onmouseover="change_menu( 'sub1','block' ); change_bgcolor(this, 'subitem1_mover')"
onmouseout="change_bgcolor(this, 'subitem1'); change_menu( 'sub1','none' );"> menu1-1</div>
<div id="sub12" class="subitem2" onclick="jump_url('http://www.itworld21.com')" onmouseover="change_menu( 'sub1','block' ); change_bgcolor(this, 'subitem2_mover')"
onmouseout="change_bgcolor(this, 'subitem2'); change_menu( 'sub1','none' );" > menu1-2</div>
<div id="sub13" class="subitem2" onclick="jump_url('http://www.itworld21.com')" onmouseover="change_menu( 'sub1','block' ); change_bgcolor(this, 'subitem2_mover')"
onmouseout="change_bgcolor(this, 'subitem2'); change_menu( 'sub1','none' );" > menu1-3</div>
</div>
<div class="item2" onmouseover="change_menu( 'sub2','block' ); change_bgcolor(this, 'item2_mover');" onmouseout="change_bgcolor(this, 'item2');change_menu( 'sub2','none' );">Menu2</div>
<div id="sub2" style="display:none;">
<div id="sub21" class="subitem1" onclick="jump_url('http://www.itworld21.com/')" onmouseover="change_menu( 'sub2','block' ); change_bgcolor(this, 'subitem1_mover')" onmouseout="change_bgcolor(this, 'subitem1'); change_menu( 'sub2','none' );"> menu2-1</div>
<div id="sub22" class="subitem2" onclick="jump_url('http://www.itworld21.com')" onmouseover="change_menu( 'sub2','block' ); change_bgcolor(this, 'subitem2_mover')"
onmouseout="change_bgcolor(this, 'subitem2'); change_menu( 'sub2','none' );" > menu2-2</div>
<div id="sub23" class="subitem2" onclick="jump_url('http://www.itworld21.com')" onmouseover="change_menu( 'sub2','block' ); change_menu( 'sub2','block' ); change_bgcolor
(this, 'subitem2_mover')" onmouseout="change_bgcolor(this, 'subitem2'); change_menu( 'sub2','none' );" > menu2-3</div>
</div>
<div class="item2" onmouseover="change_menu( 'sub3','block' );change_bgcolor(this, 'item2_mover');" onmouseout="change_menu( 'sub3','none' );change_bgcolor(this,
'item2');">Menu3</div>
<div id="sub3" style="display:none;">
<div id="sub31" class="subitem1" onclick="jump_url('http://www.itworld21.com')" onmouseover="change_bgcolor(this, 'subitem1_mover');change_menu( 'sub3','block' );"
onmouseout="change_bgcolor(this,'subitem1');;change_menu( 'sub3','none' );"> menu3-1</div>
<div id="sub32" class="subitem2" onclick="jump_url('http://www.itworld21.com')" onmouseover="change_menu( 'sub3','block' ); change_bgcolor(this, 'subitem2_mover')"
onmouseout=";change_menu( 'sub3','none' ); change_bgcolor(this, 'subitem2')" > menu3-2</div>
<div id="sub33" class="subitem2" onclick="jump_url('http://www.itworld21.com')" onmouseover="change_menu( 'sub3','block' ); change_bgcolor(this, 'subitem2_mover')"
onmouseout=";change_menu( 'sub3','none' ); change_bgcolor(this, 'subitem2')" > menu3-3</div>
</div>
</div>
</body> </html>
分享到：
相关推荐
HTML5 Canvas 2D竖版飞行射击游戏实例是利用HTML5的新特性——Canvas元素和JavaScript进行游戏开发的一个经典案例。Canvas作为一个强大的图形绘制接口，允许开发者通过编程方式动态地在网页上绘制图形，从而实现丰富...
竖版图片切换的效果通常是通过JavaScript或者Flash技术实现的。Flash是一种曾经广泛用于创建动态内容的技术，它允许开发者创建交互式动画、游戏以及网页元素，包括图片轮播。在本例中，"一款竖版图片切换的Flash特效...
4.[Android实例] 竖版进度选择器
《2014竖版效率手册》是一款设计精良的日历效率工具，旨在帮助用户高效地管理日常生活、工作和旅行安排。这款手册以其简洁的竖版布局和实用的功能，成为了提高工作效率的重要助手。 首先，从内容上看，手册以月份为...
在本项目中，“JavaScript实现鼠标滑过图片显示纵向2级导航菜单源码”是一个利用JavaScript技术来创建交互式网页菜单的示例。这个功能通常用于提升用户体验，让用户在浏览网站时能更直观地找到二级或更深层次的链接...
竖版流程图软件.pdf 竖版流程图软件是指一种能够创建竖版流程图的专门软件。竖版流程图是一种特殊的流程图，竖向排列，通常用于描述复杂的业务流程、数据流程或系统流程。这种软件通常具有强大的图形编辑功能、智能...
"竖导航特效实现"是指在网页设计中采用垂直布局的导航菜单，并通过CSS3和JavaScript等技术添加动态效果，以提升用户体验和视觉吸引力。这种特效通常包括下拉菜单、悬停效果、平滑滚动等。 1. **CSS3基础**： - **...
本实例将探讨如何在Android中实现一个竖直方向的SeekBar。 ### 1. 垂直SeekBar的需求分析 在某些场景下，如空间有限或布局特殊的设计中，水平SeekBar可能不再适用。例如，在音乐播放应用的音量控制、调整图片亮度...
1. 地图类型及其特点：本练习主要涉及竖版世界地图，相较于传统的横版世界地图，竖版地图在展示高纬度地区的地理特征时具有优势，如两极地区的形状变形较小，更直观地显示了两极地区国家和地区的相对位置，同时也更...
2021精品手抄报系列-争做文明学生【A4竖版】.doc
手风琴式的TAb切换菜单，类似选项卡，设计唯美，国外设计网站看到的，于是小编将源代码整理下来的，用到两个Js封装类，已打包。本效果适合于设计类、图片类、IT类网站作为推荐导航，兼容性良好，漂亮美观，相信很多...
【竖版滚动相册】是一种常见的网页元素，用于展示一系列图片，通过垂直滚动方式呈现，为用户带来独特的浏览体验。这种相册设计通常利用HTML、JavaScript（JS）和CSS技术来实现，使得相册功能更加互动和动态。下面将...
竖版海报.ai
方便的设计版面 高端大气 使您的工作更加方便快捷
2021年历A4竖版(带节假日).xls
高端竖版PPT模板下载
然后，jQuery是一个强大的JavaScript库，简化了DOM操作、事件处理、动画和Ajax交互。在这个案例中，jQuery扮演着关键角色，实现了点击切换年份的功能。通过`.click()`方法监听用户的点击事件，`.slideUp()`和`....
硬笔书法A4竖版.doc 在了解硬笔书法A4竖版.doc之前，我们需要了解什么是硬笔书法。硬笔书法是一种使用硬笔写作的艺术形式，它的历史可以追溯到中国古代。硬笔书法具有很高的艺术价值和文化价值，它不仅是一种书写...
"垂直选项卡竖版选项卡切换文字列表源码下载" 这个标题揭示了我们讨论的核心内容，即一个适用于网页设计的源码实现。它特别提到了“垂直选项卡”和“竖版选项卡切换”，这意味着源码提供了一种布局方式，使得在网页...
"竖版思维导图软件MindMaster" MindMaster是一款功能强大且易于使用的竖版思维导图软件，旨在帮助用户快速建立和管理思维导图。该软件提供了多种格式的导出功能，能够将思维导图导出为Office文件（Word、Excel、PPT...