很简单的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. odoo 清除所有运行数据

    测试odoo,如果需要一个干净的db.经常需要清除掉所有业务数据.做如下操作,较为方便 1:建立一个服务器动作,动作的python代码入下. 然后新建一个菜单,菜单动作关联到 这个动作.需要清空db, ...

  2. HTML5:一个拖拽网页元素的例子

    关键字:HTML5, Drag&Drop, JavaScript, CSS 运行环境:Chrome <!DOCTYPE html> <html> <head> ...

  3. WPF DataGrid 自动生成行号的方法（通过修改RowHeaderTemplate的方式）

    WPF中的DataGrid自动生成行号的方法有很多,这里记录了一种通过修改 RowHeaderTemplate的方式来生成行号: 方法一: xaml界面: <Window ... xmlns:l ...

  4. 【技巧】DataGridView,ListView重新绑定时保持上次滚动位置

    (1)DataGridView 今天在项目时遇到一个问题,将DataTable绑定到DataGridView,其中一列为CheckBox列,当我修改该列值时,触发CellValueChanged事件. ...

  5. vs2010 未能正确加载方案中的一个或多个项目

    Visual studio在打开解决方案时,往往会碰到一个这样的错误,提示说:未能正确加载方案中的一个或多个项目: 我们可以通过以下步骤来解决该问题:首先,在相应的sln类型文件上点击右键,选择用记事 ...

  6. iBatis入手案例

    第一部分,iBatis组织架构分析 1.1 组织架构图 1.2 架构分析 DAO层上面,DAO类通过SqlMapConfig文件,来构建iBatis提供的SqlMapClient,SqlMapConf ...

  7. nump中的为随机数产生器的seed

    在python的程序中,发现了如下的伪随机数产生的代码 rng = numpy.random.RandomState(23355) arrayA = rng.uniform(0,1,(2,3)) 该段 ...

  8. BZOJ 1003: [ZJOI2006]物流运输trans DP+最短路

    Description 物流公司要把一批货物从码头A运到码头B.由于货物量比较大,需要n天才能运完.货物运输过程中一般要转停好几个码头.物流公司通常会设计一条固定的运输路线,以便对整个运输过程实施严格 ...

  9. 如何通过REST获取JENKINS的编译进度？

    第二版功能需要实现, 我看了一下,获取百分比进度不太可能了,,因为JENKINS本身都没有具体的百分比进度.. 那,,只好实现获取实时值,如果完成就显示完成. URL: http://1.2.3.4/ ...

  10. 李洪强漫谈iOS开发[C语言-025]-赋值运算符案例