<!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. 用一个词(TASPK)牢记C程序内存布局

    一个典型的C程序内存布局,从低地址到高地址分别为: 1. text (正文段,即代码段 Code Segment) 2. data (已经初始化的数据段) 3. bss (未被初始化的数据段 Bloc ...

  2. .NET环境下的DPAPI加密编程

    Windows的本地加密保护机制提供了简单的调用接口,密钥的生成.保护等事项一概由系统来处理,其编程接口称为DPAPI.这一加密保护机制的边界是用户登录帐户或者本地计算机系统,使用操作系统设定的加密处 ...

  3. bzoj 5252: [2018多省省队联测]林克卡特树

    Description 小L 最近沉迷于塞尔达传说:荒野之息(The Legend of Zelda: Breath of The Wild)无法自拔,他尤其喜欢游戏中的迷你挑战. 游戏中有一个叫做& ...

  4. 如何限制html标签input的长度

    如何限制html标签input的长度 示例: <form action="/example/html/form_action.asp" method="get&qu ...

  5. Echarts 修改折线的颜色和折线的点的大小方法

    series: [{ type: 'line', smooth:true,//折点是圆弧状的                            showSymbol: true,          ...

  6. 谷歌在线appspot平台教你学Hacker(由浅如深)-XSS篇

    练习链接 http://google-gruyere.appspot.com/ 点开是纯英文的 直接点翻译即可 一 .part1 http://google-gruyere.appspot.com/p ...

  7. Heka 的配置文件加载逻辑

    Heka 使用的是 TOML 格式的配置文件, 有关 golang 加载 TOML 配置文件的技术请参看:  http://www.cnblogs.com/ghj1976/p/4082323.html ...

  8. Eclipse添加JBOSS支持

    Eclipse安装Drools插件(Drools and jBPM tools)时无法安装JBoss Runtime Drools Detector,需要给eclipse安装JBOSS的基础环境,具体 ...

  9. 深入浅出ConcurrentHashMap1.8

    转载:https://www.jianshu.com/p/c0642afe03e0 好文 关于文章中的疑问:为什么要构造一个反序链表,放在nextTable的i+n的位置上呢,在<深入分析Con ...

  10. Vue中的静态资源管理（src下的assets和static文件夹的区别）

    ### 你可能注意到了我们的静态资源共有两个目录src/assets和static/,你们它们之间有怎样的区别呢? 资源打包 为了回答这个问题,我们需要了解webpack是如何处理静态资源的. 在所有 ...