魅族首页导航效果(不兼容IE)

<!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)的更多相关文章

ViewPager+GridView实现首页导航栏布局分页效果
如图是效果图用ViewPager+GridView实现首页导航栏布局分页效果来实现的效果 Demo下载地址:http://download.csdn.net/detail/qq_29774291/96 ...
学习使用 CSS3 制作网站面包屑导航效果
作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...
基于 jQuery 实现的精致作品集图片导航效果
今天,我们要用 jQuery 来创建一个作品集图像的导航模板.我们的想法是,以分组的方式显示一组作品集,并通过二维的方式(水平/垂直)来浏览.任一箭头或当前图像下方的小盒子可以作为导航使用. 在线演示 ...
Pace.js – 超赞的页面加载进度自动指示和 Ajax 导航效果
在页面中引入 Pace.js 和您所选择主题的 CSS 文件,就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果.不需要挂接到任何代码,自动检测进展.您可以选择颜色和多种效果,有简约,闪光灯, ...
Css实现透明效果，兼容IE8
Css实现透明效果,兼容IE8 >>>>>>>>>>>>>>>>>>>>> ...
CSS实现商城分类导航效果（hover选择器）
学完制作出这个导航效果之后,收获最多的是了解了hover选择器的功能,:hover 选择器用于选择鼠标指针浮动在上面的元素.在鼠标移到元素上时向此元素添加特殊的样式(CSS).例如:改变鼠标悬停处的元 ...
仿网易nec首页动画效果
仿网页nec首页动画效果nec链接:http://nec.netease.com/ 首先,介绍animationanimation检索或设置对象所应用的动画特效.animation由“keyframe ...
第74天：jQuery实现图片导航效果
图片导航效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
如何使用RadioGroup和RadioButton实现FragmentTabHost导航效果？
目录: 一.概述最近在做一个新闻类结合社区的APP的时候,需要添加一个侧滑菜单的效果,考虑到可以使用DrawerLayout布局,但是问题是使用了 DrawerLayout布局后,主页内容应该是一个 ...

随机推荐

bzoj 3064: Tyvj 1518 CPU监控
Description 1.区间加 $z$ 2.区间覆盖为 $z$ 3.查询区间最大值 4.查询区间历史最大值 Solution 线段树维护历史最值,思想大致是维护标记出现过的最大值考虑这种 ...
AngularJS的日期格式化有两种形式
AngularJS的日期格式化有两种形式,一种是在HTML页面,一种是在JS代码里,都是用到AngularJS的过滤器$filter. HTML: date_expression 即你在$scope ...
【Bigdecimal】
---恢复内容开始--- 大位数除法的时候注意1/3问题:异常:[Exception in thread "main" java.lang.ArithmeticException: ...
Linux下模拟多线程的并发并发shell脚本
分享一个在Linux下模拟多线程的并发脚本,使用这个脚本可以同时批量在定义数量的服务器上执行相关命令,比起普通for/while循环只能顺序一条一条执行的效率高非常多,在管理大批服务器时非常的实用. ...
[转]How can I install the VS2017 version of msbuild on a build server without installing the IDE?
本文转自:http://stackoverflow.com/questions/42696948/how-can-i-install-the-vs2017-version-of-msbuild-on- ...
AngularJS中的动画实现
AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <script ...
spring-boot配置热更新
spring boot使用的时候会遇到不断重启启动类的情况,热更新可以免去手动重启的烦恼,spring boot应用配置热更新主要有两种方式: 1.使用springloaded 配置pom.xml文件 ...
MySQL中文问题
-- 设置客户端显示字符集 mysql>set names utf8; -- 建表时设置表的字符集和引擎 CREATE TABLE table ( `abc` char(32) NOT NULL ...
npm安装指定版本
今天犯了一个低级错误,在npm安装依赖时,命令写成下了格式 npm i --save iview 2.0.0 要安装指定版本应该使用 npm i --save iview@2.0.0 谨记
Apache服务器运维笔记(2)----使用<IfDefine>容器实现不同的配置
还有一种方法用来实现不同配置的Apache服务器启动,就是在一个配置文件中使用<IfDefine name> ... </IfDefine> 容器来定义,在<IfDefi ...

魅族首页导航效果(不兼容IE)

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

随机推荐

热门专题