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

1.下拉菜单

效果如图:

代码如下:
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>下拉菜单</title>

        <script src="../jquery-1.9.1/jquery-1.9.1/jquery.js"></script>

    <style>

        li{

            width: 80px;

            background-color: deepskyblue;

            list-style: none;

            cursor:pointer;

        }

        ul > li.out {

            display: block;

            list-style: none;

            float: left;

            padding-left: 40px;

        }

        ul > li ul{

            position: relative;

            padding-left: 0px;

        }

        .beijing{

            width: 800px;

            height: 30px;

            background-color: skyblue;

            position: absolute;

            margin-top: -6px;

            z-index: -5;

        }

    </style>

</head>

<body>

<div class="beijing"></div>

<ul class="outUl">

    <li class="out">政策指南

        <ul>

            <li>政策指南1</li>

            <li>政策指南2</li>

            <li>政策指南3</li>

        </ul>

    </li>

    <li class="out">教务园地

        <ul>

            <li>教务园地1</li>

            <li>教务园地2</li>

            <li>教务园地3</li>

        </ul>

    </li>

    <li class="out">走进课堂

        <ul>

            <li>走进课堂1</li>

            <li>走进课堂2</li>

            <li>走进课堂3</li>

        </ul>

    </li>

</ul>

<script>

$(function () {

   var  $li = $("ul > li ul");

    $li.hide();

    $(".outUl>li.out").mouseenter(function () {

        $(this).children().show(500);

    });

    $(".outUl>li.out").mouseleave(function () {

        $li.hide(200);

    });

})

</script>

</body>

</html>

2.手风琴

效果如图:

代码如下:
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="../jquery-1.9.1/jquery-1.9.1/jquery.js"></script>

    <style>

        .container{

            width: 200px;

            height: 500px;

            border: 1px solid black;

        }

        .out{

            background-color: #00CCFF;

            cursor: pointer;

            /*cursor: help;*/

        }

        .inner{

            height: 120px;

        }

    </style>

</head>

<body>

<div class="container">

    <div>

        <div class="out">

            下拉列表1

        </div>

        <div class="inner">

            下拉列表的内容

        </div>

    </div>

    <div>

        <div class="out">

            下拉列表2

        </div>

        <div class="inner">

            下拉列表的内容

        </div>

    </div>

    <div>

        <div class="out">

            下拉列表3

        </div>

        <div class="inner">

            下拉列表的内容

        </div>

    </div>

    <div>

        <div class="out">

            下拉列表4

        </div>

        <div class="inner">

            下拉列表的内容

        </div>

    </div>

</div>

<script>

    $(function () {

        $(".container div.inner").hide();

        $(".container div.out").click(function () {

            console.log($(this).next(".inner").siblings().next(".inner"));

            $(this).next(".inner").toggle(200).parent().siblings().children(".inner").slideUp(200);

        });

    })

</script>

</body>

</html>

3.九宫格

效果如图:

代码如下:
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="../jquery-1.9.1/jquery-1.9.1/jquery.js"></script>

    <style>

        * {

            background-color: black;

        }

        .container {

            width: 500px;

            border: 1px solid white;

            margin: auto;

            overflow: hidden;

        }

        .container div {

            width: 135px;

            height: 165px;

            display: block;

            margin: 10px 10px;

            float: left;

        }

        .red{

            background-color: red;

        }

        .green{

            background-color: green;

        }

        .blue{

            background-color: blue;

        }

    </style>

</head>

<body>

<div class="container">

    <div  class="red"></div>

    <div  class="blue"></div>

    <div  class="green"></div>

    <div  class="red"></div>

    <div  class="blue"></div>

    <div  class="green"></div>

    <div  class="red"></div>

    <div  class="blue"></div>

    <div class="green"></div>

</div>

<script>

$(function () {

    $(".container>div").mouseenter(function () {

        $(this).css("opacity",1).siblings().css("opacity",0.4);

    });

    $(".container").mouseleave(function () {

        $(".container div").css("opacity",1);

    })

})

</script>

</body>

</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. C++标准模板库（STL）和容器

    1.什么是标准模板库(STL)? (1)C++标准模板库与C++标准库的关系 C++标准模板库其实属于C++标准库的一部分,C++标准模板库主要是定义了标准模板的定义与声明,而这些模板主要都是 类模板 ...

  2. hdu 2063 匈牙利算法

    http://acm.hdu.edu.cn/showproblem.php?pid=2063 男女配对最大数 匈牙利算法模板 #include <cstdio> #include < ...

  3. Eclipse代码提示功能设置

    1.        解决实例化时自动补全不必要的单词问题 2.        以MyEclipse 6.5重新配图 鉴 于网上的批评之声甚大,我只想说明我的想法:这样的增强代码提示,最终是用来辅助我们 ...

  4. Java类与类之间的继承关系

    Java父类与子类继承关系,调用的各种关系 示例一(子类调用父类函数): // 定义一类 A public class A { // 此方法打印一句话 public void a() { System ...

  5. C++ 补遗

    C++通过引用传递数组 数组形参可以声明为数组的引用.如果形参是数组的引用,编译器不会将数组实参转化为指针,而是传递数组的引用本身. 在这种情况下,数组大小成为形参和实参类型的一部分(实参长度与形参长 ...

  6. [ACM_模拟] HDU 1006 Tick and Tick [时钟间隔角度问题]

    Problem Description The three hands of the clock are rotating every second and meeting each other ma ...

  7. C#内存释放(垃圾回收)

    今天写了个很小的程序,程序的功能仅仅是截图,但是如果长时间开启并截图的时候,程序会变的很大,从刚开始的运行在任务管理器中只有十几K大小,运行一段时间后在任务管理器中看到程序可以达到1G或2G甚至更大: ...

  8. Asp.Net Web Api中使用Swagger

    关于swagger 设计是API开发的基础.Swagger使API设计变得轻而易举,为开发人员.架构师和产品所有者提供了易于使用的工具. 官方网址:https://swagger.io/solutio ...

  9. Python 爬虫实战—盘搜搜

    近期公司给了个任务:根据关键搜索百度网盘共享文件并下载. 琢磨了几天写下了一段简单的demo代码,后期优化没有处理. 主要的思路:(1)根据关键字爬取盘搜搜的相关信息 (2)解析并获取盘搜搜跳转到百度 ...

  10. EF简易教程，从建表到表间关系

    唐大兵博客 唐大兵的博客里记录了EF Code First从建表到表之间关系的详细内容. 汪杰的博客(EF里一对一.一对多.多对多关系的配置和级联删除) 汪杰的博客更简洁,但不够充实,读懂了唐大兵博客 ...