CSS3 transform制作的漂亮的滚动式导航
模拟这个做的 不过实现的没有别人那么好
http://www.creativetier.com/products/modern-menu-3/vertical.html
关于transform 看这里http://www.w3schools.com/cssref/css3_pr_transform.asp
首先这个效果最基本的实现原理 就是一个menu实际上是由2个并排(float)或并列的menu实现的
用一个div包住这2个Menu 到时候就移动这个div的位置就行
然后外面用一个和一个Menu大小相同的框罩住这两个menu 并设定overflow:hidden
然后当鼠标移动到这个遮罩框的时候 就移动包住menu的div就行了
哎呀 你说为什么一定要用个div包住这2个menu啊 我移动其中一个不就好了？ 不行的哟 那样只会第一个menu被移动
第二个本应该显示的红色menu还在被遮住的地方..
关于二级菜单弹出
我没能找到用css直接移动这个弹出框的方法 因为css的transform是针对被移动的元素 如果一开始这个元素都没有被显示 似乎无法只通过css移动它 所以还是用的js来操作的
这个二级菜单默认就隐藏在一级菜单地下 所以我设置一级菜单z-index为2 二级菜单为1
如果你的最末一个一级菜单中又很多二级菜单 那么可能出现当二级菜单未展开的时候 有些元素可以直接在一级菜单中看见
因为二级菜单都超过我的总导航区域大小了 而很明显 对于这个总导航区域 我是不能设置overflow：hidden的
否则二级菜单即使展开都看不见了 所以默认二级菜单缩起来时 display为none
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script type="text/javascript" src='VNav.js'></script>
<style type="text/css">
.VNav{
width: 200px;
/*overflow: hidden;*/
/*border: 1px solid black;*/
}
.item{
position: relative; }
.menu{
width: 200px;
overflow: hidden;
}
.menuDiv{
position: relative;
z-index: 2;
}
.subMenuDiv{
position: absolute;
display: none;
left: 0px;
top: 0px;
z-index: 1; /*z-index设为负值表示隐藏了*/
width: 200px;
overflow: hidden;
/*height: */
}
.menuItemWrapper{
width: 400px;
-webkit-transition: -webkit-transform 232ms;
transition: transform 232ms;
}
.menuItemWrapper:after{
content: '.';
clear: both;
display: block;
height: 0px;
visibility: hidden; }
.menuItemWrapper:hover{
/*margin-left:-200px;*/
-webkit-transform: translate(-200px, 0); }
.menuItem{
width: 200px;
height: 50px;
float: left;
color: white;
} .menuItem.first{
background-color: black;
}
.menuItem.second{
background-color: #f42;
}
.itemContent{
padding: 10px 10px 10px 10px;
line-height: 30px;
}
.verticalMenuDiv{ } .verticalMenuDiv:after{
clear: both;
content: '.';
visibility: hidden;
height: 0px;
display: block;
}
.vMenu{
width: 50px;
height: 50px;
float: left;
overflow: hidden;
}
.v_menuItemWrapper{
-webkit-transition: -webkit-transform 232ms;
transition: transform 232ms;
}
.v_menuItem{
/*width: 50px;*/
height: 50px;
/*padding-left: 17px;
padding-right: 17px;*/
color: white;
}
.v_menuItemWrapper:hover{
-webkit-transform: translate(0, -50px); /*第一个值是x轴 后面是y轴*/
}
.v_menuItem.first{
background-color: black;
}
.v_menuItem.second{
background-color: #f42;
}
.v_menuItem .vmIcon{
display: block;
height: 50px;
background-position: center center; /*使小图居中*/
}
.v_menuItem .vmIcon.icon1{
background-image: url(http://www.creativetier.com/products/modern-menu-3/modern-menu/images/theme1/facebook.png);
background-repeat: no-repeat;
} </style>
</head> <body>
<div class='VNav'>
<div class='itemList'>
<div class='item'>
<div class='menuDiv'>
<div class='menu'>
<div class='menuItemWrapper'>
<div class='menuItem first'>
<div class='itemContent'>
<span>MENU</span>
</div>
</div>
<div class='menuItem second'>
<div class='itemContent'>
<span>MENU</span>
</div>
</div>
</div>
</div>
</div>
<div class='subMenuDiv'>
<div class='menu'>
<div class='menuItemWrapper'>
<div class='menuItem first'>
<div class='itemContent'>
<span>sss1</span>
</div>
</div>
<div class='menuItem second'>
<div class='itemContent'>
<span>ss1</span>
</div>
</div>
</div>
</div>
<div class='menu'>
<div class='menuItemWrapper'>
<div class='menuItem first'>
<div class='itemContent'>
<span>ss2</span>
</div>
</div>
<div class='menuItem second'>
<div class='itemContent'>
<span>ss2</span>
</div>
</div>
</div>
</div>
<div class='menu'>
<div class='menuItemWrapper'>
<div class='menuItem first'>
<div class='itemContent'>
<span>ss3</span>
</div>
</div>
<div class='menuItem second'>
<div class='itemContent'>
<span>ss3</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='item'>
<div class='menuDiv'>
<div class='menu'>
<div class='menuItemWrapper'>
<div class='menuItem first'>
<div class='itemContent'>
<span>MENU</span>
</div>
</div>
<div class='menuItem second'>
<div class='itemContent'>
<span>MENU</span>
</div>
</div>
</div>
</div>
</div>
<div class='subMenuDiv'>
<div class='menu'>
<div class='menuItemWrapper'>
<div class='menuItem first'>
<div class='itemContent'>
<span>sss1</span>
</div>
</div>
<div class='menuItem second'>
<div class='itemContent'>
<span>ss1</span>
</div>
</div>
</div>
</div>
<div class='menu'>
<div class='menuItemWrapper'>
<div class='menuItem first'>
<div class='itemContent'>
<span>ss2</span>
</div>
</div>
<div class='menuItem second'>
<div class='itemContent'>
<span>ss2</span>
</div>
</div>
</div>
</div>
<div class='menu'>
<div class='menuItemWrapper'>
<div class='menuItem first'>
<div class='itemContent'>
<span>ss3</span>
</div>
</div>
<div class='menuItem second'>
<div class='itemContent'>
<span>ss3</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='item'>
<div class='menuDiv'>
<div class='menu'>
<div class='menuItemWrapper'>
<div class='menuItem first'>
<div class='itemContent'>
<span>MENU</span>
</div>
</div>
<div class='menuItem second'>
<div class='itemContent'>
<span>MENU</span>
</div>
</div>
</div>
</div>
</div>
<div class='subMenuDiv'>
<div class='menu'>
<div class='menuItemWrapper'>
<div class='menuItem first'>
<div class='itemContent'>
<span>sss1</span>
</div>
</div>
<div class='menuItem second'>
<div class='itemContent'>
<span>ss1</span>
</div>
</div>
</div>
</div>
<div class='menu'>
<div class='menuItemWrapper'>
<div class='menuItem first'>
<div class='itemContent'>
<span>ss2</span>
</div>
</div>
<div class='menuItem second'>
<div class='itemContent'>
<span>ss2</span>
</div>
</div>
</div>
</div>
<div class='menu'>
<div class='menuItemWrapper'>
<div class='menuItem first'>
<div class='itemContent'>
<span>ss3</span>
</div>
</div>
<div class='menuItem second'>
<div class='itemContent'>
<span>ss3</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='item'>
<div class='menuDiv'>
<div class='menu'>
<div class='menuItemWrapper'>
<div class='menuItem first'>
<div class='itemContent'>
<span>MENU</span>
</div>
</div>
<div class='menuItem second'>
<div class='itemContent'>
<span>MENU</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='item'>
<div class='menuDiv'>
<div class='menu'>
<div class='menuItemWrapper'>
<div class='menuItem first'>
<div class='itemContent'>
<span>MENU</span>
</div>
</div>
<div class='menuItem second'>
<div class='itemContent'>
<span>MENU</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='item'>
<div class='verticalMenuDiv'>
<div class='vMenu'>
<div class='v_menuItemWrapper'>
<div class='v_menuItem first'>
<span class='vmIcon icon1'></span>
</div>
<div class='v_menuItem second'>
<span class='vmIcon icon1'></span>
</div>
</div>
</div>
<div class='vMenu'>
<div class='v_menuItemWrapper'>
<div class='v_menuItem first'>
<span class='vmIcon icon1'></span>
</div>
<div class='v_menuItem second'>
<span class='vmIcon icon1'></span>
</div>
</div>
</div>
<div class='vMenu'>
<div class='v_menuItemWrapper'>
<div class='v_menuItem first'>
<span class='vmIcon icon1'></span>
</div>
<div class='v_menuItem second'>
<span class='vmIcon icon1'></span>
</div>
</div>
</div>
<div class='vMenu'>
<div class='v_menuItemWrapper'>
<div class='v_menuItem first'>
<span class='vmIcon icon1'></span>
</div>
<div class='v_menuItem second'>
<span class='vmIcon icon1'></span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
JS
$(function() {
showSubMenu();
});
function showSubMenu() {
$('.item').hover(function() {
/* Stuff to do when the mouse enters the element */
$(this).children('.subMenuDiv').css('display', 'block');
$(this).children('.subMenuDiv').animate({
'left': '200px'
}, 332);
}, function() {
$(this).children('.subMenuDiv').animate({
'left': '0px'
}, 332);
$(this).children('.subMenuDiv').css('display', 'none');
});
}
CSS3 transform制作的漂亮的滚动式导航的更多相关文章
- CSS3背景 制作导航菜单综合练习题
CSS3背景 制作导航菜单综合练习题 小伙伴们,根据所学知识,使用CSS3实现下图的导航菜单效果 任务 1.制作导航圆角 提示:使用border-radius实现圆角 2.制作导航立体风格 提示:使用 ...
- 使用 CSS3 & jQuery 制作漂亮的书签动画
今天的教程是关于创建使用 CSS 旋转变换和 JavaScript 制作动画书签效果.我们的想法是展现出样书状结构,使单一的色板或列表点击切换.当点击其中一项,我们就会旋转以显示所选择的项目. 在线演 ...
- CSS3+Js制作的一款响应式导航条
今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大 ...
- 超漂亮的CSS3按钮制作教程分享
要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识. 开发环境 Adobe Dreamweaver CS6/Chrome浏览器 演示地址 演示地址 利用CSS3属性制作按钮,我们只需要用到G ...
- CSS3动画制作
CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...
- CSS3(transform/transition/animation) 基础 总结
1.CSS3新增的样式(常用) //颜色透明表示rgba(0,0,0,.5) //圆角(定义角半径)border-radius: 5px 10px 15px 20px; //文字/盒子阴影text-s ...
- CSS3 Transform变形理解与应用
CSS3 Transform变形理解与应用 Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开 ...
- 纯Div+Css制作的漂亮点击按钮和关闭按钮
纯Div+Css制作的漂亮点击按钮和关闭按钮,单击点击按钮也有效果.这些都不是图片.
- 太可爱了！CSS3 & SVG 制作的米老鼠钟表
米老鼠是大家非常熟悉的迪斯尼动画形象.这是一个可爱的效果,结合 CSS & SVG 图形实现的米老鼠钟表效果.Web 技术让很多生活中的事物都能搬到网上去,后面的推荐阅读也有很多的效果,感兴趣 ...
随机推荐
- API各函数作用简介
API各函数作用简介 1.控件与消息函数 AdjustWindowRect 给定一种窗口样式,计算获得目标客户区矩形所需的窗口大小 AnyPopup 判断屏幕上是否存在任何弹出式窗口 ArrangeI ...
- linux线程间同步方式汇总
抽空做了下linux所有线程间同步方式的汇总(原生的),包含以下几个: 1, mutex 2, condition variable 3, reader-writer lock 4, spin loc ...
- zen-coding for notepad++，前端最佳手写代码编辑器
zen-Coding是一款快速编写HTML,CSS(或其他格式化语言)代码的编辑器插件,这个插件可以用缩写方式完成大量重复的编码工作,是web前端从业者的利器. zen-Coding插件支持多种编辑器 ...
- JavaSE_ API常用对象 总目录(11~14)
JavaSE学习总结第11天_开发工具 & API常用对象111.01 常见开发工具介绍11.02 Eclipse和MyEclipse的概述11.03 Eclipse的下载安装及卸载11.04 ...
- Python主要模块和常用方法简览
原文地址:http://blog.csdn.net/hwhjava/article/details/22284399 PY核心模块方法1. os模块: os.remove() #删除文件 os.unl ...
- （iOS）推送常见问题
1.为什么启动的时候出现 Did Fail To Register For Remote Notifications With Error的错误程序运行的时候出现下面的错误信息: did Fail T ...
- 怎么理解angularjs中的服务？
AngularJS中的服务其实就是提供一种方式抽取共用类库 比如说一些工具类方法,我们传统的做法就是自己写个 utility 类,把相关的工具方法填充到utility里面去,最后把utility类放到 ...
- mysql读写分离
严格意义上讲,MySQL 读.写分离确实存在上述情况,这是由Master-Slave 异步复制存在延迟所导致的,且Master binlog的写入为多线程,而Slave同步的sql_thread为单线 ...
- HDU 2610 Sequence one
题目大意:在给定的序列中找到固定个数的递增的子序列,如果子序列的总个数少于要求的个数,那么就把所有的子序列输出即可. 题解:本来题目也不太看得懂,在别人的博客看了许久才懂,剪枝和判重也不大会,于是暂时 ...
- JAVA 线程学习 - Thread了解
public class ThreadKnow { private TimeThread timeThread; private boolean flag; public ThreadKnow() { ...