<!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. AngularJS Best Practices: ngRoute

    app/----- components/---------- users/--------------- controllers/-------------------- users.control ...

  2. RDIFramework.NET ━ 9.16 案例模块━ Web部分

    RDIFramework.NET ━ .NET快速信息化系统开发框架 9.15  案例模块 -Web部分 9.16.1.产品管理模块 产品管理模块提供了基本的增.删.改.查.导出.分页等的实现,用户可 ...

  3. MySql 首记

    1.连接数据: 格式是:  -P 端口号  -h  mysql主机名\ip -u root (用户)  -p 2.显示数据库: show databases; 3.选择数据库: use databas ...

  4. AMQP

    AMQP,即Advanced Message Queuing Protocol,一个提供统一消息服务的应用层标准高级消息队列协议,是应用层协议的一个开放标准,为面向消息的中间件设计.基于此协议的客户端 ...

  5. Ant执行Jmeter工程模版

    <?xml version="1.0" encoding="GB2312"?><project name="ant-jmeter-t ...

  6. Android布局

    android:gravity="center" android:orientation="vertical" android:orientation=&quo ...

  7. 各大Oj平台介绍 刷题平台

    https://leetcode.com/ http://www.cnblogs.com/lzmfywz/archive/2012/02/07/2342010.html 1.题库与网站资源题库-在线提 ...

  8. html5，表单

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

  9. 递归函数 Python

    函数: def fact(n): if n==1: return 1 return n * fact(n-1) 递归过程: print(fact(5)) >>fact(5) >> ...

  10. iOS性能优化：Instruments

    检测内存泄露:Instruments中的Leaks 前言 如果要检测内存泄露,我们会使用Xcode7自带的Instruments中的Leaks工具来检测. 现在的开发环境是ARC,所以很少会出现内存泄 ...