<!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. Mybatis Dao开发的两种方式（一）

     原始Dao的开发方式: 1.创建数据库配置文件db.properties jdbc.driver=com.mysql.jdbc.Driver jdbc.url=jdbc:mysql://localh ...

  2. linux信息查看手记

    系统 # uname -a # 查看内核/操作系统/CPU信息 # head -n 1 /etc/issue # 查看操作系统版本 # cat /proc/cpuinfo # 查看CPU信息 # ho ...

  3. 了解下C#异常时的输出

    Sample Code: try { string re = "1.1".Substring(1,4); } catch (Exception ex) { logger.Error ...

  4. C# ASP.NET Core使用HttpClient的同步和异步请求

    引用 Newtonsoft.Json // Post请求 public string PostResponse(string url,string postData,out string status ...

  5. RabbitMQ - 任务队列

    这次我们试着实现这样一个小程序: 嗯,就是任务队列(task queue).不是将任务集中在一堆并一直等到所有任务一并完成为止,而是将每一个任务封装为一个消息,并将其发送到队列,后台的workers就 ...

  6. JS实现单链表、单循环链表

    链表 链表是一种物理存储单元上非线性.非连续性的数据结构(它在数据逻辑上是线性的),它的每个节点由两个域组成:数据域和指针域.数据域中存储实际数据,指针域则存储着指针信息,指向链表中的下一个元素或者上 ...

  7. openlayers 4快速渲染管网模型数据

    1.背景 项目需要将管网模型运行的结果数据在矢量地图上以不同颜色加以区分.结果数据中和图层数据中唯一能对应的只有一个标识. 2.实现思路 利用定时器+图层统一渲染.在style上找到突破口,而不是用常 ...

  8. Linux中的叹号命令

    在shell环境下操作,需要积累点快捷输入的小技巧: 最常用的技巧恐怕就是Tab自动补全以及上方向键来回退上几条历史命令了,这些对于csh,bash,ksh,zsh都适用. 最近还找到一种快速回退上一 ...

  9. weblogic11g(10.3.6)部署war包时，解决jar包冲突的超简方案

    亲测有效:weblogic11g(10.3.6) + jdk7,打包使用jdk7或jdk8,注意weblogic用的jdk和打包时jdk的兼容. 分别配置web项目下pom.xml和weblogic. ...

  10. log4j2分层输出日志

    在java mvc框架开发过程中,我们经常的将代码分为类似controller(控制层).service(业务层).rpc(远程接口调用层).dao(数据层)等层级,如果将所有层级的日志全部都打到一个 ...