[HTML] パンくずリンクについてのまとめと考察
パンくずリンク|パンくずリスト（breadcrumb navigation）はどうコーディングするのが今風なんだろう。 ふとそんなことを思い立ってしまったので、名を知られたサイトのソースを覗き見して考えることにした。 パンくずリンクのデザインについてまとめられたBreadcrumbs In Web Design: Examples And Best Practicesという記事によれば、 よくあるデザインパターンは次の通りである。 1行テキスト テキストを横並びにしただけの伝統的なパンくず。各ページリンクの間に区切り文字が入る。 ページタイトルを > で繋いだもの ページタイトルを > 以外の文字で繋いだもの シンプルなリンクの羅列 区切り文字を入れずに画像やCSSで階層を表現する。 マルチステップ 開始から完了までの行程を表示する。 サブナビゲーションつき 各ページリンクに属するページを
![[HTML] パンくずリンクについてのまとめと考察](https://cdn-ak-scissors.b.st-hatena.com/image/square/d43d21ea93cda04d99f538309d396c15d2b3bb3f/height=288;version=1;width=512/http%3A%2F%2Ftenderfeel.xsrv.jp%2Fwtn%2Fwp-content%2Fuploads%2F2010%2F12%2Fdelicious.png)
45 jQuery Navigation Plugins and Tutorials - noupe
By Paul Andrew As many of us know, the initial 15-20 seconds of a new user's visit to a web site will have a large impact on whether on not they are going to like or dislike the site, prompting them to decide whether they will stay or go. This means it's vital that you follow usability rules with common design practices and layout your site, especially the navigation, in a style that the user can
キッチン・システムキッチン | TOYO KITCHEN STYLE | トーヨーキッチンスタイル
ABOUT US 「住む」をエンターテインメント キッチンは調理をするだけのものではなく、 生活を豊かにする場所であってほしい。 私たちはキッチンを中心に 住宅すべてのインテリアまでご提案します。
nanapi [ナナピ] に学ぶナビゲーション設計 〜カテゴリとタグの見せ方〜｜withComputer
数年前に「日本語でケアナビ」プロジェクトに加わったことをきっかけに、「カテゴリとタグというナビゲーション要素をどう扱うか」は僕の問題意識のひとつになっています。で、１月ちょっと前に公開され話題になったライフレシピ提供サイト nanapi [ナナピ] のナビゲーションは、この問題に対するひとつの解を示しているように思いました。せっかくなので考えたことを以下まとめてみます。 カテゴリという（階層構造も含む）分類の仕方は、サイト利用者の多くがスムーズに理解できる一般的な概念といえるのですが、タグという概念の認知度はまだまだ「Webに詳しい人は知っている」の域を出ていないのではないかと思います。タグという属性のラベルを使い、複数のタグを使って「AかつB」という条件でモノを絞り込んでいく手法は、とても便利で面白いものです。でも知らない人にとっては、タグを用いたナビゲーションは難しいものに映るのが現状
![nanapi [ナナピ] に学ぶナビゲーション設計 〜カテゴリとタグの見せ方〜｜withComputer](https://cdn-ak-scissors.b.st-hatena.com/image/square/6bfac3b933cc6d724ac32a64f3bcd1b289ae1176/height=288;version=1;width=512/http%3A%2F%2Fwithcomputer.jp%2Fthemes%2Fwc%2Fimages%2Ffacebook%2Fogp200.png)
Bridge Word
This shop will be powered by Are you the store owner? Log in here
パンくず詳解 | コリス
パンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイント、クラシックなものや進化したパンくずのショーケースなどをSmashing Magazineから紹介します。 Breadcrumbs In Web Design 以下、その意訳です。 パンくず ナビゲーションは、大量のページを保持するウェブサイトで、ナビゲーション機能を拡張することができます。 パンくずの大きな有用性は、ウェブサイトの訪問者が上の階層に移動する際、少ないアクションで実現させることです。 このことはウェブサイトのセクションやページのファインダビリティ（見つけやすさ）を改善するものとなります。 また、ランディングページ（検索などから訪れた最初のページ）にも非常に効果的で、ユーザーの現在の場所を明示するだけでなく、文脈のヒントとなるインフォメーションも提供します。 What is a bre
ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集:phpspot開発日誌
25 jQuery Plugins for Navigation ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集。 階層メニュー、タブ、ツリーやページャにいたるまで、ナビゲーション部分に使えるjQueryプラグイン集25種がまとまっていました。 jQuery (mb)Menu クールなアイコン付階層メニュー BDC Drilldown Menu (iPod Style) iPod風ドリルダウンメニュー jBreadCrumb 動くパンくずリスト Treeview そのまんまツリービュー jQuery Full Width Navigation Widthを指定のサイズにあわせる jQuery Nested Tabs タブ内タブというネストが可能なプラグイン FastFind Menu クールなメニュー実装 jQuery Pagination Pagerを実装 全部見る 最近
[JS]ナビゲーションの背景画像をアニメーションさせるスクリプト
Snook.caのエントリーから、「ナビゲーション画像にアニメーションのエフェクトをつける -CSS Sprite2」のように、ナビゲーションの背景画像にさまざまなアニメーション効果つけるスクリプトを紹介します。 Using jQuery for Background Image Animations デモ デモでは、上下のアニメーション、左右のアニメーション、フェードのアニメーションがあります。 スクリプトにはjQueryがメインに使用されており、それぞれのアニメーションは下記のように記述されています。 「#a」は上下、「#b」は左右、「#c, #d」はフェード。 <textarea name="code" class="js" cols="60" rows="5"> $(function(){ $('#a a') .css( {backgroundPosition: "-20px 35
jQueryやCSSを使ったナビゲーションメニュー300選 – creamu
かっこいいナビゲーションメニューをさくっと実装したい。 そんなあなたにおすすめなのが、『300+ Jquery, CSS, MooTools and JS navigation menus』。jQueryやCSSを使ったナビゲーションメニュー300選だ。 以下にいくつかご紹介。 » Fancy menu かっこいいナビゲーションメニュー » Amazing apple style navigation menu Appleのサイトのようなナビゲーションメニューの作り方。↑のキャプチャはこちら » jQuery idTabs 8つのクールなjQueryメニュー » navigation-3 プルダウンメニューなど4つの例 » block-navigation CSSデザインのメニュー9選 その他のリストは以下から。 » 300+ Jquery, CSS, MooTools and JS na
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IA Wiki
マウスオーバーをデザインする | DesignWalker
ナビゲーション・メニューまとめ - DesignWalker