<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>魅族导航--鼠标经过列表依次显示效果</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        ul,li{

            list-style:none;

        }

        .clearfix{

            zoom:1;

        }

        .clearfix:after{

            content:".";

            display:block;

            width:0;

            height:0;

            visibility:hidden;

            clear:both;

        }

        .header{

            width:600px;

            height:300px;

            margin:0 auto;

            position:relative;

        }

        .header li{

            float:left;

            text-align:center;

        }

        .header-ul1{

            background:#ccc;

        }

        .header-ul1>li{

            width:100px;

            text-align:center;

            background:#ccc;

            height:50px;

            line-height:50px;

            z-index:99999

        }

        .header-ul1>li.active{

            background:darkgoldenrod;

        }

        .header-ul2 i{

            display:block;

            width:100px;

            height:100px;

            background:url("mobile.png") no-repeat center;

            background-size:contain;

        }

        .header-wrapper{

            width:100%;

            height:0;

            animation:all 1s;

            overflow:hidden;

            position:absolute;

            top:50px;

            z-index:99;

            left:0;

        }

        .header-wrapper li{

            opacity:0;

        }

        .header-wrapper.header-show{

            background:#00b2de;

            animation:wrapper-show .8s forwards;

        }

        @-webkit-keyframes wrapper-show {

            from {

                height: 0

            }

            to {

                height: 142px

            }

        }

        .header-wrapper.header-show li{

            opacity: 1 \9 \0;

            filter: alpha(opacity=100);

            -webkit-animation: sub-enter .8s forwards;

            animation:sub-enter 1s forwards

        }

        .header-wrapper.header-show li:nth-child(1){

            -webkit-animation-delay: 0s;

            animation-delay: 0s

        }

        .header-wrapper.header-show li:nth-child(2){

            -webkit-animation-delay: .4s;

            animation-delay: .4s

        }

        .header-wrapper.header-show li:nth-child(3){

            -webkit-animation-delay: .8s;

            animation-delay: .8s

        }

        @-webkit-keyframes sub-enter{

            from {

                -webkit-transform: translate(70px);

                transform: translate(70px);

                opacity: 0;

                filter: alpha(opacity=0)

            }

            to {

                -webkit-transform: translate(0);

                transform: translate(0);

                opacity: 1;

                filter: alpha(opacity=100)

            }

        }

    </style>

</head>

<body>

<div class="header">

    <ul class="header-ul1 clearfix">

        <li>官网</li>

        <li data-index="1">

            手机

            <div class="header-wrapper" data-index="1">

                <ul class="header-ul2 clearfix">

                    <li>

                        <i></i>

                        <span>手机</span>

                    </li>

                    <li>

                        <i></i>

                        <span>OPPO R9</span>

                    </li>

                    <li>

                        <i></i>

                        <span>OPPO R9</span>

                    </li>

                </ul>

            </div>

        </li>

        <li>耳机</li>

        <li data-index="2">充电器

            <div class="header-wrapper" data-index="2">

                <ul class="header-ul2 clearfix">

                    <li>

                        <i></i>

                        <span>充电器</span>

                    </li>

                    <li>

                        <i></i>

                        <span>OPPO R9</span>

                    </li>

                    <li>

                        <i></i>

                        <span>OPPO R9</span>

                    </li>

                </ul>

            </div>

        </li>

        <li>配件</li>

        <li data-index="3">

            智能

            <div class="header-wrapper"  data-index="3">

                <ul class="header-ul2 clearfix">

                    <li>

                        <i></i>

                        <span>智能</span>

                    </li>

                    <li>

                        <i></i>

                        <span>OPPO R9</span>

                    </li>

                    <li>

                        <i></i>

                        <span>OPPO R9</span>

                    </li>

                </ul>

            </div>

        </li>

    </ul>

</div>

</body>

<script src="jquery-1.11.3.min.js"></script>

<script>

    $(".header-ul1 li").each(function(){

        var $index=$(this).attr("data-index"),$this=$(this);

        $this.hover(

                function(){

                    $this.addClass("active");

                    if($this.attr("data-index")){

                        $(".header-wrapper[data-index="+$index+"]").addClass("header-show")

                    }

                },function(){

                    $this.removeClass("active");

                    if($this.attr("data-index")){

                        $(".header-wrapper[data-index="+$index+"]").removeClass("header-show")

                    }

                }

        );

    });

</script>

</html>

魅族首页导航效果(不兼容IE)的更多相关文章

  1. ViewPager+GridView实现首页导航栏布局分页效果

    如图是效果图用ViewPager+GridView实现首页导航栏布局分页效果来实现的效果 Demo下载地址:http://download.csdn.net/detail/qq_29774291/96 ...

  2. 学习使用 CSS3 制作网站面包屑导航效果

    作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...

  3. 基于 jQuery 实现的精致作品集图片导航效果

    今天,我们要用 jQuery 来创建一个作品集图像的导航模板.我们的想法是,以分组的方式显示一组作品集,并通过二维的方式(水平/垂直)来浏览.任一箭头或当前图像下方的小盒子可以作为导航使用. 在线演示 ...

  4. Pace.js – 超赞的页面加载进度自动指示和 Ajax 导航效果

    在页面中引入 Pace.js  和您所选择主题的 CSS 文件,就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果.不需要挂接到任何代码,自动检测进展.您可以选择颜色和多种效果,有简约,闪光灯, ...

  5. Css实现透明效果，兼容IE8

    Css实现透明效果,兼容IE8 >>>>>>>>>>>>>>>>>>>>> ...

  6. CSS实现商城分类导航效果（hover选择器）

    学完制作出这个导航效果之后,收获最多的是了解了hover选择器的功能,:hover 选择器用于选择鼠标指针浮动在上面的元素.在鼠标移到元素上时向此元素添加特殊的样式(CSS).例如:改变鼠标悬停处的元 ...

  7. 仿网易nec首页动画效果

    仿网页nec首页动画效果nec链接:http://nec.netease.com/ 首先,介绍animationanimation检索或设置对象所应用的动画特效.animation由“keyframe ...

  8. 第74天：jQuery实现图片导航效果

    图片导航效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  9. 如何使用RadioGroup和RadioButton实现FragmentTabHost导航效果？

    目录: 一.概述 最近在做一个新闻类结合社区的APP的时候,需要添加一个侧滑菜单的效果,考虑到可以使用DrawerLayout布局,但是问题是使用了 DrawerLayout布局后,主页内容应该是一个 ...

随机推荐

  1. [转]js和jquery获取窗体高度

    JQuery获取浏览器窗口宽高,文档宽高 2010-01-20 08:59<script type="text/javascript">$(document).read ...

  2. kd-tree 小结

    核心思想 是一种分割 \(k\) 维数据空间的数据结构 一维情况下就是平衡树,以 \(key\) 为标准判断插入左儿子还是右儿子 \(kdtree\) 就是平衡树在多维空间的扩展 因为有多维,我们按不 ...

  3. 记一次bug修复过程

    我的建议,究竟有谁会看,以我的位置,到底能推动到哪一层可行性,可能性 问题:用户的数据丢失了.以为是修改操作 有bug,但查看了后端接口和前端校验,都没有发现问题.但是input数据没有日志[日志级别 ...

  4. [转]Using OData from ASP.NET

    本文转自:http://www.drdobbs.com/windows/using-odata-from-aspnet/240168672 By Gastón Hillar, July 01, 201 ...

  5. WPF TextBox 聚焦

    1.利用行为 http://blog.csdn.net/lianchangshuai/article/details/9223125 2. 利用装饰器 http://stackoverflow.com ...

  6. Intellij IDEA 各种乱码解决方案 posted @ 2017-06-23 15:31:06

    一次解决所有问题,只需做配置文件的修改即可 解决方案:       在      IntelliJ IDEA 2016.1\bin\idea64.exe.vmoptions        Intell ...

  7. jxls实现动态图表

    此文章是基于 jxls实现基于excel模板的报表 一. 制作excel动态图表模板 1. 安装 excel 2003 ,新建文件,命名为:runRecord.xls 2. 创建两个表格,分别命名为: ...

  8. Docker简单说明

    前段时间工作需要,简单的研究了下docker.侧重点放在docker的镜像定制方面,后续会研究下k8s的使用. Docker是一个开源的引擎,可以轻松的为任何应用创建一个轻量级的.可移植的.自给自足的 ...

  9. Cocos2d-js 开发记录：基本图形绘制

    做着做着想要用基本绘图函数画个矩形,在cocos2d-js 3.0里可以使用DrawNode var dn = new cc.DrawNode(); var ltp = cc.p(0, 32); va ...

  10. 跨域解决方案之HTML5 postMessage

    问题场景: web是嵌入到手机客户端中的静态页面,为了统计用户行为需要引入ga,但是ga必须是在www下才行,哪怕是localhost,这就是矛盾.解决方案是在页面中使用iframe,iframe是在 ...