大致思路左侧：菜单，给每个菜单设置id和onclick点击事件，onclick事件触发的函数假设写为display()右侧：写个固定样式的div，id假设设置为board。如果你的菜单内容在服务器display()的实现如下functiondisplay(){$.ajax({type:"POST",url:菜单所请求的内容地址,data:this.id等等相关的请求标志,success:funtion(data){$('board').html(data)},//返回数据填充dataType:dataType})
}如果菜单内容写死在页面内那么右侧：写和菜单数一样多的div，把所有的display属性设置为none同时display()的实现如下functiondisplay(){$('#'+$(this).attr('rel')).style.display='block'}以上，伪代码，仅供参考
这个可以通过绝对定位，配合left设置 或者translate去实现left的方法：
比如让class为menu的元素宽为300px，高100%的，设置left为-300px；在这期间可以加一个过渡transition:left 0.3s ...；
然后让class为menu active的元素设置 left设置为0就可以了 ，在这期间可以加一个过渡transition:left 0.3s ...；
然后可以通过Jquery的toggleClass('active')来实现切换
translate
比如让class为menu的元素宽为300px，高100%的，设置left为-300px；在这期间可以加一个过渡transition:left 0.3s ...；
然后让class为menu active的元素设置 transform:translate3d(-300px,0,0) ，在这期间可以加一个过渡transition:left 0.3s ...；
然后可以通过Jquery的toggleClass('active')来实现切换
这个过程中 需要注意 body需要overflow：hidden(不然会有滚动条，可设置overflow-x即可)
left 和 translate 最好用translate ，translate3d可以开启GPU硬件加速，性能会更好，体验会更流畅
我github有类似小组件样式
github： IFmiss
希望能解决你的问题
要实现这个功能其实非常简单，下面的思路希望对你有用。步骤如下：一般WEB开发把页面分成3个模块：header.tpl content.tpl footer.tpl。head和footer一般都是固定不变的，唯一变化的部分是content。你说的菜单应该是header部分的导航部分。例如主页的代码可以这样写：
<html>
<head></head>
<body>
{include file="head.tpl"} <!-- 导航部分 -->
{include file="content.tpl"} <!-- 变化内容 -->
{include file="footer.tpl"} <!-- 版权内容 -->
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）