网站的布局和导航十分重要，想要兼顾美观简洁的设计又要保障友好的用户体验，使用侧边栏导航会是一种不错的选择。目前，已经有大量的网站摈弃了传统的导航模式，改为使用侧边栏导航，今天小摹精选了其中的30个作为灵感案例，一定会给你带来启发。

第一部分：为什么需要网站侧边栏？

侧边栏其实就是一种比较经典的网站导航设计，它的形式通常为竖向的一列，展示在网站的右侧或者左侧，具体的位置当然是取决于整体的设计。

当我们刚开始学习Web前端时，就对HTML页面的布局特别感兴趣，上一讲《CSS初步介绍》中，讲解了CSS的入门知识，现在我们介绍一下HTML布局的知识。

HTML布局的方案有Table布局、最流行的DIV布局、以及HTML5建议的DIV布局的替代方案。

当HTML内容被浏览器显示时，整个HTML页面对使用者来说，就是一个显示信息与进行操作的界面。我们常常见到和下面类似的界面：

随着现代 CSS 技术的发展，CSS 新特性被越来越多的浏览器所支持，本文主要讲述使用纯 CSS 实现3D导航栏的步骤，并对其中用到的关键样式做一个解析。

1.整体效果

使用HTML+CSS页面布局设计，HTML+CSS+JS网页设计与制作摄影类个人网页，这是一个优质的个人网页制作。

凭借简约的设计风格、精湛的制作工艺，突破与创新的理念。

个人网站、个人博客、个人介绍、摄影作品、图片画廊展示等个人网站的设计与制作。

今天TJ君要给大家分享一个开源的、可自行调节布置的高颜值页面导航项目，Dashy

在前面的章节中，我们介绍了wordpress网站模板开发中，使用wp_list_pages()和wp_list_categories()这2个函数来创建基于page页面的导航菜单和基于分类目录的导航菜单。但是，这2种方式创建出来的菜单不够灵活，基于页面的导航菜单就添加不了分类目录，基于分类目录的导航菜单也添加不了page页面作为菜单。那么，wordpress有没有提供灵活一点的创建导航菜单的方法，能包含page页面、分类目录，甚至其它的选项。答案是肯定的。通过wordpress提供的方法，我们可以为wordpress网站模板创建自定义导航菜单。下面，就随我一起来看看吧。