html框架如何实现左边为导航栏,右边为连接页面,代码写出来_随笔

1、首先打开Deamweaver8，新建一网页文件，接着输入以下导航菜单的内容。

2、此时对应效果如图。

3、接下来准备相关的导航按钮图片（可以事先利用PS制作好）。

4、然后将以下CSS代码加入到<head></head>之间。

5、网页此时的效果如图，就完成了。

这个可以通过绝对定位，配合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

希望能解决你的问题

欢迎分享，转载请注明来源：内存溢出

html框架如何实现左边为导航栏,右边为连接页面,代码写出来