April 19th, 2007

一种新颖的导航结构

Category: CSS, Author: Nicky, Popularity: 11%

The Tabbed Breadcrumb Navigation
导航的设计在网页设计中是比较重要的，我看一个 blog 的设计首先就看它的导航，导航在外观上可以做到千变万化，但结构大多数是不变的。常见的有 2 种导航结构，一种是 Tab 菜单式，就像 WordPress 后台那样，优点是能清晰看到目录层次，缺点是不利于构建多层结构，大多数使用这种结构的都只有 2 层；另外一种就是树型或下拉菜单式，就像 Habari 后台那样，它的优缺点正好和上面的相反。这里介绍的 Tab 式位置导航变体 结构，是不是综合了他们的优点，而且做出来的 demo 效果也是一级棒。

说白了这种就是 Tab 式结构加上一个下拉菜单，目前这种结构在 Yahoo 中大量使用，如：Yahoo! Food、Yahoo! Sports、Yahoo! TV，我还在 Launchpad 上发现了这种结构。雅虎的网页设计一直是国内众门户模仿的对象，就像新版 Yahoo! 首页一样，还在测试中就被迅雷拿去了，忽然一夜间，很多国内门户网站都变得可以拖动和变色了，还有设计人材济济的 QQ ，现在都还把老雅虎的布局用得沾沾自喜。

Yahoo! TV Navigation
Yahoo! TV Navigation

Yahoo! Food Navigation
Yahoo! Food Navigation

MarketWatch.com Navigation
MarketWatch.com Navigation

Launchpad Navigation
Launchpad Navigation

The Tabbed Breadcrumb Navigation Demo
The Tabbed Breadcrumb Navigation Demo

Tags：, , .
评论数量(8) | Add Comments
本文网址：http://www.osxcn.com/css/the-tabbed-breadcrumb-navigation.html



8 Comments so far

» You can leave a response or Trackback .

  1. Gravatar Icon Xing Says: 2007-04-20 2:41 am

    blog的内容没分那么细， 用不到那么多层>

  2. Gravatar Icon Hengzer Says: 2007-04-20 8:49 am

    不知道这样导航对SEO有没有利.. 关注中…

  3. Gravatar Icon laius Says: 2007-04-20 10:04 am

    前几年就在国外网站看到过这样的形式 有人Yes有人说No

  4. Gravatar Icon Nicky Says: 2007-04-20 11:38 am

    才开始使用这种导航让人有点找不到头脑，感觉乱。

  5. Gravatar Icon underone Says: 2007-04-20 12:18 pm

    有点不适应。。。。。

  6. Gravatar Icon Chisdychan Says: 2007-04-20 9:16 pm

    我觉得不错，能上重点。

  7. Gravatar Icon Nicky Says: 2007-04-21 12:37 am

    能上重点 ??

  8. Gravatar Icon ayu2007 Says: 2007-06-11 11:48 pm

    怎么不提供demo下载地址.
    可惜.

leave a reply