<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function k1(vd) {
            var ob = document.getElementById(vd);
            ob.style.display = "none";
            //var ob2 = document.getElementById('s' + vd);            
        }

function k0(vd) {
            var ob = document.getElementById(vd);            
            ob.style.display = "block";
            //var ob2 = document.getElementById('s' + vd);        
        }
    
    </script>

<style type="text/css">
        .b
        {
            width:100px;
           margin:5px,auto,5px,auto;
           padding:2px,2px;
           background-color:Gray;
           line-height:35px;
           font-family:@Arial Unicode MS;
           font-size:18px;         
        }
        .ps
        {
               display:none;
            }
    
    </style>
</head>
<body>
 
  <div id="sfgc91" class="b" onmousemove="k0('fgc91')" onmouseout="k1('fgc91')"  onclick="k0('fgc91')" >
      <a target="FrameRight" href="#">菜单1</a>
      <div class="ps" id="fgc91">
       <div class="b"><a target="FrameRight" href="#">1-1</a></div>
       <div class="b"><a target="FrameRight" href="#">1-2</a></div>
       <div class="b"><a target="FrameRight" href="#">1-3</a></div>
      </div>
  </div>

<div id="sfgc92" class="b" onmousemove="k0('fgc92')" onmouseout="k1('fgc92')"  onclick="k0('fgc92')">
      <a target="FrameRight" href="#">菜单2</a>
      <div class="ps" id="fgc92">
       <div class="b"><a target="FrameRight" href="#">2-1</a></div>
       <div class="b"><a target="FrameRight" href="#">2-2</a></div>
       <div class="b"><a target="FrameRight" href="#">2-3</a></div>
      </div>
  </div>

<div id="sfgc93" class="b" onmousemove="k0('fgc93')" onmouseout="k1('fgc93')"  onclick="k0('fgc93')">
      <a target="FrameRight" href="#">菜单3</a>
      <div class="ps" id="fgc93">
       <div class="b"><a target="FrameRight" href="#">3-1</a></div>
       <div class="b"><a target="FrameRight" href="#">3-2</a></div>
       <div class="b"><a target="FrameRight" href="#">3-3</a></div>
      </div>
  </div>

</body>
</html>

最简单的javascript 竖向菜单的更多相关文章

  1. jQuery实现右上角点击后滑下来的竖向菜单

    效果体验请点击这里:http://keleyi.com/a/bjad/27095rgj.htm 这个菜单我觉得可以做成在线客服之类的,点击下滑后,带关闭按钮,因此在不想显示的时候可以关掉它. 以下是源 ...

  2. JS实现的简单横向伸展二级菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. JQuery -&gt; 超级简单的下拉菜单

    使用jquery实现一个超级简单的下拉菜单. 效果图 最初的效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRmVlTGFuZw==/font/5a6L ...

  4. 简单jQuery 实现手风琴菜单

    简单jQuery 实现手风琴菜单 css代码 如下: *{ margin: 0; padding: 0; } #accordion{ width: 500px; } #accordion>div ...

  5. 在AJAX里 使用【 XML 】 返回数据类型 实现简单的下拉菜单数据

    在AJAX里 使用XML返回数据类型 实现简单的下拉菜单数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  6. 在AJAX里 使用【 JSON 】 返回数据类型 实现简单的下拉菜单数据

    在AJAX里 使用JSON返回数据类型 实现简单的下拉菜单数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  7. 最简单的JavaScript模板引擎

    在小公司待久了感觉自己的知识面很小,最近逛博客园和一些技术网站看大家在说JavaScript模版引擎的事儿,完全没有概念,网上一搜这是08年开始流行起来的...本来以为这是很高深的知识,后来在网上看到 ...

  8. JavaScript目录菜单滚动反显组件的实现

    JavaScript目录菜单滚动反显组件,有以下两个特点 每个导航菜单项(nav)对应页面一个内容区域(content) 滚动页面到特定内容区域(content)时,对应的菜单会自动切换,一般会添加一 ...

  9. 一个简单的javascript节流器实现

    节流器 javascript的节流器主要用于延缓某些动作的执行,比如ajax请求,如果input框注册了input事件,那么当用户输入时就会持续的触发这个事件,如果回调函数中持续的通过ajax调用后台 ...

随机推荐

  1. java附件上传下载磁盘版

    ACTION public class UploadAction extends BaseAction { private static final long serialVersionUID = 1 ...

  2. 如何使用沉浸式状态栏，让你的app风格更好看

    大家都知道,传统的手机状态栏非黑即白,经常让整个app显得不是那么的好看,如何让状态栏的颜色跟你整个界面的颜色能够融为一体,这是我们一直想要的,现在给大家展示一下: 由图可见,第一张是没有使用沉浸式状 ...

  3. cocos2dx CCEditBox

    CCTextFieldTTF是一个简单的封装,用起来不是那么便利,在cocos2dx的extension里,对输入框有更加简单使用的类,那就是CCEditBox 上代码先: bool EditBox0 ...

  4. Evernote Clearly :: Firefox 附加组件

    Evernote Clearly :: Firefox 附加组件 Evernote Clearly 10.1.1.2 作者: Evernote Evernote Clearly 可使博客贴文.文章和网 ...

  5. android UI跨线程操作

    android应用程序也是单线程程序,主线程为UI线程. android 线程是非安全的,即不要在子线程中更新 UI. public class MasterActivity extends Acti ...

  6. 一步一步学c#（六）：数组

    数组 简单数组 如果需要使用同一个类型的多个对象,就可以使用数组.数组是一种数据结构,它可以包含同一类型的多个元素. 数组声明:int[] myArray 使用new运算符,指定数组中元素的类型和数量 ...

  7. iOS 10 创建iMessage App

    原文作者 澳大利亚19岁少年--Davis Allie ----原文地址 时值中秋佳节, 送给出门在外的程序猿们 ! 骚年们, 自己写个表情包斗图可否 ! 斗-seal.svg.png 第一. 介绍 ...

  8. 关于反射的一个小问题---.NetFrameWork版本不一样导致不同的系统的问题

    背景: 近期项目中用到发射,本人的电脑上是安装了.NetFrameWork 4.5,然后用着发射蛮顺溜的,啪啪,三下五除二,项目完成了,然后提交测试了,测试的电脑是虚拟机上安装了xp系统,然后.Net ...

  9. printf参数的问题

    根据前面的某一篇的文章,可以清楚的看到:对于每一个函数,通过这个函数的[ebp+x]就可以直接访问到它调用的时候传进来的形参的值,通过[ebp-x]就可以直接访问它的局部变量. 所以printf这个函 ...

  10. 我用过的linux命令--安装JDK

    首先,我的测试环境是CentOS的linux虚拟机,如果想安装JDK,首先要有一个JDK.利用的软件就是WinSCP,把JDK从windows中传送到Linux中去. 1. JDK从Windows到L ...