`

一个简单的2级菜单

MicrosoftHTML 
阅读更多 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <meta name="generator" content="Bluefish 1.0.7">
  <meta name="author" content="root">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
<style>
a {
       font-family:Arial, Helvetica, sans-serif;
       font-size:10px;
       color:#666;
       text-decoration:none;
}

a:hover {
       color:#F90;
       text-decoration:underline;
}

a:vistied {
       color:#666;
       text-decoration:none;
}

#tree li {
       color:#666;
       font-size:10px;
       font-family:Arial, Helvetica, sans-serif;
       line-height:180%;
       list-style:none;
}

#tree ul {
       margin-left:16px;
       padding-left:0px;
       display:none;
}

</style>
<script type="text/javascript">
       var lastSubMenuID;
       //记录最后点击的子菜单
       function doRecord(subMenuID) {
              document.getElementById(subMenuID).style.display = "none";
              //alert(subMenuID);
              lastSubMenuID = subMenuID;
       }
       
       //隐藏子菜单
       function hideLastSubMenu() {
              if(lastSubMenuID == undefined || lastSubMenuID == "") {
                     return;
              } else {
                     var lastSubMenu = document.getElementById(lastSubMenuID);
                //     alert(lastSubMenu);
                     lastSubMenu.style.display = "none";
              }
       }
       
       //显示子菜单
       function showSubMenu(subMenuID) {
             //alert(subMenuID);
              if(lastSubMenuID == subMenuID) {
                     if(document.getElementById(lastSubMenuID).style.display == "block") {
                            document.getElementById(lastSubMenuID).style.display = "none";
                            return;
                     }
              }
              
              if(lastSubMenuID == undefined) {
                     doRecord(subMenuID);
              }else{
                     hideLastSubMenu();
                     doRecord(subMenuID);
              }
              changeMenuState(subMenuID);
       }
       
       //改变子菜单的样式
       function changeMenuState(subMenuID) {
             //alert(subMenuID);
              var subMenu = document.getElementById(subMenuID);
              //subMenu.style.filter = "progidXImageTransform.Microsoft.Wipe()";
              //subMenu.filters[0].apply();
              subMenu.style.display = "block";
              //subMenu.filters[0].play();
       }
</script>
</HEAD>

<BODY>
       <ul id="tree">
       <li id="mainMenu1">
       <a href="#" onClick="showSubMenu('main1SubMenu');">Syringes</a>
              <ul id="main1SubMenu">
                     <li><a href="#" class="link1">Safety Syringes</a></li>
                     <li><a href="#" class="link1">0.1ml Safety...</a></li>
                     <li><a href="#" class="link1">0.5ml Safety...</a></li>
              </ul>
       </li>
       
       <li id="mainMenu2">
       <a href="#" onClick="showSubMenu('main2SubMenu');">Moulds</a>
              <ul id="main2SubMenu">
                     <li><a href="#" class="link1">Hot Runner...</a></li>
                     <li><a href="#" class="link1">Semi-Hot...</a></li>
                     <li><a href="#" class="link1">Cold Runner...</a></li>
              </ul>
       </li>
       
       <li id="mainMenu3">
       <a href="#" onClick="showSubMenu('main3SubMenu');">Moulds</a>
              <ul id="main3SubMenu">
                     <li><a href="#" class="link1">Hot Runner...</a></li>
                     <li><a href="#" class="link1">Semi-Hot...</a></li>
                     <li><a href="#" class="link1">Cold Runner...</a></li>
              </ul>
       </li>

       <li id="mainMenu4">
       <a href="#" onClick="showSubMenu('main4SubMenu');">Moulds</a>
              <ul id="main4SubMenu">
                     <li><a href="#" class="link1">Hot Runner...</a></li>
                     <li><a href="#" class="link1">Semi-Hot...</a></li>
                     <li><a href="#" class="link1">Cold Runner...</a></li>
              </ul>
       </li>
  </ul>
</BODY>
</HTML>
分享到：
| mysql优化(InnoDB)
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    简单网页二级菜单的实现

    以上就是一个简单网页二级菜单的基本实现。通过HTML、CSS和JavaScript的结合，我们创建了一个易于理解和操作的交互式菜单。你可以根据自己的需求调整样式和交互效果，使其更符合网站的整体设计风格。在实际项目中，...

    二级联动菜单 超强超简单的数据库（附数据库）

    在本资源“二级联动菜单 超强超简单的数据库（附数据库）”中，我们可以推测它包含了一个实现二级联动效果的数据库和相关代码示例。数据库在这里起到了关键作用，存储了各个菜单项之间的关联关系和数据，使得菜单...

    二级下拉菜单的简单做法

    2. 对一级下拉菜单的每一个选项，使用IF函数或间接引用来动态生成二级下拉菜单的来源。假设一级菜单在A列，二级菜单在B列，对于单元格B2（对应A2的一级菜单），可以使用如下公式： `=IF(A2="销售部", "销售一部,...

    ListView实现二级菜单

    这里我们创建了两个表，一个是`menu`用于存储一级菜单，另一个是`submenu`用于存储二级菜单，其中`parentId`字段关联一级菜单的_id。 接下来，我们需要填充数据。可以使用ContentProvider或者直接在...

    基于stm32的三级菜单

    三级菜单通常包含主菜单、子菜单以及子子菜单，这种结构提供了一个有层次的选项列表，用户可以逐步深入到更具体的操作或设置。例如，主菜单可能是“系统设置”，子菜单可能是“显示设置”，而子子菜单则可能包括...

    Vue2右键无限级菜单

    Vue.js是一个流行的轻量级JavaScript框架，它以组件化和声明式编程为核心，使得创建这样的功能变得相对简单。本文将深入探讨如何使用Vue2实现一个可自定义内容、图标和点击事件的无限级右键菜单。 首先，我们需要...

    js实现二级菜单.zip

    下面将详细探讨如何使用JavaScript来创建一个功能完备、响应式的二级菜单。 首先，我们需要理解二级菜单的基本结构。通常，二级菜单是在鼠标悬停在一级菜单项上时显示的子菜单，包含一系列与一级菜单相关的子选项。...

    CSS简单竖直二级菜单.zip

    在这个名为“CSS简单竖直二级菜单”的项目中，我们将探讨如何使用CSS来创建一个易于理解和实现的垂直二级菜单，特别适合初学者入门。 一、HTML结构基础 首先，我们需要构建HTML的基础结构。二级菜单通常由一级菜单...

    dwr实现2级级联菜单(sql2000 数据库)

    5. **事件监听**：当一级菜单的选择发生变化时，触发一个事件，该事件会调用DWR方法获取对应的一级菜单ID的二级菜单，并更新二级菜单的显示。 6. **级联效果**：为了实现级联效果，需要确保在一级菜单改变时，二级...

    竖向二级菜单

    一个基本的竖向二级菜单HTML结构包含`&lt;ul&gt;`和`&lt;li&gt;`元素，一级菜单作为顶级`&lt;ul&gt;`的`&lt;li&gt;`，二级菜单作为一级菜单`&lt;li&gt;`的子`&lt;ul&gt;`。例如： ```html 一级菜单1 二级菜单1-1 二级菜单1-2 一级菜单2 ...

    树形菜单 二级菜单

    在实现树形菜单和二级菜单时，jQuery是一个强大的JavaScript库，提供了丰富的功能和简便的API。以下是如何使用jQuery创建树形菜单的步骤： 1. **HTML结构**：首先，我们需要创建一个基础的HTML结构，用`&lt;ul&gt;`和`...

    Android级联菜单，两级菜单

    综上所述，`CascadingMenuViewLib`库提供了一个自定义的两级菜单解决方案，利用了Android的PopWindow和Fragment特性，使得在Android应用中实现级联菜单变得更加简单和灵活。开发者可以通过这个库来快速构建自己的...

    鼠标经过显示二级菜单js效果

    一级菜单的每个项目都是一个`&lt;li&gt;`元素，而二级菜单则作为一级菜单项的子元素，可能嵌套在`&lt;ul&gt;`中。例如： ```html 一级菜单1 二级菜单1 二级菜单2 一级菜单2 ``` 接下来，我们将使用...

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

    下面是一个简单的二级下拉菜单的JS和CSS实现步骤： 1. **HTML 结构**： 创建一个包含一级菜单项的`&lt;ul&gt;`，每个菜单项内嵌套另一个`&lt;ul&gt;`作为二级菜单，初始时设置二级菜单的`display`为`none`。 2. **CSS 样式**...

    51单片机二级菜单带仿真

    【51单片机二级菜单带仿真】是一个关于嵌入式系统编程的实践项目，主要集中在51系列单片机上使用C语言实现一个二级菜单的功能。51单片机是微控制器领域中最基础且广泛使用的芯片之一，以其简单易用、性价比高的特点...

    3级下拉菜单

    在网页设计中，3级下拉菜单是一种常见的交互元素，常用于导航栏，帮助用户在层级结构复杂的网站中快速定位和浏览内容。这种菜单结构能够有效地组织和展示大量的信息，而不会使页面显得过于拥挤。下面我们将深入探讨3...

    jQuery后台左侧三级导航菜单

    首先，jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画效果以及Ajax交互等任务。在构建后台导航菜单时，jQuery提供了丰富的API和功能，使得动态交互变得简单易行。 三级导航菜单通常包括...

    二级菜单代码

    二级菜单通常包含一个父级元素（一级菜单项）和一个或多个子级元素（二级菜单项）。例如，可以使用`&lt;ul&gt;`和`&lt;li&gt;`标签来表示列表，一级菜单项是`&lt;li&gt;`中的链接元素`&lt;a&gt;`，而二级菜单项则嵌套在一级菜单项的子`&lt;ul&gt;`...

    网页三级菜单的制作

    一级菜单位于顶级`&lt;ul&gt;`中，二级菜单作为一级菜单的子`&lt;li&gt;`，内嵌另一个`&lt;ul&gt;`，而三级菜单则作为二级菜单的子`&lt;li&gt;`，同样包含一个`&lt;ul&gt;`。例如： ```html 一级菜单1 &lt;ul class="level2"&gt; 二级菜单1 ...

    Android实现二级菜单和标题栏菜单

    本文将深入探讨如何在Android中实现二级菜单以及标题栏菜单，以创建一个层次分明、操作便捷的交互界面。 首先，我们来了解Android中的菜单概念。Android菜单主要分为两种类型：选项菜单（OptionsMenu）和上下文菜单...

Magicbox
Global site tag (gtag.js) - Google Analytics