您的位置：首页 > Web前端 > CSS

CSS3 transform制作的漂亮的滚动式导航

2014-03-21 22:11 417 查看
模拟这个做的 不过实现的没有别人那么好
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');
});
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航