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 技术让很多生活中的事物都能搬到网上去,后面的推荐阅读也有很多的效果,感兴趣 ...
随机推荐
- HDU 5877 Weak Pair（树状数组）
[题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=5877 [题目大意] 给出一棵带权有根树,询问有几对存在祖先关系的点对满足权值相乘小于等于k. [题 ...
- 10491 - Cows and Cars
描述:要么全选择牛,要么选择一辆车和p-1头牛,那么剩下n+m-p道门可以选择,求选择p道门以后要选择到车的概率 #include <cstdio> int main() { //freo ...
- OpenGL 4 : 一个漂亮的心 For you, My Love
画一个心形有非常多公式能够使用,以下这个公式我觉得最完美了: float x = R * 16 * pow(sin(theta), 3); float y = R * (13 * cos(theta) ...
- C++之static_cast, dynamic_cast, const_cast
转自:http://www.cnblogs.com/chio/archive/2007/07/18/822389.html 首先回顾一下C++类型转换: C++类型转换分为:隐式类型转换和显式类型转换 ...
- jQuery的hover()方法（笔记）
因为mouseover和mouseout经常一起写,所以出现了hover() hover(function(){},function(){});第一个参数为鼠标移入运行的函数,第二个为鼠标离开运行的函 ...
- If the server requires more time, try increasing the timeout in the server editor
双击服务器,在overview下的Timeouts中的Start选项,改成10000或者较大就可以了.防止服务器自启动频繁.
- JavaBean组件在JSP文档中的应用
Bean: package cn.donghaua.bean; public class StringBean { private String message = "No message ...
- fitnesse 中各类fit fixture的python实现
虽然网上都说slim效率很高,无奈找不到支持python的方法,继续用pyfit 1 Column Fixture 特点:行表格展现形式,一条测试用例对应一行数据 Wiki !define COMMA ...
- javamail发送二进制流附件的问题
最近做个邮件发送功能,要内嵌图片并有附件. 需求很奇怪,图片和附件文件是放在ftp服务器上的,查了下javamail的文档. 添加附件方法如下 MimeBodyPart messageBodyPart ...
- SMTP 553
当邮件使用SMTP协议 身份认证时,如果出现 javax.mail.AuthenticationFailedException: 535 5.7.3 Authentication unsuccessf ...