atitit.导航的实现最佳实践and声明式编程

atitit.导航的实现最佳实践and声明式编程

1. 顶部水平栏导航 1

2. 竖直/侧边栏导航 1

3. 选项卡导航 1

4. 面包屑导航 1

5. 标签导航 1

6. 搜索导航 2

7. 分面/引导导航 2

8. 页脚导航 3

9. 20. 在不同页面上使用同样的导航代码 3

10. 结论大多数网站使用不只一种导航设计模式 3

11. 参考\ 4

1. 顶部水平栏导航

2. 竖直/侧边栏导航

3. 选项卡导航

4. 面包屑导航

作者:: 老哇的爪子 Attilax 艾龙，  EMAIL:1466519819@qq.com

转载请注明来源： http://blog.csdn.net/attilax

5. 标签导航

标签导航

标签经常被用于博客和新闻网站。它们常常被组织成一个标签云，导航项可能按字母顺序排列（通常用不同大小的链接来表示这个标签下有多少内容），或者按流行程度排列。

标签是出色的二级导航而很少用于主导航。他可以提高网站的可发现性和探索性。标签云通常出现在边栏或底部。如果没有标签云，标签则通常包括于文章顶部或底部的元信息中，这种设计让用户更容易找到相似的内容。

6. 搜索导航

出式菜单和下拉菜单导航

7. 分面/引导导航

分面/引导导航（也叫做分面检索或引导检索）最常见于电子商务网站。基本上来说引导导航给你提供额外的内容属性筛选。假设你在浏览一个新的LCD显示器，引导导航可能会列出大小，价格，品牌等选顶。基于这些内容属性，你可以导航到匹配你的条件的项。

引导导航在拥有巨大数量货物的大型电子商务网站中是非常宝贵的。用户通过直接搜索通常很难找到他们想要的东西，并且增加了用户漏掉一个产品的或能性。例如他们可能搜索一个灰褐色的产品，但你可能将它标记了灰色或褐色，虽然它可能就是用户想要的东西。

8. 页脚导航

9. 20. 在不同页面上使用同样的导航代码

许多网页上都有导航菜单，当进入某页时，菜单上相应这一项就应该变灰，而其他页亮起来。一般要实现这个效果，需要写程序或专门为每一页做设计，现在靠CSS就可以实现这个效果。

首先，在导航代码中使用CSS类：

Home

About us

Contact us

然后分别为每一页的Body指定一个id，和上面类同名。如。

然后设计CSS如下：

#home .home, #about .about, #about .about

{

commands for highlighted navigation go here

}

这里，当id设为home时，.home就会起作用，也就是class设为home的那一行导航条就会显示出特殊效果来。其他页也是如此。

10. 结论大多数网站使用不只一种导航设计模式

大多数网站使用不只一种导航设计模式。例如一个网站可能会用顶部水平栏导航作为主导航系统，并使用竖直/侧边栏导航系统来辅助它，同时还用页脚导航 来作冗余，增加页面的便利度。当选择你的导航系统基于的导航设计模式时，你必须选择支持你的信息结构以及网站特性的方案。导航是网站设计的重要部分，它的 效果必须有坚实的基础设计

11. 参考\

在不同页面上使用同样的导航代码_attilax_新浪博客.htm

网站导航设计模式指南（1--6） - 站长之家.htm