<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脚本以及可能的图片资源。侧边导航菜单在用户...
`jquery.mmenu` 是一个专为手机和平板电脑设计的 jQuery 插件，它允许用户通过点击图标来展开或收起侧边导航菜单。这个插件使得在有限的屏幕空间内展示丰富的导航选项变得更加方便。在本文中，我们将深入探讨 `...
Bootstrap响应式多级下拉导航菜单.rar Bootstrap响应式多级下拉导航菜单.rar Bootstrap响应式多级下拉导航菜单.rar Bootstrap响应式多级下拉导航菜单.rar Bootstrap响应式多级下拉导航菜单.rar Bootstrap响应式多级...
总之，“jquery侧边划出导航菜单”是一个基于jQuery的交互设计实例，它利用了jQuery的事件处理和动画功能，实现了网页侧边栏的动态显示和隐藏，提升了网页的交互性和可用性。这样的技术在现代网页设计中非常常见，有...
标题 "WPF左侧漂亮的导航菜单.rar" 暗示了这是一个使用Windows Presentation Foundation（WPF）框架创建的项目，特别关注于实现一个美观且实用的左侧导航菜单。这个项目不仅包含了设计元素，还可能涉及交互逻辑，...
本文将深入探讨一种独特的导航菜单设计——“泡沫弹出框式的侧边导航菜单”，通过分析其结构、样式以及JavaScript实现机制，帮助读者理解这一设计思路。 #### 一、设计理念与实现目标 “泡沫弹出框式的侧边导航...
【标题】"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...
标题中的“一个非常好看的侧边菜单栏”表明我们要讨论的是网页设计中的一种组件，即用于导航的侧边菜单。这种菜单通常在网页的左侧或右侧，提供网站的主要链接和子菜单，帮助用户轻松地在各个页面之间切换。设计时...