英文 | https://niemvuilaptrinh.medium.com/30-sidebar-examples-in-web-development-84d89432dfbe

翻译 | 杨小爱

在之前的内容中，我也曾分享过一些关于专题练习某项功能与效果的练习实例文章，如果错过的朋友，可以点击以下内容进行阅读。

11个网站开发与设计中的社交媒体分享按钮的案例

30个 CSS Javascript 加载器动画效果练习案例

34 个练习 Javascript CSS 实现网站选项卡标签的案例

今天，分享的内容是侧边栏练习案例，侧边栏是网页的一部分，可以轻松放置导航或显示链接 一些重要信息可帮助客户轻松找到。此外，它还改善了站点的可用区域。

现在，让我们看看侧边栏吧。

01、CSS侧边栏

Demo地址：https://codepen.io/plavookac/pen/qomrMw

02、CSS侧边栏菜单

Demo地址：https://codepen.io/Twikito/pen/zGdqVO

03、JavaScript侧边栏导航

Demo地址：https://codepen.io/CiTA/pen/bgjKKE

04、JQuery侧边栏菜单

Demo地址：https://codepen.io/tonkec/pen/gryZmg

05、侧边栏引导程序

Demo地址：https://codepen.io/Xeoncross/pen/zxyWeW

06、CSS侧边栏过渡

Demo地址：https://codepen.io/kyunwang/pen/zNOoxb

07、CSS3 JavaScript侧边栏动画

Demo地址：https://codepen.io/foxeisen/pen/YgEwbK

08、响应式侧边栏引导程序

Demo地址：https://codepen.io/rcauchon/pen/yQJKpr

09、JavaScript侧边栏

Demo地址：https://codepen.io/Siddharth11/pen/vNEEZp

10、Bootstrap侧边栏菜单

Demo地址：https://codepen.io/migli/pen/dJZQxZ

11、扁平的CSS侧边栏

Demo地址：https://codepen.io/maziarzamani/pen/eJKGvj

12、Bootstrap侧边栏折叠菜单

Demo地址：https://codepen.io/goodywebs/pen/ouhiH

13、侧边栏平滑过渡

Demo地址：https://codepen.io/tonkec/pen/qbRmxZ

14、带有SVG的侧边栏

Demo地址：https://codepen.io/magnificode/pen/bdWYwy

15、HTML5侧边栏

Demo地址：https://codepen.io/rizkykurniawanritonga/pen/sqcAn

16、CSS悬停侧边栏

Demo地址：https://codepen.io/tdevine33/pen/CnDyv

17、CSS固定侧边栏

Demo地址：https://codepen.io/vincebrown/pen/yyLNPR

18、CSS透明侧边栏

Demo地址：https://codepen.io/mambroz/pen/rdFfx

19、CSS左侧边栏

Demo地址：https://codepen.io/ryanmorr/pen/ZGXLXd

20、HTML5 CSS3响应式侧边栏

Demo地址：https://codepen.io/wideckop/pen/ZOgOPq

21、CSS折叠侧边栏

Demo地址：https://codepen.io/seanfree/pen/EgQRwg

22、JavaScript实现的Twitter侧边栏

Demo地址：https://codepen.io/aaroniker/pen/rNMWYXb

23、侧边栏明暗模式

Demo地址：https://codepen.io/ryanparag/pen/gZEbOq

以上就是今天分享的23个侧边栏导航案例的练习，希望对您有所帮助。

最后，感谢您的阅读。

译者注：原本这个英文原文是有30个案例的，因为最后7个都是通过Bootstrap插件来完成的，并且里面有的插件还是需要付费的，所以就没有加进来作为案例练习了。

学习更多技能

请点击下方公众号