REDLINE MAGAZINE | jQueryでパンくずをうまくスペースに収めるREDLINE MAGAZINEトップページへ

すべてのエントリを見る

jQueryでパンくずをうまくスペースに収める

jQueryとプラグインを使ってパンくずを限られたスペースにうまく収めるネタ。動きもいい感じ。

>>CompareNetworks jQuery'd Bread Crumb - jBreadCrumb

This collapsible breadcrumb was developed to deal with deeply nested, verbosely named pages.って書いてある通り、深い階層になってて、すごい長い名前が付けられたページのパンくずに対応できるようにって趣旨みたい。

>>サンプルページ

英語だとこのままでいいんかもしれんけど、日本語だとデフォルト指定の状態で隠れてる状態が最初の1文字目の半分くらいしか見えないから、jquery.jBreadCrumb.jsの中の最後のいろいろ指定する部分「previewWidth: 5」になってる部分をちょっと変えないと何のこっちゃ分からない。サンプルでは「25」にしてあります。ここ、マウスカーソルに反応する幅狭いとめっちゃ使いづらいと思った。

あとoverflow: hidden;になってるので、js無効の場合ははみ出してる部分は切れちゃう。この辺りは要注意っつーか代替を何か用意しないパンくず本来の意味がなくなる。

ちなみに同梱されてたjQueryはバージョン1.2.6。1.1.4ではエラーが出て動かなかったです。

が、しかし。私そんな深い階層になるサイト、滅多に作らないや。まぁ・・・いつかデザイン的にどうしても収まらないとか異様にタイトル長いときとか、そんな時のためのネタストックとして覚えておこうっと。

<< Spryの開閉パネルの件 | ここがHTML5なのだ!な点。 >>

トラックバック

このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/231

コメント (3)

これすごいですよね。会社で一瞬話題でした。
使う機会凄くすくなそうですが。

>overflow: hidden;になってる
これはCSSではなくJSでoverflow:hidden;にしてやれば問題ない気もしますがこれだけ長いのだとJSオフのとき崩れないようにデザインするのがしんどいですよね。

うぉ~すげー。
面白れー。
「この手があったか!」って思いました。
flasherの僕としてはこういうのも導入したものを創りたいです。

>slowbirdsさん、こんばんわー。
>これはCSSではなくJSでoverflow:hidden;にしてやれば問題ない気もします
確かにその方がJS無効の対策を考えるのは楽ですねー(n' ω 'n)
もし実際使う時がきたらそうしようw
自分でこの記事書いておきながらこんなことを言うのもおかしいですけど、やっぱり『使える』のが大前提でJS無効の時にパンくずが長くて複数行にまたがったからといってパンくずの機能が果たせるならそれはそれでまた1つのデザインだとも思いますw
>使う機会凄くすくなそうですが。
ですねー。あとこれを面白いって感じてもらえるターゲット層でないと逆に使えないものになっちゃいますね><

>painkillerさん、こんばんわー。
私Flash使えないから羨ましい><
そっち方面もいつかは勉強したいのでその際はpainkillerさんのブログで勉強させてくださいw
web業界にいる限り一生修行中が続くんだろうなぁ(n'ω' `)




※コメント欄に「<」「>」等を含むソースを記載する場合は実体参照に変換してください。

このページの一番上へ

その他の情報など

最近のコメント

PHP オブジェクト指向の勉強
  • Red - 2010.01.08
  • hogepage - 2010.01.21
  • Red - 2010.01.22
  • - 2011.11.27
  • houseiii - 2011.11.27
Fireworks トリミング画像を一括書出 CS4編
  • Iper - 2009.06.27
  • Red - 2009.06.27
  • mala - 2011.11.17
  • Red - 2011.11.18
jQueryでボックスを上下左右中央に簡単配置
overflow を使用したボックス背景のこと
  • - 2007.12.13
  • Red - 2007.12.13
  • - 2007.12.13
  • Red - 2007.12.13
  • hj - 2011.09.23
IE6 → 透過PNG+overflow=混ぜるな危険(追記有)

メッセージを送る

こちらのメッセージ送信フォームは閉鎖させて頂きました。
御用の方は新しい方のブログ にコメント頂くか、 連絡用のフォーム もありますので、そちらからご連絡ください。