很简单的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. javascript进阶——面向对象特性

    面向对象的javascript是这门语言被设计出来时就考虑的问题,熟悉OOP编程的概念后,学习不同的语言都会发现不同语言的实现是不同的,javascript的面向对象特性与其他具有面向对象特性的语言的 ...

  2. win8 开启wifi

    1,以管理员身份运行命令提示符,输入命令 netsh wlan set hostednetwork mode=allow ssid=networkname key=password后回车 其中ssid ...

  3. nRF52系列——nRF52832来袭

    nRF52系列——nRF52832来袭 Nordic凭借着在无线技术的数十年深耕,推出第一个μBlue芯片-- nRF8001.其低功耗等特性在当时吸引了无数厂商的目光,并将这产品应用到多个领域,再之 ...

  4. mysql-5.5.25-winx64在win7 x64 免安装配置

    os:win7 x64 mysql:mysql-5.5.25-winx64 将mysql-5.5.25-winx64.zip 解压缩到F:\mysql-5.5.25-winx64 目录下: 1.将my ...

  5. LED汽车前大灯

    一.LED汽车前大灯遇到问题.分析和解决 问题1: 当电源电压增大时,LED等闪烁,而且电源电压增大的越多闪烁的频率越低. 原因分析: 电源电压从12V升高到24V过程中,开关MOS管的Vds增大,Q ...

  6. 启动Tomcat出现Using CATALINA_BASE

    有一次命令行启动Tomcat的时候,出现: Using CATALINA_BASE: "D:\apache-tomcat-6.0.35"Using CATALINA_HOME: & ...

  7. Android Camera 预览图像被拉伸变形的解决方法【转】

    问题描述: 预览图像被拉伸变形 问题原因: 由于预览图像大小跟SurfaceView 大小不一致引起 解决方法: 获取系统支持的所有预览尺寸[getSupportedPictureSizes],然后再 ...

  8. 教你如何监控 Apache？

    什么是 Apache? Apache 是一款 HTTP 服务器软件,现在更名为 "http",而 Apache 则成了一个(包含httpd的项目)巨大的基金组织,根据习惯后文都用 ...

  9. 浅谈 Android 开发文化

    Hello,亲爱的读者朋友们(希望你们是 Android 开发者,或者正在成为 Androider 的路上-)! 质量从用户反馈很清凉然后我们就只能看 CPU 原来的想法是但是事实上不是这些但是我们可 ...

  10. 【网络流24题】No.1 搭配飞行员(飞行员配对方案问题)

    [问题描述]     飞行大队有若干个来自各地的驾驶员,专门驾驶一种型号的飞机,这种飞机每架有两个驾驶员,需一个正驾驶员和一个副驾驶员.由于种种原因,例如相互配合的问题,有些驾驶员不能在同一架飞机上飞 ...