魅族首页导航效果(不兼容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布局后,主页内容应该是一个 ...
随机推荐
- java/resteasy批量下载存储在阿里云OSS上的文件，并打包压缩
现在需要从oss上面批量下载文件并压缩打包,搜了很多相关博客,均是缺胳膊少腿,要么是和官网说法不一,要么就压缩包工具类不给出 官方API https://help.aliyun.com/documen ...
- NPM 与前端包管理
我们很清楚,前端资源及其依赖管理一直是 npm 的重度使用场景,同时这也一直是 Node.js 普及的重要推动力.但这类应用场景到底有多重度?这是一个很难回答的问题.这份 “npm 最常下载的包的清单 ...
- jQuery中遇到的坑
在jQuery 1.6之前,只有attr()函数可用,该函数不仅承担了attribute的设置和获取工作,还同时承担了property的设置和获取工作.例如:在jQuery 1.6之前,attr()也 ...
- 1.文本编辑器-->CKEditor+CKFinder使用与配置
一.CKEditor介绍 官网地址:http://ckeditor.com CKEditor下载地址:http://ckeditor.com/download CKFinder(免费版本)下载地址:h ...
- sublime text 2编辑器中文问题
Sublime Text 2是一个非常不错的源代码及文本编辑器,但是不支持GB2312和GBK编码在很多情况下会非常麻烦.不过Sublime Package Control所以供的插件可以让Subli ...
- Java - 用builder代替构造器
静态工厂和够构造器有一个共同的局限性:遇到大量的参数时无法很好的扩展. 先说说构造器. 其实field不多时重叠构造器(telescoping constructor)是个不错的方法,易于编写也易于调 ...
- C#在不同平台下DLL的引用问题
缘起 很多时候,我们需要引用在不同平台下的DLL,32位(X86)和64位(X64).如果平台错误,在C#中会引发BadImageFormatException异常. 解决思路 我们同时不能添加不同平 ...
- Hadoop 完全分布式部署(三节点)
用来测试,我在VMware下用Centos7搭起一个三节点的Hadoop完全分布式集群.其中NameNode和DataNode在同一台机器上,如果有条件建议大家把NameNode单独放在一台机器上,因 ...
- 搭建Jquery+SpringMVC+Spring+Hibernate+MySQL平台
一. 开发环境 1. 点击此查看并下载需要的 Eclipse IDE for Java EE Developers 开发工具,依赖于java,推荐选用32位 2. 点击此查看并下载需要的 MySQ ...
- docker 开机自动启动容器
注意:如果有存在多个容器,都占用了同一端口,那么只会起来一个,要注意,我在调试时候就遇到这个坑了 在使用docker run启动容器时,使用--restart参数来设置: docker run -m ...