很简单的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. html渐隐轮播

    这是我之前用的时候从一个模板中下载下来用的,现在又用到了,我又重新找了一遍,为防止我下次用到忘记,特写下此文: 下载插件:jquery-2.1.4.min.js和slider.js 首页轮播页面首页i ...

  2. .where(provider).FirstOrDefault()和.FirstOrDefault(provider)的性能比较

    最近遇到一个关于Linq的问题,.where(provider).FirstOrDefault();和.FirstOrDefault(provider);的性能比较 关于这个主要有以下三种说法,但这方 ...

  3. JavaScript自学代码--（四）

    //JavaScript Window - 浏览器对象模型 window.document.getElementById("header"); //等价于 document.get ...

  4. hdu 4751

    一道很简单的题,不过在比赛的时候没有写出来: 刚刚看到这个题,我以为是一个图论题,后来发现其实就是一个暴力的题: 用bfs,因为一个人与他不认识的人肯定不会在一个集合,如果判断出现冲突则分配失败,否则 ...

  5. QLGame 2d Engine源码地址

    QLGame 2d Engine源码地址已经提交到github上,地址为:https://github.com/wsgzxl/QLGame2dEngine

  6. Java 声明和访问控制（二） this关键字的访问

    this可以引用本类的静态变量和实例变量,而在静态方法中不能引用实例变量(因为当静态方法加载时,实例变量还没有被定义和初始化) this不可以引用局部变量.例如方法的参数变量,以及在方法中定义的局部变 ...

  7. 解析Android开发优化之:对Bitmap的内存优化详解

    在Android应用里,最耗费内存的就是图片资源.而且在Android系统中,读取位图Bitmap时,分给虚拟机中的图片的堆栈大小只有8M,如果超出了,就会出现OutOfMemory异常.所以,对于图 ...

  8. leetcode面试准备: CountPrimes

    1 题目 Description: Count the number of prime numbers less than a non-negative number, n. 接口:public in ...

  9. [Mac]使用xcode命令行编译protobuf

    因为不想每次测试与画面显示无关的小功能时把cocos2dx包含进去,所以改用xcode的command line tool直接建立c++项目. 方法: 1.点击file-new-project,选择o ...

  10. C#的装箱和拆箱

    1:装箱 其实就是将一个值类型的转换成一个引用类型,或者把值类型转换成一个被该值类型那个应用的接口类型,这个过程会使用堆栈.被装箱的值是作为一个复制赋给对象的. int  intValue = 100 ...