大致思路
左侧：菜单，给每个菜单设置id和onclick点击事件，onclick事件触发的函数假设写为display()
右侧：写个固定样式的div，id假设设置为board。
如果你的菜单内容在服务器
display()的实现如下
function display(){$.ajax({
type: "POST",
url: 菜单所请求的内容地址,
data: this.id等等相关的请求标志,
success: funtion(data){$('board').html(data)},//返回数据填充
dataType: dataType})
}
如果菜单内容写死在页面内
那么右侧：写和菜单数一样多的div，把所有的display属性设置为none
同时display()的实现如下
function display(){$('#'+$(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
希望能解决你的问题
1、首先打开Deamweaver8，新建一网页文件，接着输入以下导航菜单的内容。
2、此时对应效果如图。
3、接下来准备相关的导航按钮图片（可以事先利用PS制作好）。
4、然后将以下CSS代码加入到<head></head>之间。
5、网页此时的效果如图，就完成了。
