<!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. 关于SqlParameter设定size和value

    1.设定size 字段定义:column [Text] nvarchar(max) NULL 设定字段最大长度: new SqlParameter("@Text",SqlDbTyp ...

  2. leetcode56. Merge Intervals

    题目要求: Given a collection of intervals, merge all overlapping intervals. For example,Given [1,3],[2,6 ...

  3. java实现求数组中元素第二大的元素

    /** * 找出数组中数第二大的值 * @param array * @date 2016-9-25 * @author shaobn */ public static void getMethod_ ...

  4. 最近在学习bootstrap的时候用bootstrap的视频教程2.0的引用bootstrap3.0突然发现很多不同，总结了一下

    bootstrap 2.3版与3.0版重要类的改变对比 Bootstrap 2.x Bootstrap 3.0 .container-fluid .container .row-fluid .row ...

  5. springmvc 组合注解

    组合注解的意思就是一个注解中包含多个注解.在springmvc 的@RestController中,你就可发现. @Target(ElementType.TYPE) @Retention(Retent ...

  6. android录像增加时间记录（源码里修改）

    需要做一个功能,录像和播放时都显示录时的时间,参考文章链接找不到了,不好意思,这里记录一下,防止下次找不到了.另一篇关于源码录像的流程请参考 http://www.verydemo.com/demo_ ...

  7. springmvc web-info目录下无法引入的js文件无效

    今天在联系spring的时候而然遇到了个不起眼的问题.那就是在html或者说jsp页面中引用js文件的时候总是提示找不到路径.eclipse更是抛出 No mapping to aa.js. 我就奇怪 ...

  8. Python Locust性能测试框架实践

    [本文出自天外归云的博客园] Locust的介绍 Locust是一个python的性能测试工具,你可以通过写python脚本的方式来对web接口进行负载测试. Locust的安装 首先你要安装pyth ...

  9. python importlib

    api 文档 importlib.import_module(name, package=None) Import a module. The name argument specifies what ...

  10. 从零开始学iPhone开发（3）——视图及控制器的使用

    上一节我们分别使用IB和代码建立了两个视图并且熟悉了一些控件.这一节我们需要了解视图和视图的切换. 在iOS编程中,框架提供了很多视图,比如UIView,UIImageView, UIWebView等 ...