<!DOCTYPE html>
<html>
   <head>
      <title>jQuery水平下拉菜单实现</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" charset="UTF-8" >
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <script src="bootstrap/js/jquery-1.11.1.min.js"></script>
      <!--[if lt IE 9]>
         <script src="bootstrap/js/html5shiv.js"></script>
         <script src="bootstrap/js/respond.min.js"></script>
      <![endif]-->
      <style type="text/css">
.menus{border:1px solid red; float:left; margin-left:4px; background:red;}
.menus a{display:block; width:100px; text-align:center;}
.menu{display:none;}
a{cursor:pointer;text-decoration:none;}
a:hover{background:white; text-decoration:none;}
a:visited{text-decoration:none; color:black;}
 </style>
      <script>
      $(function(){
$(".menu-title").click(function(){
$(this).next().toggleClass();
});
        });
      </script>
   </head>
   <body> 
      <div class="menus">
      <a class="menu-title">菜单项</a>
      <div class="menu">
      <a href="#" class="menu-item">菜单列表</a>
      <a href="#" class="menu-item">菜单列表</a>
      <a href="#" class="menu-item">菜单列表</a>
      <a href="#" class="menu-item">菜单列表</a>
      </div>
      </div> 
      <div class="menus">
      <a class="menu-title">菜单项</a>
      <div class="menu">
      <a href="#" class="menu-item">菜单列表</a>
      <a href="#" class="menu-item">菜单列表</a>
      <a href="#" class="menu-item">菜单列表</a>
      <a href="#" class="menu-item">菜单列表</a>
      </div>
      </div> 
      <div class="menus">
      <a class="menu-title">菜单项</a>
      <div class="menu">
      <a href="#" class="menu-item">菜单列表</a>
      <a href="#" class="menu-item">菜单列表</a>
      <a href="#" class="menu-item">菜单列表</a>
      <a href="#" class="menu-item">菜单列表</a>
      </div>
      </div> 
      <div class="menus">
      <a class="menu-title">菜单项</a>
      <div class="menu">
      <a href="#" class="menu-item">菜单列表</a>
      <a href="#" class="menu-item">菜单列表</a>
      <a href="#" class="menu-item">菜单列表</a>
      <a href="#" class="menu-item">菜单列表</a>
      </div>
      </div>
   </body>
</html>

jQuery水平下拉菜单实现的更多相关文章

  1. jquery 实现下拉菜单

    Jquery 是一个轻量的框架,个人认为非常好用,今天就写一个非常简单的例子,实现下拉菜单功能: 首先肯定要在页面引用jquery.js  版本不限 : 接下来把=================== ...

  2. 第72天：jQuery实现下拉菜单

    jQuery实现下拉菜单 一.居中 1.块元素居中:给块元素本身设置:margin:0 auto;,块元素必须设置宽度 2.行内块元素居中:给元素父级设置text-algin:center; < ...

  3. jquery带下拉菜单和焦点图

    jQuery,下拉菜单,二级菜单,索引按钮,焦点图代码,jquery带下拉菜单和焦点图是一款顶部通栏带二级下拉菜单和banner导航菜单代码. JQuery特效代码来源:http://www.huiy ...

  4. jQuery美化下拉菜单插件dropkick

    dropkick是一款基于jquery库的美化下拉框下拉菜单的插件,它通过定制HTML插入可使丑陋无聊的<select>下拉列表变得美丽. name属性是唯一一个必需的填写的,不过你也应该 ...

  5. JQuery纵向下拉菜单实现心得

    jquery库给我们带来了许多便利,不愧是轻量级的DOM框架,在前面的博文中小编分别对jquery的基础知识以及jquery的一些小demo有一系列的简单介绍,期待各位小伙伴的指导.使用jquery实 ...

  6. jQuery EasyUI 下拉菜单获取日期，最高年份为当前年份，最低年份为当前年份向前推10年

    http://blog.csdn.net/wangjingjing1014/article/details/16885341 <head><meta http-equiv=" ...

  7. 实例：用jQuery实现垂直和水平下拉 菜单

    主要是利用jQuery来实现垂直菜单和水平菜单.实现效果如图: 第一步,创建一个HTML文件,如图,包含两个ul.当然把jquery库也引入进去了. <!DOCTYPE html> < ...

  8. jquery设置下拉菜单

    jQuery代码 1,引用jQuery库 2,show方法 3,hide方法 <script type="text/javascript"> $function(){ ...

  9. jquery多级下拉菜单

    var menu = new Click('#menu',{target:'p',parent:'li',contr:'ul',way:0}); /* 参数说明: target : 点击事件发生在该元 ...

随机推荐

  1. request.GetResponse　400错误处理方法

    问题描述:在使用request.GetResponse时,如果是400错误,将抛出异常信息,而获取不到返回内容,所以返回的内容只能在catch上面获取,转载于 http://blog.csdn.net ...

  2. linux下用户账户切换

    1,)当前我已经登录一个用户hadoop,我怎么切换到root账户呢(应为一般用户经常会遇到无权限修改/etc/hosts./ect/hostname等文件的权限)? 使用命令sudo su root ...

  3. cat *.txt | grep '>' | wc -l

    find the line where the '>' located, and make a statistic.

  4. struts2-通配符映射（基本没啥卵用）和动态调用

    通配符 使用*代表任意字符 一般在action的name中使用*,并可以使用多个 可以使用{通配符的序号}引用对应的通配符所代表的值,序号从1开始 {0}代表整个URI 匹配规则 首先完全匹配,没有完 ...

  5. ubuntu 15.04 联网提示:wifi已通过硬件开关禁用

    执行以下命令: echo "options asus_nb_wmi wapf=4"| sudo tee /etc/modprobe.d/asus_nb_wmi.conf 重启

  6. 在RedHat/CentOS下安装Docker（不升级内核）

    由于内核版本问题,最初仅Ubuntu可以较好的支持Docker.不过,由于RedHat系列OS(REHL.CentOS)是目前主流的Linux服务器操作系统,所以令RedHat系列OS支持Docker ...

  7. 夺命雷公狗-----React---6--props多属性的传递

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 【转】PowerShell入门（二）：PowerShell是Cmd命令行的加强版吗？

    转至:http://www.cnblogs.com/ceachy/archive/2013/01/31/PowerShell_vs_Cmd.html PowerShell是命令行的加强版吗?Power ...

  9. MVC过滤器使用案例：统一处理异常顺道精简代码

    重构的乐趣在于精简代码,模块化设计,解耦功能……而对异常处理的重构则刚好满足上述三个方面,下面是我的一点小心得. 一.相关的学习 在文章<精简自己20%的代码>中,讨论了异常的统一处理,并 ...

  10. Dynamics AX 2012 R2 客制化RDP报表参数对话框

    当我们在使用RDP报表时,AX会根据Data Contract,自动生成报表参数对话框上的字段控件.一般情况下,该对话框能够满足我们的需求,但是如果有较为复杂或特殊的需求,就要我们对该对话框进行客制化 ...