下拉菜单;手风琴;九宫格的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. 解决sea_born和matplotlib画图中文显示的问题

    #以下解决mtpl中文显示问题 from pylab import * mpl.rcParams['font.sans-serif'] = ['SimHei'] #以下解决seaborn中文编码报错问 ...

  2. addEvent兼容版

    function addEvent(elem,type,handle){ if (elem.addEventlistener) { elem.addEventlistener(type,handle, ...

  3. 【科普】Web（瓦片）地图的工作原理

    [译者按:在看MapBox Guides文档时,看到这篇 How do web maps work?,这篇文档通俗易懂地阐述了Web地图是如何工作的,其实更偏向讲瓦片地图的工作原理,鉴于之前很多人不了 ...

  4. （二分匹配“匈牙利算法”）无题II --HDU --2236

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=2236 代码: #include<cstdio> #include<cstring> ...

  5. （能被11整除的数的特征）The shortest problem --hdu

    链接: http://acm.hdu.edu.cn/contests/contest_showproblem.php?pid=1005&cid=595 若一个整数的个位数字截去,再从余下的数中 ...

  6. linux环境下（非UI操作）所有软件的安装与卸载总结

    UI界面的软件管理 linux下的软件一般都是经过压缩的,主要的格式有这几种:rpm.tar.tar.gz.tgz等.所以首先拿到软件后第一件事就是解压缩. 在xwindow下以rpm格式的软件安装比 ...

  7. hdu 5003 模拟水题

    http://acm.hdu.edu.cn/showproblem.php?pid=5003 记得排序后输出 #include <cstdio> #include <cstring& ...

  8. 老刘 Yii2 源码学习笔记之 Module 类

    关系类图 从上图可以看出 Application 类继承了 Module,在框架中的是非常重要角色. 加载配置 public function setModules($modules) { forea ...

  9. 使用工厂方法配置bean的两种方式

    1.使用静态工厂方法: 对应的配置.xml文件: 2.通过实例工厂的方法来配置bean: 对应的xml文件:

  10. Nonsense Alphabet

    Nonsense Alphabet A was an ant Who seldom stood still, And who made a nice house In the side of a hi ...