下拉菜单;手风琴;九宫格的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++之类和对象课后习题1

    建立一个对象数组,内放5个学生的(学号,成绩),设立一个函数max,用指向对象的指针作函数参数,在max函数中找出5个学生的最高成绩者,并输出其学号. #include<iostream> ...

  2. java反编译工具jad使用

    参考:http://blog.csdn.net/u014472711/article/details/53713269 http://lijingshou.iteye.com/blog/2005717 ...

  3. spring + rs + RocketMQ 【精】

    cxf-rs-rocketmq 项目地址:见git │ pom.xml │ └─src ├─main │ ├─java │ │ └─cn │ │ └─zno │ │ ├─pojo │ │ │ Rece ...

  4. （最小生成树）Jungle Roads -- HDU --1301

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=1301 http://acm.hust.edu.cn/vjudge/contest/view.action ...

  5. 团队项目第六周——事后诸葛亮分析（GG队）

    一.总结: 本次项目作为我们第一次团队集体开发的项目,使我们在项目开发以及团队合作方面都有了宝贵的 经验以及初步的认识: 从项目开发的方面来看: 通过本次项目,我们更进一步加强了自己的前端知识,并初步 ...

  6. Oracle 监听服务启动不了

    解决方法: 重新生成listener.ora文件   实施步骤 1,打开Net Configuration Assistant 2, 3, 4, 5, 6, 7,

  7. OC 数组以及字符串拼接与分割

    //@""空的字符串对象-------分割 NSString * ptr = @"I am a man"; NSArray * array = [ptr com ...

  8. Cookie操作-----Selenium快速入门（十一）

    什么是cookie?顾名思义,就是饼干,小甜饼.而根据读音则是“曲奇”的意思,相信不少的人都吃过.而在网络上,cookie是指浏览器在本地的一种少量数据的存储方式.例如,我们常见的,登陆的时候有个ch ...

  9. 【C#进阶】拥抱Lambda（一）

    写在开头,好奇从这里开始(当时让加查询条件,结果竟然是一句话来发挥神奇作用): this.TestGrade = CriteriaHelper.NewObject<ITestCase, DtoT ...

  10. Win(Phone)10开发第(5)弹，本地媒体服务器的一些注意事项

    首先有个wp上的http服务器 http://wphttpserver.codeplex.com/ 使用方式: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 ...