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オフのとき崩れないようにデザインするのがしんどいですよね。
投稿者: slowbirds | 2009年02月18日 13:30
うぉ~すげー。
面白れー。
「この手があったか!」って思いました。
flasherの僕としてはこういうのも導入したものを創りたいです。
投稿者: painkiller | 2009年02月18日 13:33
>slowbirdsさん、こんばんわー。
>これはCSSではなくJSでoverflow:hidden;にしてやれば問題ない気もします
確かにその方がJS無効の対策を考えるのは楽ですねー(n' ω 'n)
もし実際使う時がきたらそうしようw
自分でこの記事書いておきながらこんなことを言うのもおかしいですけど、やっぱり『使える』のが大前提でJS無効の時にパンくずが長くて複数行にまたがったからといってパンくずの機能が果たせるならそれはそれでまた1つのデザインだとも思いますw
>使う機会凄くすくなそうですが。
ですねー。あとこれを面白いって感じてもらえるターゲット層でないと逆に使えないものになっちゃいますね><
>painkillerさん、こんばんわー。
私Flash使えないから羨ましい><
そっち方面もいつかは勉強したいのでその際はpainkillerさんのブログで勉強させてくださいw
web業界にいる限り一生修行中が続くんだろうなぁ(n'ω' `)
投稿者: Red | 2009年02月18日 20:51