<!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. 安装和部署Jenkins

    安装和部署Jenkins 环境 操作系统:ubuntu 14.04.4 LTS 下载Jenkins wget https://mirrors.tuna.tsinghua.edu.cn/jenkins/ ...

  2. mybatis 批量增加 Parameter '__frch_item_0' not found. Available parameters are [list]

    当在mybatis用到foreach的时候,会报这个错误Parameter '__frch_item_0' not found. Available parameters are [list]会出现的 ...

  3. The “SignFile” task was not given a value for the required parameter “CertificateThumbprint”的一个简单的解决方法

    这个只是其中一种解决方法,而且不是万能的 1. 由提示内容可以看出,这个一个 sign(认证)的问题, 在出现这个问题的项目上,鼠标右键,选择properties,然后选择signing. 2. 选择 ...

  4. poj 2017 Speed Limit

    Speed Limit Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 17704   Accepted: 12435 Des ...

  5. cut、grep和排序命令

    1.cut 对于行进行操作 cut -d ':' -f 2 以':'为分隔符,切出第二部分的所有行 cut -c 12- 从第12字符往后的字符所有行 2.grep grep '选取的串' 选出所有含 ...

  6. JavaEE 7 最全教程集锦(转)

    转自 http://www.iteye.com/news/28009 甲骨文公司已经在6月份正式发布了JavaEE 7,该版本带来了诸多新的规范及特性,将企业级开发提升到了一个新的层次. Java E ...

  7. 阿里云服务器docker搞定镜像

    docker的安装可以看前面的文章 这里我的docker已经安装完成了,该搞镜像了:这里的镜像用的是我以前自己搞的,虽然镜像有点大,但是胜在自己搞的,熟悉(熟悉不熟悉鬼知道) 我的镜像放在了阿里云容器 ...

  8. 100个实用的CSS技巧，以及遇见的问题和解决方案。

    前言 本篇文章将会持续更新,我会将我遇见的一些问题,和我看到的实用的CSS技巧记录下来,本篇文章会以图文混排的方式写下去.具体什么时候写完我也不清楚,反正我的目标是写100个.  本案例都是经本人实测 ...

  9. ASP.NET MVC4 新手入门教程之八 ---8.向模式中添加验证

    在这本部分会将验证逻辑添加到Movie模式,和你会确保验证规则执行任何时候用户试图创建或编辑使用该应用程序的一部电影. 保持事物的干练性 ASP.NET MVC 的核心设计信条之一是 DRY(”Don ...

  10. Java实现在线预览–openOffice实现

    实现逻辑有两种: 一.利用jodconverter(基于OpenOffice服务)将文件(.doc..docx..xls..ppt)转化为html格式. 二.利用jodconverter(基于Open ...