<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库，提供了...
本项目“Qml侧边滑动菜单QmlSlidingMenu”是一个专门针对QML的实现，旨在为应用程序添加一个常见的侧边滑动菜单功能，这种设计常见于许多现代移动应用中，如社交媒体应用和导航应用。 首先，让我们深入了解QML。QML...
`jquery.mmenu` 是一个专为手机和平板电脑设计的 jQuery 插件，它允许用户通过点击图标来展开或收起侧边导航菜单。这个插件使得在有限的屏幕空间内展示丰富的导航选项变得更加方便。在本文中，我们将深入探讨 `...
"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实现机制，帮助读者理解这一设计思路。 #### 一、设计理念与实现目标 “泡沫弹出框式的侧边导航...
总结来说，基于Zepto.js的移动端左右滑动导航菜单项目是对移动网页用户交互体验的一次有益尝试。它利用了现代前端技术，结合移动设备的操作习惯，为用户提供了一个高效、直观的导航方式。随着前端技术的不断进步和...
本篇将深入探讨一个特定的jQuery实现：3D页面倾斜侧边菜单。这个菜单代码借助CSS3的特性，为用户提供了独特的视觉体验，使得页面导航更加吸引人。 首先，我们来看jQuery的作用。jQuery是一个轻量级、高性能的...
【标题】"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...
接下来，我们可以创建一个侧边导航菜单的HTML结构，这可能包含多个层级的列表项： ```html <li><a href="#">商品类别1 <li><a href="#">子类别1</a></li> <li><a href="#">子类别2</a></li> <li><a href...