<!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. ActiveMQ的使用笔记（基本实现原理）

    具体原理不进行深入,会用就好. 第一:当然是先安装ActiveMQ,选择操作系统位数,安装成功以后,输入网址http://ip:8161/admin/,会出现相关页面,账号密码都是admin.在这个页 ...

  3. CSS 颜色代码大全//////////////////////z

      FFFFFF #DDDDDD #AAAAAA #888888 #666666 #444444 # #FFB7DD #FF88C2 #FF44AA  #FF0088  #C10066  #A2005 ...

  4. jquery-mobile的页面跳转和iscroll之间的兼容解决方法

    有一项目需要用到滚动效果,最后选择了iscroll插件,代码写好后chrome测试一切正常(直接查看用到滚动效果的页面以下统称当前页面),运行APP应用一步步跳转到当前页面的时候,滚动效果和滚动条等死 ...

  5. 复制 replication 新增表 add new article

    immediate_sync   false   Synchronization files are created only if there are new subscriptions. Subs ...

  6. JVM监控与调优

    目录 参数设置收集器搭配启动内存分配监控工具和方法调优方法调优实例     转:http://www.cnblogs.com/zhguang/p/java-jvm-gc.html光说不练假把式,学习J ...

  7. openlayers 学习笔记之1

    1. 为Web Gis客户端开发的javascript 框架 百度文库中的教程:入门经典> 1) 初始化map: map = new OpenLayers.Map(mapContainerNam ...

  8. ArcGIS Javascript地图上添加json数据格式的点

    /** * 显示地图点. * json的格式[{"name":"name1","x":"x1","y" ...

  9. 使用GIt向github上传代码

    github是一个基于git的代码托管平台,付费用户可以建私人仓库,我们一般的免费用户只能使用公共仓库,也就是代码要公开.这对于一般人来说公共仓库就已经足够了. 1.注册账户以及创建仓库     要想 ...

  10. 阻抗计算公式、polar si9000(教程)

    给初学者的一直有很多人问我阻抗怎么计算的. 人家问多了,我想给大家整理个材料,于己于人都是个方便.如果大家还有什么问题或者文档有什么错误,欢迎讨论与指教!在计算阻抗之前,我想很有必要理解这儿阻抗的意义 ...