魅族首页导航效果(不兼容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布局后,主页内容应该是一个 ...
随机推荐
- org.springframework.web.bind.MissingServletRequestParameterException: Required String parameter 'xxxx' is not present
org.springframework.web.bind.MissingServletRequestParameterException: Required String parameter 'xxx ...
- Netezza External Tables --How to use local files in external table
FROM: http://tennysusantobi.blogspot.com/2012/08/netezza-external-tables.html Netezza External Table ...
- FusionCharts数据展示成饼状图、柱状图和折线图
FusionCharts数据展示成饼状图.柱状图和折线图 本文以展示柱状图为例进行介绍,当然这仅仅是一种方法而已:还有很多方法可以用于展示图表,例如echarts,自定义图表标签.使用jfreecha ...
- Js窗口嵌套
<script type="text/javascript"> if (window.parent.window != window) { window.top.loc ...
- sql server or Oracle: table MS_Description
--SQL Server表描述 及 字段描述的增.删.改.查询 --sql server 2000系统表sysproperties在SQL 2008中无效的问题 今天无意中在网上发现Sqlserver ...
- sftp java 上传
1. 注意问题 uri的格式: sftp://zhangsan:123456@10.10.10.10:22 dir问题 : 判断有没有 没有创建 然后进入 类推 config问题: StrictHos ...
- 浅谈jquery中prop()和attr()
我们都知道,一般在jquery中设置属性时要用到attr()方法,现在我们有一个效果,点击按钮切换复选框的选中状态,下面贴出html代码: <input type="checkbox& ...
- js中常见面试问题-笔记
原文参考https://mp.weixin.qq.com/s/mCVL6qI33XeTg4YGIKt-JQ 1.事件代理给父元素添加事件,利用事件冒泡原理,在根据e.target来获取子元素<u ...
- siriWave.js的demo
demo.html <style>body { background: #000; }</style> <script src="../siriwave.js& ...
- 004声明式服务调用Feign & 断路器Hystrix
1.POM配置 和普通Spring Boot工程相比,添加了Eureka Client.Feign.Hystrix依赖和Spring Cloud依赖管理 <dependencies> &l ...