下拉菜单;手风琴;九宫格的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. csdn获得积分

    常规方式获取可用分 1.每天只要回复就可以获得10个可用分.注:回复后的第2天发放. 2.每周回复量大于10个帖子,将获得30可用分.注:下一周的周二发放. 3.本周获得技术专家分30分以上,将获得4 ...

  2. Android+PHP开发最佳实践

    本书以一个完整的微博应用项目实例为主线,由浅入深地讲解了Android客户端开发和PHP服务端开发的思路和技巧.从前期的产品设计.架构设计,到客户端和服务器的编码实现,再到性能测试和系统优化,以及最后 ...

  3. Linux C 创建目录函数mkdir相关【转】

    转自:http://blog.csdn.net/fallenink/article/details/8480483 原文地址:http://sharp2wing.iteye.com/blog/1280 ...

  4. Java实现WordCount

    GitHub项目地址:https://github.com/happyOwen/SoftwareEngineering wordcount项目要求: 程序处理用户需求的模式为:wc.exe [para ...

  5. EBS查找当前Form文件

    http://www.cnblogs.com/benio/archive/2011/06/10/2077289.html 我们经常会要在ORACLE EBS中寻找我们正在浏览的form页面的执行文件, ...

  6. [翻译] FastReport 格式化和突出显示

    一:格式化一个值 聚合函数的一个特征是,返回的数值没有格式化,如如下例子所示,它使用"SUM": 数据字段通常返回一个格式化的值,这是一个没有任何变化的"文本" ...

  7. 抱SQL SERVER大腿之我爱用视图(对大数据量的管理)

    我们拥有一个巨大的表,两千多万条记录.也许在行家眼里,两千多万条记录顶多算条毛,不过这条毛也忒粗壮了一点:我们的数据库占用的空间已经达到5G多了.不要以为是日志文件在搞鬼,日志文件可以自动收缩的,最多 ...

  8. golang array, slice, string笔记

    本来想写一篇关于golang io的笔记,但是在学习io之前必须了解array, slice, string概念,因此将在下篇写golang io.   array: 数组的长度是该数组类型的一部分, ...

  9. 浏览器拦截跨域请求处理方法（同源策略不允许读取XXX上的远程资源）

    直接了当了说,解决此类问题,最直接的方法就是,就是给被请求的服务器,添加HTTP头响应头,这里提供两种添加HTTP头的方法: 第一种,就是在程序中添加HTTP头: Response.AddHeader ...

  10. .Net中XML,JSON的几种处理方式

    一.XML: 1.基本了解: xml,Extensible markup language可扩展标记语言,用于数据的传输或保存,特点,格式非常整齐数据清晰明了,并且任何语言都内置了xml分析引擎, 不 ...