侧边栏实在便是一种比较经典的网站导航设计，它的形式常日为竖向的一列，展示在网站的右侧或者左侧，详细的位置当然是取决于整体的设计。
但一样平常来讲，由于视觉习气和用户行为，侧边栏位于左侧更随意马虎第一韶光吸引用户把稳力，因而也能很高效地给用户供应导航；而右侧的侧边栏则常被看做是二级导航，因而可以丰富网站的构造层次。但总体来讲，侧边栏对网站的好处有以下：
● 放置导航菜单以快速勾引访客；
● 突出显示关键信息，例如广告、联系办法或最新；
● 刺激用户进行点击和浏览，降落跳出率，提升转化；
第二部分：30个精良的网站侧边栏设计
1.Anthony j rayburn
Anthony j rayburn的侧边栏位于网站右侧，突出显示了多种信息，包括logo、勾引用户的链接、社交按钮和联系信息，利用了优雅、独特的字体，搭配插画风格的logo，比较精细。
2.Dollyave
Dollyave 是一个展示拍照和音乐作品的在线媒体，整体设计高端大气，利用粗文本作为侧边栏导航，与全体网站的设计融为一体。
3. Grace chuang
Grace chuang是一个作品集单页网站，该网站布局分为三大部分，左侧为带有logo和社交按钮的侧边栏，中央是网站所有者的照片展示，右侧是自我介绍。
4. Kate vass galerie
Kate vass galerie是一家当代在线艺术画廊，为了帮助用户轻松浏览艺术作品，左侧的侧边栏展示了详尽的分类。
5. Nice cream
Nicecream 是一家手工冰淇淋生产网站，图文的布局和搭配很好的凸显了网站主题，侧边栏导航位于左侧，勾引用户轻松访问感兴趣的内容。
6. Jasminestar
Jasminestar的侧边栏文本设计比较独特，看起来像一个左旋90°的顶部导航栏，并且利用留白突出显示，还供应了关闭按钮，方便用户以自己喜好的办法浏览页面。
7. Quinntonharris
Quinntonharris是一个非常都雅的个人网站，以大图和笔墨讲述网站主人的生活业绩，侧边栏导航利用圆点，会有垂直翻页的幻灯片的觉得。搭配拍照图片，矩形色块和带有页面序号笔墨，可以让用户始终清晰地知道自己所处的页面位置。
8. Mike kelley
Mikekelley是拍照师Mike的个人网站，利用了比较常规的侧边栏，搭配高清的照片，整体看起来十分清爽。
9. The idle man
The idle man是一家网上商店，首屏利用了大面积的侧边栏展示最脱销的商品和最热门的商品，刺激用户消费。
10. Love billy
Love billy也是利用粗体字作为侧边栏，既可以作为导航来辅导用户，也让全体界面看上去很具有时尚感和个性。
11. Sophie kahn
Sophie kahn是数字艺术家和雕塑家Sophie Kahn创建的艺术网站，页面采取大面积留白，显得非常素雅，更随意马虎表示静态雕塑拍照的表现力。
12. Deanie chen
Deanie chen的侧边栏具有留白、大略、素净的特点，和右侧轮播展示的色彩丰富的大图形成了光鲜比拟。
13. The life church today
The life church today是一个儿童网站，全体设计连同侧边栏都是极简风格，但又有活泼的元素冲破沉闷。
14. Mathieu stern
Mathieu stern是一个记录拍照和电影的网站，它的侧边栏具有两个层次构造，可以更好地勾引用户。
15. Charliewaite
Charliewaite是由设计师Charlie Waite创建的个人网站，他利用了大尺寸的侧边栏，展示了自我介绍、设计按钮以及问候语。
16. Niche pod
为了让界面更清爽，Niche pod的侧边栏是隐蔽起来的，只留下一个图标，点击即可查看。
17. Cccog
Cccog的侧边栏白色字体和玄色背景形成光鲜比拟，高亮度的白色笔墨和这种暗色系的网站设计非常搭配。
18. Dylan perlot
Dylan perlot展示了不计其数的时装拍照作品，它的侧边栏在左侧，多个导航下还具有下拉菜单，方便用户更好定位。
19. Thomas defert
Thomas defert利用了非常详细的侧边栏展示了该网站的艺术作品。
20. Goltz group
Goltzgroup的侧边栏具有少许透明的效果，缓和了和整体界面的分割。
更多网站侧边栏设计
21. Intechnic
Intechnic具有纯文天职列的侧边栏，还有关闭选项。
22. Wiggs photo
Wiggs photo的侧边栏集Logo和导航于一体。
23. Pedron the world
Pedron the world的侧边栏不足“侧”，首页位于页面正中。
其他页面侧边栏位于左侧，如下图：
24. Gresham smith
Gresham smith具有多级导航的侧边栏。
25. Rose datoc dall
Rose datoc dall利用了缩略图和文本提示展示最新作品的侧边栏。
26. Paul David
Paul David具有非常简洁的侧边栏，没有过多的内容。
27. Cookie and kate
Cookieandkate具有霸占空间比较大的侧边栏，展示了profile，社交联系方希，以及最新推送。
28. Austin kleon
Austinkleon的旁边各有一个侧边栏。
29. Pascal van gemer
Pascalvangemer具有比较经典的侧边栏，位于右侧。
30. Elizabethy lin
Elizabethylin的侧边栏和整体设计融为一体，颜值很高。
第三部分：如何创建侧边栏？
侧边栏比来年更加盛行，但要设计一个好的边栏也并不随意马虎，不仅有很多设计原则，还须要充分考虑网站整体的布局和排版，乃至要考虑网站的性子。这里推举一个YouTube的视频，详细地讲解了如何利用html、css和jQuery创建侧边栏侧边菜单。
https://www.youtube.com/watch?v=zPh0RbYiYGg
但如果你不会开拓，也无大碍，可以利用设计工具制作，然后交付开拓即可。快速呈现侧边栏设计，Mockplus会是一个不错的选择，它封装了大量的组件，个中就有导航栏，直接拖拽即可快速布局，全局查看界面设计，高效确认设计思路。这里有一个之前做过的网站模板，个中包含了侧边栏元素：
此外，利用一些现成的导航模板也是一个不错的方法，推举这30个精良Bootstrap导航模板，用户访问又快又准。
