<html>
<head>
<title>menu</title>
<style>
<!--
body{margin:0px;}
.main{height:25px;line-height:25px;width:120px;}
.main a{height:25px;line-height:25px;width:120px; text-align:center; font-size:14px; font-weight:bold; background:#0066FF; color:#FFFFFF;display:block; text-decoration:none;}
.main a:hover{background:#0000FF;}
.son{height:20px;line-height:20px;width:100px;margin-left:20px;}
.par{background:#F6F6F6;overflow:hidden; margin:0px;}
.son a{ text-decoration:none; color:#333333;}
.son a:hover{color:#FF0000;}
-->
</style>
</head>
<body>
<table width="120" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div class="main"><a name="main" href="#">MENU1</a></div>
<div id="menu0" class="par">
<div class="son"><a href="#">sonmenu1</a></div>
<div class="son"><a href="#">sonmenu2</a></div>
<div class="son"><a href="#">sonmenu3</a></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="main"><a name="main" href="#">MENU2</a></div>
<div id="menu1" class="par">
<div class="son"><a href="#">sonmenu1</a></div>
<div class="son"><a href="#">sonmenu2</a></div>
<div class="son"><a href="#">sonmenu3</a></div>
<div class="son"><a href="#">sonmenu4</a></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="main"><a name="main" href="#">MENU3</a></div>
<div id="menu2" class="par">
<div class="son"><a href="#">sonmenu1</a></div>
<div class="son"><a href="#">sonmenu2</a></div>
<div class="son"><a href="#">sonmenu3</a></div>
<div class="son"><a href="#">sonmenu4</a></div>
</div>
</td>
</tr>
</table>
</body>
</html>
<script language="javascript" type="text/javascript">
<!--
function $(id){
return document.getElementById(id);
}
function $N(name){
return document.getElementsByName(name);
}
function Xmenu(){
var obj=$N("main");
var ht=new Array();
var h=0;
var ch=0;
var ox=10;
var cx=20;
for(i=0;i<obj.length;i++){
obj[i].n=i;
ht[i]=$("menu"+i).offsetHeight;
$("menu"+i).closeRun=0;
$("menu"+i).runing=0;
$("menu"+i).h=0;
$("menu"+i).ch=0;
$("menu"+i).style.height=0+"px";
$("menu"+i).style.display="none";
obj[i].onclick=function(){
for(m=0;m<obj.length;m++){
if($("menu"+m).style.display!="none"&&$("menu"+m).closeRun==0){
clearInterval($("menu"+m).openMenu);
if(m!=this.n){$("menu"+m).runing=0;}
ch=$("menu"+m).offsetHeight;
$("menu"+m).closeMenu=setInterval("cl("+m+")",20);
$("menu"+m).closeRun=1;
}
}
if(($("menu"+this.n).style.display=="none"||$("menu"+this.n).runing==0)&&$("menu"+this.n).h!=ht[this.n]){
clearInterval($("menu"+this.n).closeMenu);
if($("menu"+this.n).style.display=="none"){
$("menu"+this.n).style.height=1+"px";
$("menu"+this.n).style.display="block";
}else{
$("menu"+this.n).h=$("menu"+this.n).offsetHeight;
}
$("menu"+this.n).closeRun=0;
$("menu"+this.n).openMenu=setInterval("op("+this.n+")",20);
}else{
$("menu"+this.n).runing=0;
}
}
}
this.op=function(j){
$("menu"+j).h+=ox;
if($("menu"+j).h>=ht[j]){$("menu"+j).style.height=ht[j]+"px";clearInterval($("menu"+j).openMenu);$("menu"+j).runing=0;return;}
$("menu"+j).runing=1;
$("menu"+j).style.height=$("menu"+j).h+"px";
}
this.cl=function(m){
$("menu"+m).h-=cx;
if($("menu"+m).h<=0){$("menu"+m).style.height=1+"px";$("menu"+m).style.display="none";clearInterval($("menu"+m).closeMenu);$("menu"+m).closeRun=0;return;}
$("menu"+m).style.height=$("menu"+m).h+"px";
}
}
Xmenu();
-->
</script>
分享到：
相关推荐
在本文中，我们将深入探讨如何使用Qt框架创建一个侧边垂直菜单导航栏。Qt是一个功能强大的C++库，广泛用于跨平台的图形用户界面（GUI）开发。在许多应用程序中，垂直导航栏作为主菜单布局，能有效地节省空间并提供更...
【标题】"js多功能侧边导航菜单插件.rar"是一个包含JavaScript和CSS技术的网页组件，主要用于实现功能丰富的侧边导航菜单。这类插件在现代网页设计中非常常见，能够提供用户友好的交互体验，帮助访问者更方便地浏览...
在网页设计中，导航菜单是不可或缺的一部分，它为用户提供了方便快捷的页面跳转途径。随着技术的发展，动态、交互性强的侧边导航菜单越来越受到设计师和开发者的青睐。jQuery作为一款轻量级的JavaScript库，提供了...
【标题】"js弹性侧边导航菜单特效....总结，"js弹性侧边导航菜单特效.rar"是一个综合了HTML结构、CSS样式和JavaScript交互的项目，涵盖了前端开发的核心技术，旨在为用户提供一个灵活、互动且视觉上吸引人的导航体验。
"jQuery适用于后台网站侧边多级下拉导航菜单"是一个专门设计用于此类场景的解决方案，它利用jQuery库的强大功能，为用户提供直观、易操作的多级菜单结构。这种导航菜单常见于各类后台管理系统，帮助管理员快速定位并...
本项目“Qml侧边滑动菜单QmlSlidingMenu”是一个专门针对QML的实现，旨在为应用程序添加一个常见的侧边滑动菜单功能，这种设计常见于许多现代移动应用中，如社交媒体应用和导航应用。 首先，让我们深入了解QML。QML...
"jQuery侧边浮动多级导航菜单代码" 就是为了解决这个问题而设计的，它提供了一种在手机端展示多级菜单的解决方案。下面我们将深入探讨这个jQuery插件的工作原理、特点以及如何实现这样的功能。 首先，jQuery是一种...
【描述】"商城侧边导航定位jquery菜单.zip"可能包含了一系列文件，用于构建一个具备定位功能的侧边导航菜单。这个压缩包可能包括HTML模板文件、CSS样式表、JavaScript脚本以及可能的图片资源。侧边导航菜单在用户...
Bootstrap响应式多级下拉导航菜单.rar Bootstrap响应式多级下拉导航菜单.rar Bootstrap响应式多级下拉导航菜单.rar Bootstrap响应式多级下拉导航菜单.rar Bootstrap响应式多级下拉导航菜单.rar Bootstrap响应式多级...
总之，“jquery侧边划出导航菜单”是一个基于jQuery的交互设计实例，它利用了jQuery的事件处理和动画功能，实现了网页侧边栏的动态显示和隐藏，提升了网页的交互性和可用性。这样的技术在现代网页设计中非常常见，有...
标题 "WPF左侧漂亮的导航菜单.rar" 暗示了这是一个使用Windows Presentation Foundation（WPF）框架创建的项目，特别关注于实现一个美观且实用的左侧导航菜单。这个项目不仅包含了设计元素，还可能涉及交互逻辑，...
本文将深入探讨一种独特的导航菜单设计——“泡沫弹出框式的侧边导航菜单”，通过分析其结构、样式以及JavaScript实现机制，帮助读者理解这一设计思路。 #### 一、设计理念与实现目标 “泡沫弹出框式的侧边导航...
本篇将深入探讨一个特定的jQuery实现：3D页面倾斜侧边菜单。这个菜单代码借助CSS3的特性，为用户提供了独特的视觉体验，使得页面导航更加吸引人。 首先，我们来看jQuery的作用。jQuery是一个轻量级、高性能的...
标题中的“Zepto.js移动端左右滑动导航菜单”是指一个基于Zepto.js库开发的，专为移动设备设计的交互式导航菜单。该菜单具备左右滑动的功能，允许用户通过在屏幕上向左或向右滑动来切换不同的导航选项。在iOS和...
【标题】"79、Jquery商城侧边导航定位菜单"涉及到的是在电子商务网站中，使用Jquery技术实现的一种交互式侧边导航菜单。这种菜单通常具有动态定位功能，能够随着用户滚动页面而始终保持在视窗可见范围内，提供便捷的...
这个“jquery实现的高级侧边导航菜单效果(鼠标滑过即可弹出).zip”文件显然包含了利用jQuery创建的一个高级侧边导航菜单的示例。这种类型的菜单在现代网页设计中非常常见，因为它们提供了用户友好的交互体验，特别是...
在网页设计中，导航菜单是不可或缺的部分，它帮助用户快速浏览和访问网站的不同部分。"jQuery响应式导航菜单"是一个专为实现这一目的而设计的解决方案。这个项目使用了两个核心JavaScript库：jQuery 1.8.3和pgwmenu....
首先，要创建一个侧边导航栏，我们需要引入Bootstrap的CSS和JavaScript库。这通常通过在HTML文件的`<head>`部分添加链接和脚本标签来完成： ```html <!DOCTYPE html> , initial-scale=1.0"> <title>Bootstrap...