很简单的JS二级菜单显示，收藏

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <style type="text/css">

        .menu span { float: left; margin-right: 10px; position: relative;}

        .menu a { display: block; }

        .menu span div { border: 1px solid black;display: none; }

    </style>

    <script src="Js/jquery-1.8.0.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $(".menu span").hover(function () {

                $(this).children("div").attr("style", "display: block");

            },

            function () {

                $(this).children("div").attr("style", "");

            })

        });

    </script>

</head>

<body>

    <div class="menu">

        <span><a href="#">菜单一</a></span>

        <span><a href="#">菜单二</a>

            <div>

                <a href="#">子项一</a> <a href="#">子项二</a> <a href="#">子项三</a>

            </div>

        </span>

        <span><a href="#">菜单三</a>

            <div>

                <a href="#">子项一</a> <a href="#">子项二</a> <a href="#">子项三</a>

            </div>

        </span>

    </div>

</body>

</html>

竖直的，点击

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <style type="text/css">

        * { margin: 0; padding: 0; }

        #nav { width: 200px; margin: 50px; }

        #nav h3 { cursor: pointer; line-height: 30px; height: 30px; background-color: #000000; color: #fff; }

        #nav a { display: block; line-height: 24px; color: #666666; }

        #nav a:hover { background-color: #eee; color: #000; }

        #nav div { display: none; border: 1px solid #000; border-top: none; }

    </style>

    <script type="text/javascript">

        function $(id) { return document.getElementById(id) }

        window.onload = function (e) {

            $("nav").onclick = function (e) {

                var src = e ? e.target : event.srcElement;

                if (src.tagName == "H3") {

                    var next = src.nextElementSibling || src.nextSibling;

                    next.style.display = (next.style.display == "block") ? "none" : "block";

                }

            }

        }

    </script>

</head>

<body>

    <div id="nav">

        <h3>

            管理区</h3>

        <div>

            <a href="#">111</a> <a href="#">222</a> <a href="#">333</a>

        </div>

        <h3>

            交流区</h3>

        <div>

            <a href="#">aaa</a> <a href="#">bbb</a> <a href="#">ccc</a>

        </div>

    </div>

</body>

</html>

Js- 菜单的更多相关文章

  1. 简单的js菜单

    <!DOCTYPE html> <html> <head> <title>hovertree</title><base target= ...

  2. JS菜单条智能定位效果

    JS仿淘宝详情页菜单条智能定位效果 2014-01-15 15:40 by 龙恩0707, 1366 阅读, 9 评论, 收藏, 编辑 类似于淘宝详情页菜单条智能定位 对于每个人来说并不陌生!如下截图 ...

  3. 自动切换的JS菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > <html xmlns=&quo ...

  4. js菜单默认选中

    function defaultSelected() { var curr = $("#leftTree li[onclick*='" + $("#content_ifr ...

  5. JGUI源码：JS菜单动态绑定(8)

    我们知道Jquery绑定事件后的新添加的对象是不响应事件的,为了解决这个问题,动态添加的对象需要从新绑定,使用一个init方法实现代码如下 //Accordion封装 (function($) { J ...

  6. js 菜单收起和展开

  7. 150个JS特效脚本

    收集了其它一些不太方便归类的JS特效,共150个,供君查阅. 1. simplyScroll simplyScroll这个jQuery插件能够让任意一组元素产生滚动动画效果,可以是自动.手动滚动,水平 ...

  8. 实用的树形菜单控件tree

     jQuery plugin: Treeview  这个插件能够把无序列表转换成可展开与收缩的Tree. jQuery plugin: Treeview  jQuery  jstree  jsTree ...

  9. html树形菜单控件

    html树形菜单控件  链接 http://www.ithao123.cn/content-713974.html         jQuery plugin: Treeview  这个插件能够把无序 ...

  10. java实现的可以无限级别添加子节点的菜单树

    网上大部分菜单树,都是单独用js代码来实现的,这样做的缺点是:用户无法动态的设置菜单项,比如,超级管理员可能需要根据每个用户的权限,赋予他们不同的系统功能,不同的功能对应着不同数量的菜单项. 对于此问 ...

随机推荐

  1. PHP PhantomJs中文文档（翻译）

    介绍 PHP PhantomJS 是一个灵活的 PHP 库加载页面通过 PhantomJS 无头浏览器并将返回页面响应.这是方便于需要JavaScript的支持,同时还支持截屏测试网站.功能列表通过 ...

  2. ECMAScript 5正式发布

    这周ECMAScript 5也即众所周知的JavaScript正式发布了(pdf),在给基本库带来更新的同时,还引入了更加严格的运行时模型,来帮助定位并移除通常的代码错误. 而早期对于ECMAScri ...

  3. poj 3185 The Water Bowls

    The Water Bowls 题意:给定20个01串(最终的状态),每个点变化时会影响左右点,问最终是20个0所需最少操作数? 水题..直接修改增广矩阵即可:看来最优解不是用高斯消元(若是有Gaus ...

  4. URL传参中不能带特殊的字符以及处理方案

    有些符号在URL中是不能直接传递的,如果要在URL中传递这些特殊符号,那么就要使用他们的编码了.编码的格式为:%加字符的ASCII码,即一个百分号%,后面跟对应字符的ASCII(16进制)码值.例如 ...

  5. 定位 - MapKit-自定义大头针

    #import <Foundation/Foundation.h> #import <MapKit/MapKit.h> @interface PPAnnotation : NS ...

  6. android开发环境重装系统之后的配置

    前提: 之前配置好的android开发环境:重装系统:压缩了android目录 配置: 安装java环境 安装; 建立JAVA_HOME变量:JAVAHOME添加到path变量 JAVA_HOME=C ...

  7. Matlab界面语言切换，自由显示中文或英文语言

    Matlab界面语言切换,自由显示中文或英文语言分享给大家,Matlab是一款商业数学软件,广泛使用于算法的开发.数据发现和数值计算等.不同用户对Matlab显示的语言需求也不一样,一用户习惯使用中文 ...

  8. centos6.5搭建vpn服务器

    1 安装ppp yum install -y ppp  2 安装pptpd yum install pptpd   //  rpm -Uvh http://poptop.sourceforge.net ...

  9. bzoj 2806: [Ctsc2012]Cheat 后缀自动机DP

    2806: [Ctsc2012]Cheat Time Limit: 20 Sec  Memory Limit: 256 MBSubmit: 583  Solved: 330[Submit][Statu ...

  10. POJ 2892 Tunnel Warfare || HDU 1540（树状数组+二分 || 线段树的单点更新+区间查询）

    点我看题目 题意 :N个村子连成一条线,相邻的村子都有直接的地道进行相连,不相连的都由地道间接相连,三个命令,D x,表示x村庄被摧毁,R  ,表示最后被摧毁的村庄已经重建了,Q x表示,与x直接或间 ...