模拟这个做的 不过实现的没有别人那么好
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{ /* 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'); }); }