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