魅族首页导航效果(不兼容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布局后,主页内容应该是一个 ...
随机推荐
- 16位模式/32位模式下PUSH指令探究——《x86汇编语言：从实模式到保护模式》读书笔记16
一.Intel 32 位处理器的工作模式 如上图所示,Intel 32 位处理器有3种工作模式. (1)实模式:工作方式相当于一个8086 (2)保护模式:提供支持多任务环境的工作方式,建立保护机制 ...
- 机器学习——LightGBM
基础概念 LigthGBM是boosting集合模型中的新进成员,它和xgboost一样是对GBDT的高效实现,很多方面会比xgboost表现的更为优秀.原理上它和GBDT及xgboot类似,都采用损 ...
- Learning Linux Commands: awk--reference
http://how-to.linuxcareer.com/learning-linux-commands-awk 1. Introduction In this case, the title mi ...
- [转]AngularJS 实现 Table的一些操作(示例大于实际)
本文转自:http://www.cnblogs.com/lin-js/p/linJS.html <!DOCTYPE html> <html> <head> < ...
- Bitbucket 关联 VS
1.双击已经建立好的仓库 - 克隆仓库-目标路径选择一个空的文件夹,点击克隆 2.把已经建立好的项目拷贝的到刚刚那个空目录里面 3.在VS里面打开新路径下面的项目,点击提交即可; 我安装了Bitbuc ...
- jvm options
http://www.oracle.com/technetwork/java/javase/tech/vmoptions-jsp-140102.html#Options Categories of J ...
- JS 中的require 和 import 区别整理
ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使 ...
- springboot1.5.10兼容高版本6.1.1elasticsearch
1.引入依赖 <dependency> <groupId>org.elasticsearch</groupId> <artifactId>elastic ...
- Heka 的配置文件加载逻辑
Heka 使用的是 TOML 格式的配置文件, 有关 golang 加载 TOML 配置文件的技术请参看: http://www.cnblogs.com/ghj1976/p/4082323.html ...
- Windows安装配置xampp
建议大家直接看原文 1.安装XAMPP 进入https://www.apachefriends.org/zh_cn/index.html页面下载XAMPP 2 3.打开xampp控制版 4.修改apa ...