很简单的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. copy,retain,assign,strong,weak的区别

    引用地址:http://www.aichengxu.com/view/32930 一.assign,copy,retain 1.copy是内容复制,新建一个相同内容的不同指针,retain为指针复制, ...

  2. 使用ajax传递及接收数据

    前端代码: <input id="txtNum1" name="txtNum1" type="text" width="13 ...

  3. C# ADO.NET操作数据库 SqlHelp.cs类

    刚开始练习ADONET的时候,练习的一个SQLHelp.cs  数据库操作类,很简单,但是也很实用 using System; using System.Collections.Generic; us ...

  4. 从头搭建Spring MVC

    1.拷贝jar文件 2.填充Web.xml 在/WEB-INF/web.xml中写入如下内容: <?xml version="1.0" encoding="UTF- ...

  5. 递归-快速排序quickSort

    现在对“6  1  2 7  9  3  4  5 10  8”这个10个数进行排序.首先在这个序列中随便找一个数作为基准数.为了方便,就让第一个数6作为基准数吧.接下来,需要将这个序列中所有比基准数 ...

  6. Codeforces Round #198 (Div. 2) —— C

    C题很容易看懂题目,不过两个循环肯定会TLE,所以得用点小聪明: 首先排好序,因为是全排列,乱序和顺序的结果是一样的: 然后呢···· 如果是数列 1 2 3 4 5 元素1 被 2 3 4 5每个减 ...

  7. Spring 通过工厂方法(Factory Method)来配置bean

    Spring 通过工厂方法(Factory Method)来配置bean 在Spring的世界中, 我们通常会利用bean config file 或者 annotation注解方式来配置bean. ...

  8. AsyncHttpClient 开源框架學習研究

    转载请注明出处:http://blog.csdn.net/krislight OverView: AsyncHttpClient庫 基於Apache的HttpClient框架,是一個異步的httpCl ...

  9. 带圆角的EditText

    转载请注明出处:http://blog.csdn.net/krislight/article 1.定义一个Drawable <?xml version="1.0" encod ...

  10. [cocos2dx动作]CCLabel类数字变化动作

    cococs2dx的CCLabel类的数字变化动作 介绍: 简单的数字变化动作(适用于CCLabel类对象, 包括CCLabelTTF, CCLabelAtlas, CCLabelBMFont等等) ...