魅族首页导航效果(不兼容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布局后,主页内容应该是一个 ...
随机推荐
- html的img标签
html显示图片 1.最简单: <img src="图片路径"/> 2.如果要改变图片显示的尺寸 <img src="图片路径" width= ...
- 深入redis内部--初始化服务器
初始化服务器代码如下: void initServer() { int j; signal(SIGHUP, SIG_IGN); signal(SIGPIPE, SIG_IGN); setupSigna ...
- win10中xshell的ssh链接virtualBox中的centos7
win10下virtualbox中centos7.3与主机通过xshell的ssh建立连接的方法 2017-02-19 01:29 版权声明:本文为博主原创文章,未经博主允许不得转载. 最近 ...
- 获取用户Ip地址通用方法常见安全隐患(HTTP_X_FORWARDED_FOR)
分析过程 这个来自一些项目中,获取用户Ip,进行用户操作行为的记录,是常见并且经常使用的. 一般朋友,都会看到如下通用获取IP地址方法. function getIP() { if (isset($_ ...
- 有意思的MySQL之最
写在前面 在平时工作中特别是架构设计阶段,咨询量最多的也就是MySQL之最了,在不经意间发现原来MySQL手册里面已经列举了,顺手拿来翻译下,如果有翻译错误或者不当的地方,欢迎批评指正. 最大和最小 ...
- ASP.NET MVC4 新手入门教程之一 ---1.介绍ASP.NET MVC4
你会建造 您将实现一个简单的电影清单应用程序支持创建. 编辑. 搜索和清单数据库中的电影.下面是您将构建的应用程序的两个屏幕截图.它包括显示来自数据库的电影列表的网页: 应用程序还允许您添加. 编辑和 ...
- java 并发 (四) ---- 并发容器
Hashmap 和 Concurrenthashmap Hashmap 不适合并发,应该使用ConcurrentHashMap . 这是很多人都知道的,但是为什么呢? 可以先看一下这两篇文章. JDK ...
- MDI-设置子窗体只能弹出一个--单例模式
不足之处,欢迎指正! 什么是MDI..我表示不知道的呢. MDI(Multiple Document Interface)就是所谓的多文档界面,与此对应就有单文档界面 (SDI), 它是微软公司从Wi ...
- Nginx 504错误总结
Nginx 504错误(Gateway time-out 网关超时)的含义是所请求的网关没有请求到,简单来说就是没有请求到可以执行的PHP-CGI. 一般看来, 这种情况可能是由于nginx默认的f ...
- 滴滴开源 Vue 组件库— cube-ui
cube-ui 是滴滴去年底开源的一款基于 Vue.js 2.0 的移动端组件库,主要核心目标是做到体验极致.灵活性强.易扩展以及提供良好的周边生态-后编译. 自 17 年 11 月开源至今已有 5 ...