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 技术让很多生活中的事物都能搬到网上去,后面的推荐阅读也有很多的效果,感兴趣 ...
随机推荐
- java类的封装、继承、多态
一.封装(encapsulation) 封装性就是把类(对象)的属性和行为结合成一个独立的相同单位,并尽可能隐蔽类(对象)的内部细节,对外形成一个边界,只保留有限的对外接口使之与外部发生联系.封装的特 ...
- GDI+ 对象释放崩溃的问题
确保在Gdiplus::GdiplusShutdown(m_gdiplusToken); 之前delete 掉GDI+的对象,例如:delete *pBitmap; 如果先Gdiplus::Gdipl ...
- MySqlQueryList
//辅助查询列表,或实例 public class MySqlQueryList { #region List<T> ToList<T>(string sql, params ...
- eclipse SVN 安装
1.下载最新的Eclipse,我的版本是3.7.2 indigo(Eclipse IDE for Java EE Developers)版 如果没有安装的请到这里下载安装:http://ecli ...
- poj 2773 Happy 2006 容斥原理+二分
题目链接 容斥原理求第k个与n互质的数. #include <iostream> #include <vector> #include <cstdio> #incl ...
- [转]Swift 简介 - 苹果最新的编程语言
Swift 真的可以说是最新的编程语言了,2014wwdc刚刚发布,下面来了解一下都有哪些特点. 首先感谢原作者,主要内容是借鉴他的,参考链接 http://zh.lucida.me/blog/an- ...
- LintCode-两个字符串是变位词
题目描述: 写出一个函数 anagram(s, t) 去判断两个字符串是否是颠倒字母顺序构成的 样例 给出 s="abcd",t="dcab",返回 true ...
- css为网页顶部和底部都加入背景图
网页背景图是我们常用的功能,一般来说.给网页加一个背景图,只要在网页的body标签中加入css属性就行. 代码如下:<body style="background-image:url( ...
- The process "E:\Qt\4.8.5\bin\qmake.exe" exited with code 2.（不能包含中文路径，qmake够弱智的）
打开某个项目的时候,编译出现类似的错误 21:46:44: The process "E:\Qt\4.8.5\bin\qmake.exe" exited with code 2. ...
- VC中判断指定窗口是否被其他窗口遮挡
本来是想判断当前窗口是否在最前面,无奈办法用尽就是不行,于是想换个思路:判断指定窗口是否被其他窗口遮挡.然后掘网三尺,找到了这个: bool CTestTray2Dlg::IsCoveredByOth ...