下拉菜单;手风琴;九宫格的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. SessionCacheTest03.testLoad Unrooted Tests initializationError

    这个错误主要是没有加载@Test这个标签,就是把其转化为一个juit测试的类.增加之后就没有问题了,当然还有很多人说是自己的Juit的版本问题,那就改下版本,还有说是没有加载两个类包,为了完整我就把包 ...

  2. Cache Algorithms

    1. 平均内存引用时间 T = average memory reference time m = miss ratio = 1 - (hit ratio) Tm = time to make a m ...

  3. Tomcat 环境变量配置

    1.变量和常量 i 和 0 2.环境变量 cmd >set 查看所有环境变量 %PATH% 系统指定可执行文件的搜索路径,可以是 .exe .bat String path=“C:\WINDOW ...

  4. A River Runs Through It

           Our birth is but a sleep and a forgetting:   The Soul that rises with us, our life's Star,    ...

  5. Android Studio注释摸版配置

    随意创建一个类,就会自动生成注释摸版: 配置后的效果: 以下步骤是配置过程: 1.在创建类的过程中,对类进行自定义摸版,只需在 File->Settins->Editor->File ...

  6. ASP.NET MVC URL重写与优化(初级篇)-使用Global路由表定制URL

    ASP.NET MVC URL重写与优化(初级篇)-使用Global路由表定制URL 引言--- 在现今搜索引擎制霸天下的时代,我们不得不做一些东西来讨好爬虫,进而提示网站的排名来博得一个看得过去的流 ...

  7. .Net Core + DDD基础分层 + 项目基本框架 + 个人总结

    为什么要写这篇文章 1,在大半年前,公司开发任务比较轻松,自己不知道干什么,但是又想要学习技术,比较迷茫,后面我接触到了博客园,看了一个帖子,深有感触,我当时不知道学习什么,于是我信息给他,他居然回复 ...

  8. .NET Entity Framework (with Oracle ODP.NET)

    一.前言 1.Entity Framework是什么? Entity Framework是微软对ORM框架的实现.类似的实现也有其它方式,如DevExpress 的XPO(eXpress Persis ...

  9. 记录FormsAuthentication的使用方法

    配置,配置mode="Forms",其他属性详见 MSDN(点我直接查看各authentication属性) . <configuration> <system. ...

  10. Android------------fragment数据传递

    一.activity向fragment的数值之间的传递 关键点:fragment.setArguments(bundle);---->activity发出的信息      Bundle bund ...