`
jackroomage
  • 浏览: 1223209 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

一个伸缩形的网页菜单,竖着排列,点一级主菜单会展开所属的二级菜单,再次点击就合拢了

 
阅读更多

<%@ page language="java" contentType="text/html"
    pageEncoding="utf-8"%>
<html>
<head>
<title>伸缩形的菜单</title>
</head>

<body>

<BODY>
<table width="100%">
<tr id="main"><td  bgcolor="#F6FFEC"><strong><a  style="cursor:hand;"title="etststst">网站源码</a></strong></td>
</tr>
<tr id="sub" style="display:none;"><td><table width="300" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><ul>
      <li><a href="#">ASP</a></li>
    </ul></td>
  </tr>
  <tr>
    <td><ul>
      <li><a href="#">PHP</a></li>
    </ul></td>
  </tr>
  <tr>
    <td><ul>
      <li><a href="#">ASP.NET</a></li>
    </ul></td>
  </tr>
</table></td>
</tr>
<tr id="main"><td><a href="#">编程源码</a></td>
</tr>
<tr id="sub" style="display:none;"><td><table width="300" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>vb</td>
  </tr>
  <tr>
    <td>VC</td>
  </tr>
  <tr>
    <td>DELPHI</td>
  </tr>
  <tr>
    <td>PB</td>
  </tr>
</table>
</td>
</tr>
<tr id="main"><td><a href="#">前端脚本</a></td>
</tr>
<tr id="sub" style="display:none;"><td>
<table width="300" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>jQuery</td>
  </tr>
  <tr>
    <td>prototype</td>
  </tr>
  <tr>
    <td>ext</td>
  </tr>
</table>
<tr id="main"><td><a href="#">网页素材</a></td>
</tr>
<tr id="sub" style="display:none;"><td>
<table width="300" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>Tab</td>
  </tr>
  <tr>
    <td>Menu</td>
  </tr>
</table>
</td>
</tr>
</table>
<script for="main" event="onclick">
for(var i=0; i<sub.length; i++){
if (main[i] == this) sub[i].style.display = sub[i].style.display == '' ? 'none' : '';
else sub[i].style.display = 'none';
}
</script>

</body>
</html>

分享到:
评论

相关推荐

    js导航菜单左侧竖纵向二级导航菜单可点击展开与收缩子菜单

    "js导航菜单左侧竖纵向二级导航菜单可点击展开与收缩子菜单"是一个专门针对这种交互需求设计的功能。这个功能通常应用于那些层次结构较深、内容较多的网站,使用户能够更加方便地探索和定位信息。 在实现这样的导航...

    伸缩树形菜单+树状菜单

    在网页开发中,"伸缩树形菜单"和"树状菜单"是常见的交互元素,它们主要用于组织和展示层级结构的数据,例如网站导航、文件目录等。这两种菜单形式提供了良好的用户体验,用户可以通过展开和收缩节点来查看或隐藏子...

    VB 可伸缩展开的菜单实例

    通过以上步骤,你可以创建一个具备可伸缩展开功能的VB菜单系统。这种设计能够提升应用程序的易用性,使得复杂的菜单结构变得更加直观,同时允许用户根据自己的需求调整界面布局。在实际项目中,可以根据具体需求对这...

    树形可伸缩菜单

    这意味着用户可以点击一级菜单,展示二级菜单,再次点击二级菜单项,会展开三级菜单。这样的设计允许用户逐级深入,探索更详细的信息。 3. **下拉菜单**:下拉菜单是一种交互设计模式,当用户点击一个按钮或链接时...

    js实现的可伸缩的级联菜单

    在这个“js实现的可伸缩的级联菜单”项目中,开发者使用JavaScript这一强大的客户端脚本语言,构建了一个动态的、可扩展的级联菜单系统。 JavaScript是一种轻量级的解释型编程语言,主要应用于网页和网络应用的交互...

    css竖型鼠标触发伸缩菜单

    "CSS竖型鼠标触发伸缩菜单"是一个实现这种效果的技术,它允许用户通过悬停鼠标来展开或收起菜单项,通常用于导航栏,使得网站的层级结构更加清晰且易于操作。接下来,我们将深入探讨这个主题,了解其工作原理、实现...

    JS 二级下拉菜单。很漂亮,就是没实现三级下拉

    扩展到三级下拉菜单,我们需要在二级菜单项内再嵌套一个`&lt;ul&gt;`,并重复上述过程,但要注意以下几点: - 需要分别处理不同级别的鼠标悬停事件,以避免二级和三级菜单的显示互相干扰。 - 可以使用CSS的`position`属性...

    C#版 窗体菜单 可伸缩/展开

    可以伸缩/展开的C#版窗体菜单,类似Windows的开始-程序菜单一样,最先显示最常用的菜单项,点击下拉箭头会显示出全部的菜单项,本例和这种效果非常相似,这是基于C#2005版的,这个功能还算很实用哦。

    C#Winform左侧伸缩菜单实现

    在C# WinForm应用开发中,创建一个可伸缩的左侧菜单是常见需求,它可以提供良好的用户界面体验,尤其在大型复杂系统中。本话题将深入探讨如何在C# WinForm环境中实现这样的功能。 首先,我们需要理解WinForm的基本...

    可折叠的自动伸缩菜单

    当用户点击一级菜单项时,JavaScript会检查对应的二级菜单是否已经展开。如果展开,就将其收起;如果未展开,则展开它。同时,需要遍历所有其他的一级菜单项,确保它们的子菜单都收起。这通常通过修改CSS样式(例如...

    Android实现伸缩弹力分布菜单效果(直线型布局)

    1. **布局设计**:创建一个LinearLayout或RelativeLayout作为菜单的基础布局,每个菜单项是一个ImageView或TextView,布局文件中需要设置好菜单项的初始位置和大小。 2. **计算动画参数**:根据菜单项的数量和屏幕...

    是实现伸缩的两级菜单

    "是实现伸缩的两级菜单"这个主题聚焦于创建一种可扩展的导航结构,这种结构通常用于网站或应用的主菜单,它允许用户方便地浏览多级分类。在这里,我们将深入探讨如何使用jQuery来实现这样的功能。 jQuery是一个强大...

    jQuery伸缩型菜单

    jQuery伸缩型菜单是一种在网页开发中常用的交互式导航组件,它允许用户通过鼠标悬停或点击来展开或收缩子菜单项,为用户提供更直观、更便捷的浏览体验。这种菜单设计尤其适用于多层次的网站结构,能有效地组织大量...

    伸缩按钮导航菜单

    在IT行业中,设计一个高效的用户界面是至关重要的,而“伸缩按钮导航菜单”就是一种在许多应用程序中广泛采用的设计模式。这种设计旨在提供一种既节省空间又易于使用的导航方式,尤其是在移动设备和平板电脑等屏幕...

    jquery 伸缩菜单jquery打造的竖向伸缩菜单

    本篇文章将深入探讨如何利用jQuery这一强大的JavaScript库来创建一个竖向伸缩菜单。我们将从基本概念出发,逐步讲解实现这一功能所需的HTML结构、CSS样式以及jQuery脚本。 首先,我们需要了解伸缩菜单的基本结构。...

    jQuery实现的动态伸缩导航菜单实例

    在这个列表中,每一个`&lt;li&gt;`元素都是一个导航菜单项,包含一个链接`&lt;a&gt;`和一个默认隐藏的`&lt;div&gt;`。当点击链接时,就会触发我们之前编写的jQuery脚本,从而实现点击链接切换`&lt;div&gt;`展开与折叠的动态效果。 通过这个...

    JavaScript案例-js伸缩二级菜单

    二级菜单通常由一个主菜单和多个子菜单组成,子菜单会在用户悬停在相应的主菜单项上时出现。在HTML中,我们可以使用`&lt;ul&gt;`和`&lt;li&gt;`元素来构建这些层次结构。例如: ```html 菜单1 子菜单1 子菜单2 菜单2...

    炫酷flash伸缩菜单源码

    "炫酷Flash伸缩菜单源码"是一个利用Adobe Flash(可能使用ActionScript 2或3)开发的交互式菜单系统,它以动态、富有视觉吸引力的方式呈现网站的层级结构。这个源码的核心特点是菜单项在用户交互时能够伸缩,提供了...

    二级菜单三种不同

    在网页设计中,二级菜单通常出现在主菜单项下,用于展示更具体或细分的类别。当用户鼠标悬停在主菜单项上时,二级菜单会滑出显示,提供更多的导航选项。这种结构使得网站层次清晰,便于用户快速找到所需信息。 接着...

    简单的三级级联伸缩菜单

    当用户点击或悬停在一级菜单上时,通过改变二级和三级菜单的`display`属性,可以实现菜单的动态展开和收起。 4. 响应式设计:考虑到不同设备和屏幕尺寸,菜单还需要适应移动设备。可以通过媒体查询(media queries...

Global site tag (gtag.js) - Google Analytics