下拉菜单;手风琴;九宫格的Jquery的使用实例

1.下拉菜单

效果如图:

代码如下:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>下拉菜单</title>
  6.         <script src="../jquery-1.9.1/jquery-1.9.1/jquery.js"></script>
  7.     <style>
  8.         li{
  9.             width: 80px;
  10.             background-color: deepskyblue;
  11.             list-style: none;
  12.             cursor:pointer;
  13.         }
  14.         ul > li.out {
  15.             display: block;
  16.             list-style: none;
  17.             float: left;
  18.             padding-left: 40px;
  19.         }
  21.         ul > li ul{
  22.             position: relative;
  23.             padding-left: 0px;
  24.         }
  25.         .beijing{
  26.             width: 800px;
  27.             height: 30px;
  28.             background-color: skyblue;
  29.             position: absolute;
  30.             margin-top: -6px;
  31.             z-index: -5;
  32.         }
  34.     </style>
  35. </head>
  36. <body>
  37. <div class="beijing"></div>
  39. <ul class="outUl">
  40.     <li class="out">政策指南
  41.         <ul>
  42.             <li>政策指南1</li>
  43.             <li>政策指南2</li>
  44.             <li>政策指南3</li>
  45.         </ul>
  46.     </li>
  47.     <li class="out">教务园地
  48.         <ul>
  49.             <li>教务园地1</li>
  50.             <li>教务园地2</li>
  51.             <li>教务园地3</li>
  52.         </ul>
  53.     </li>
  54.     <li class="out">走进课堂
  55.         <ul>
  56.             <li>走进课堂1</li>
  57.             <li>走进课堂2</li>
  58.             <li>走进课堂3</li>
  59.         </ul>
  60.     </li>
  61. </ul>
  63. <script>
  65. $(function () {
  66.    var  $li = $("ul > li ul");
  67.     $li.hide();
  68.     $(".outUl>li.out").mouseenter(function () {
  69.         $(this).children().show(500);
  70.     });
  72.     $(".outUl>li.out").mouseleave(function () {
  73.         $li.hide(200);
  74.     });
  75. })
  77. </script>
  79. </body>
  80. </html>

2.手风琴

效果如图:

代码如下:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="../jquery-1.9.1/jquery-1.9.1/jquery.js"></script>
  8.     <style>
  9.         .container{
  11.             width: 200px;
  12.             height: 500px;
  13.             border: 1px solid black;
  15.         }
  16.         .out{
  17.             background-color: #00CCFF;
  18.             cursor: pointer;
  19.             /*cursor: help;*/
  20.         }
  21.         .inner{
  22.             height: 120px;
  23.         }
  25.     </style>
  27. </head>
  28. <body>
  29. <div class="container">
  31.     <div>
  32.         <div class="out">
  33.             下拉列表1
  34.         </div>
  35.         <div class="inner">
  36.             下拉列表的内容
  37.         </div>
  38.     </div>
  39.     <div>
  40.         <div class="out">
  41.             下拉列表2
  42.         </div>
  43.         <div class="inner">
  44.             下拉列表的内容
  45.         </div>
  46.     </div>
  47.     <div>
  48.         <div class="out">
  49.             下拉列表3
  50.         </div>
  51.         <div class="inner">
  52.             下拉列表的内容
  53.         </div>
  54.     </div>
  55.     <div>
  56.         <div class="out">
  57.             下拉列表4
  58.         </div>
  59.         <div class="inner">
  60.             下拉列表的内容
  61.         </div>
  62.     </div>
  63. </div>
  65. <script>
  66.     $(function () {
  67.         $(".container div.inner").hide();
  68.         $(".container div.out").click(function () {
  69.             console.log($(this).next(".inner").siblings().next(".inner"));
  70.             $(this).next(".inner").toggle(200).parent().siblings().children(".inner").slideUp(200);
  71.         });
  72.     })
  73. </script>
  75. </body>
  76. </html>

3.九宫格

效果如图:

代码如下:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="../jquery-1.9.1/jquery-1.9.1/jquery.js"></script>
  7.     <style>
  9.         * {
  10.             background-color: black;
  11.         }
  13.         .container {
  14.             width: 500px;
  15.             border: 1px solid white;
  16.             margin: auto;
  17.             overflow: hidden;
  19.         }
  21.         .container div {
  23.             width: 135px;
  24.             height: 165px;
  25.             display: block;
  26.             margin: 10px 10px;
  27.             float: left;
  29.         }
  31.         .red{
  32.             background-color: red;
  33.         }
  34.         .green{
  35.             background-color: green;
  37.         }
  39.         .blue{
  40.             background-color: blue;
  42.         }
  44.     </style>
  46. </head>
  47. <body>
  48. <div class="container">
  50.     <div  class="red"></div>
  51.     <div  class="blue"></div>
  52.     <div  class="green"></div>
  54.     <div  class="red"></div>
  55.     <div  class="blue"></div>
  56.     <div  class="green"></div>
  58.     <div  class="red"></div>
  59.     <div  class="blue"></div>
  60.     <div class="green"></div>
  62. </div>
  64. <script>
  65. $(function () {
  67.     $(".container>div").mouseenter(function () {
  68.         $(this).css("opacity",1).siblings().css("opacity",0.4);
  69.     });
  71.     $(".container").mouseleave(function () {
  72.         $(".container div").css("opacity",1);
  73.     })
  74. })
  75. </script>
  76. </body>
  77. </html>

下拉菜单;手风琴;九宫格的Jquery的使用实例的更多相关文章

  1. 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件

    Bootstrap是当下流行的前端UI组件库之一.利用Bootstrap,可以很方便的构造美观.统一的页面.把设计师从具体的UI编码中解放出来.   Bootstrap提供了不少的前端UI组件.带下拉 ...

  2. 下拉菜单制作——利用CSS实现的一个实例

    本文实现了一个经典的下拉菜单的制作. 首先,写出Html部分: <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  3. jQuery手写几个常见的滑动下拉菜单 分分秒秒学习JS

    一般的企业网站再我们再实际工作中,有些特效,用jQuery来做,显得极其简单,除非一些大的公司,需要封装自己的类. 今天,我们讲解jQuery入门知识,来写几个简单jQuery滑动下拉菜单.感受一下j ...

  4. Bootstrap下拉菜单的使用(附源码文件)--Bootstrap

    1.Bootstrap下拉菜单的使用,源代码如下:(如有不当之处,还望大佬们指出哈……) <!DOCTYPE html> <html lang="en"> ...

  5. jQuery实现多级手风琴树形下拉菜单（源码）

    前几天因为公司的菜单要调整,公司的UI框架是不支持的,所以就自己在网上找了一个下拉菜单,可以支持多级菜单数据的,菜单数据是从xml文件中配置后读取的,网上有许多这方面的例子感觉不是很好用,就打了个包贴 ...

  6. jquery下拉菜单

    下拉菜单或者导航是我们在网站开发中不可或缺的网站元素之一,使用jQuery可以制作出简洁易用.美观大方的下拉菜单或者导航效果. 下面展示的12款利用jQuery实现的下拉菜单即导航效果整理自前端大牛爱 ...

  7. 可控制导航下拉方向的jQuery下拉菜单代码

    效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...

  8. jquery实现多级下拉菜单

    支持多种浏览器,体验效果:http://keleyi.com/keleyi/phtml/jqmenu/4.htm 多级菜单,理论上支持无限多的层级,文件结构非常简单的,以下是完整代码: <!DO ...

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

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

随机推荐

  1. 使用idea,springboot，springsession，redis实现分布式微服务的session 共享

    本次开发环境:idea2016.3.4 +jdk1.8+maven3.3.9+redis+springboot+jedis 本文中的项目使用Maven来管理项目依赖,使用Spring Session和 ...

  2. day03(接口，多态)

    接口:            概念:是功能的集合,可以当做引用数据类型的一种.比抽象类更加抽象. 接口的成员:               成员变量:必须使用final修饰 默认被 public &a ...

  3. Linux 系统中进程5中常见状态

    运行.中断.不可终端.僵死.停止 R(运行):正在运行 or 在运行队列中等待: S(中断):处于休眠中,等待接收信号,并脱离改状态: D(不可中断):不响应信号输入,即使kill也不起作用: Z(僵 ...

  4. （最小生成树）Agri-Net -- POJ -- 1258

    链接: http://poj.org/problem?id=1258 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82831#probl ...

  5. HDU2553 N皇后问题 2016-07-24 13:56 283人阅读 评论(0) 收藏

    N皇后问题 Problem Description 在N*N的方格棋盘放置了N个皇后,使得它们不相互攻击(即任意2个皇后不允许处在同一排,同一列,也不允许处在与棋盘边框成45角的斜线上. 你的任务是, ...

  6. CxGrid导出Excel时清除颜色的设置

    CxGrid导出Excel时清除颜色的设置 (2011-04-25 16:33:23) 转载▼ 标签: it 分类: Delphi http://www.radxe.com/?p=170 cxgrid ...

  7. Android-自定义ListView下拉刷新与上拉加载

    效果图: 第一步:编写需要在ListView中增加头加载的布局文件,与底部加载的布局文件: 头布局文件: <?xml version="1.0" encoding=" ...

  8. 【Win10】一些零碎不好归档的小总结（原谅我这个该死的标题吧）

    一.同步方式获取设备的屏幕分辨率 public static class ScreenResolution { /// <summary> /// 获取屏幕高度. /// </sum ...

  9. redis 任务队列

    使用Redis实现任务队列 说到队列很自然就能想到Redis的列表类型,3.4.2节介绍了使用LPUSH和RPOP命令实现队列的概念.如果要实现任务队列,只需要让生产者将任务使用LPUSH命令加入到某 ...

  10. 使用sos查看.NET对象内存布局

    前面我们图解了.NET里各种对象的内存布局,我们再来从调试器和clr源码的角度来看一下对象的内存布局.我写了一个测试程序来加深对.net对象内存布局的了解: using System; using S ...