前端设计:侧面导航栏

时间:2021-11-11 来源:未知网络 作者:996建站网

有很多网站有个侧面导航,平时处于隐藏状态,当你点击了某个按钮,它就从左边滑动出来,当你往左滑动它,它就隐藏了起来。典型的页面有Facebook 和 人人网易以及qq的个人设置页面。下面网易手机端这个页面导航页比较典型。
点击那个左上角图标前,

前端设计:侧面导航栏插图<img data-rawwidth="1242" data-rawheight="912" src="data:image/svg+xml;utf8,” class=”origin_image zh-lightbox-thumb lazy” width=”1242″ data-original=”https://pic2.zhimg.com/2e88dabc857b771e6c34dd664d164a0d_r.jpg” data-actualsrc=”/wp-content/uploads/2021/11/https://www.00996.cn/wp-content/uploads/2021/11/20211111020349-618c7a05b907c.jpg”/>
点击后

前端设计:侧面导航栏插图1<img data-rawwidth="1242" data-rawheight="1041" src="data:image/svg+xml;utf8,” class=”origin_image zh-lightbox-thumb lazy” width=”1242″ data-original=”https://pic2.zhimg.com/8810c490ea676a2b8e3701c5247ee115_r.jpg” data-actualsrc=”/wp-content/uploads/2021/11/https://www.00996.cn/wp-content/uploads/2021/11/20211111020349-618c7a05b907c.jpg”/>
往左滑动可以恢复原样。
总结思路如下,
1.可以设置两个div初始状态隐藏,当点击按钮后第一个fadeIn出来,成为遮罩,第二个从左边滑动出来成为登录的侧边栏。
2.当向左滑动触发后,将遮罩fadeOut隐藏掉,将侧边栏向左滑动隐藏。
3.具体html5 以及css代码如下。

前端设计:侧面导航栏插图2<img data-rawwidth="1242" data-rawheight="609" src="data:image/svg+xml;utf8,” class=”origin_image zh-lightbox-thumb lazy” width=”1242″ data-original=”https://pic4.zhimg.com/3ad3137726396496b1337ffd79ca120f_r.jpg” data-actualsrc=”/wp-content/uploads/2021/11/https://www.00996.cn/wp-content/uploads/2021/11/20211111020349-618c7a05b907c.jpg”/>

前端设计:侧面导航栏插图3<img data-rawwidth="720" data-rawheight="1280" src="data:image/svg+xml;utf8,” class=”origin_image zh-lightbox-thumb lazy” width=”720″ data-original=”https://pic1.zhimg.com/59a92442ecd837cba755f2e33d094a70_r.jpg” data-actualsrc=”/wp-content/uploads/2021/11/https://www.00996.cn/wp-content/uploads/2021/11/20211111020350-618c7a062a6c8.png”/>
4.具体js代码如下

前端设计:侧面导航栏插图4<img data-rawwidth="1242" data-rawheight="1801" src="data:image/svg+xml;utf8,” class=”origin_image zh-lightbox-thumb lazy” width=”1242″ data-original=”https://pic1.zhimg.com/5f5e67ff15840693667799349290f5dc_r.jpg” data-actualsrc=”/wp-content/uploads/2021/11/https://www.00996.cn/wp-content/uploads/2021/11/20211111020349-618c7a05b907c.jpg”/>
5.效果如图点击紫色区域按钮

前端设计:侧面导航栏插图5<img data-rawwidth="777" data-rawheight="1207" src="data:image/svg+xml;utf8,” class=”origin_image zh-lightbox-thumb lazy” width=”777″ data-original=”https://pic3.zhimg.com/8a9fa7f058ad14663f9f7a0962e7f36a_r.jpg” data-actualsrc=”/wp-content/uploads/2021/11/https://www.00996.cn/wp-content/uploads/2021/11/20211111020350-618c7a0695b36.jpg”/>
点击后

前端设计:侧面导航栏插图6<img data-rawwidth="903" data-rawheight="1203" src="data:image/svg+xml;utf8,” class=”origin_image zh-lightbox-thumb lazy” width=”903″ data-original=”https://pic3.zhimg.com/21da9edd4407fe3679899874fe605d5e_r.jpg” data-actualsrc=”/wp-content/uploads/2021/11/https://www.00996.cn/wp-content/uploads/2021/11/20211111020350-618c7a0695b36.jpg”/>
向左滑动蓝色导航页,恢复初始页面样子。好了今天的js实战小效果就到这里。文章适合有一定js html css基础的人。可以作为中级入门。欢迎和我探讨解决思路以及和我一起研究网页前端。本人致力于实现看到的每个网页效果,以上手能用快速出成果为目的。

前端设计:侧面导航栏插图7

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序