iPod風の階層的なナビゲーションを実装する面白UIサンプル「ColumNav」
2007年02月23日-
ColumNav is a hierarchical menu implementation utilizing Bill Scott's Yahoo UI Carousel component.
iPod風の階層的なナビゲーションを実装する面白UIサンプル「ColumNav」。
一見、アイコンのついたコンボボックス風UIでiPodライクな次のようなナビゲーションを実装する方法.
ファイルをクリックでファイルを表示し、フォルダをクリックでアニメーションしながら階層を移動します。
動きがなめらかでクールな印象を出すことが出来そうです。まさにiPod風。
Ajaxを使って無制限に階層を辿ることが出来たり、なかなか工夫されているようです。
ソースも次のようにクリーンになるので使いやすそう。
<ul id="basketball-list">
<li>
<a href="http://sports.yahoo.com/nba/">NBA</a>
<ul>
<li>
<a href="">Atlantic</a>
<ul>
<li><a href="http://sports.yahoo.com/nba/teams/bos">Boston Celtics</a></li>
<li><a href="http://sports.yahoo.com/nba/teams/njn">New Jersey Nets</a></li>
<li><a href="http://sports.yahoo.com/nba/teams/nyk">New York Knicks</a></li>
<li><a href="http://sports.yahoo.com/nba/teams/phi">Philadelphia 76ers</a></li>
<li><a href="http://sports.yahoo.com/nba/teams/tor">Toronto Raptors</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="examples/ajax/ncaa/index.xml" rel="ajax">NCAA</a></li>
</ul>
パッと見、どういったところに使うのか迷う部分もあると思いますが、WEB制作などをされている方で、顧客にちょっとした驚きを与えるUIとして実装するとなかなかよさそう。
ファイル階層を辿るような部分のUIにも使えそうです。
最新のブログ記事(新着順)
- くちばしフォント【商用可】
- 小説表紙などに使えそうな商用可なフォント「になロマン」
- 筆で書いたようなカナ書体「筆竹仮名B」
- 無料・商用利用可な丸文字ピクセルフォント「マルミーニャM」
- スペースコブラ風フォント
- Next.jsのVercelから商用利用可能なフリー汎用フォント「Geist Font 」
- 無料で使えるいい感じの日本語フォント「しっぽり太ゴシック」
- CSSのみで実装された500種類のローディングアニメーション「CSS Loaders」
- 画像ホバーで様々なエフェクトをかけられる「Izmir」
- CSSのbox-shadowをGUIで生成できる「CSS Box Shadows Generator」
- 過去のエントリ