[CSS]テキストの可変に対応したシンプルでスタイリッシュなパンくず
テキストの量の変化に対応したシンプルでスタイリッシュなパンくずを実装するスタイルシートをAce Infoway Indiaから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <ul id="breadcrumbs"> <li><a href="#">Home</a></li> <li><a href="#">Main Lavel</a></li> <li><a href="#">Sub Lavel</a></li> <li><a href="#">Sub sub Lavel</a></li> <li>Your Current page</li> </ul> </textarea>
[CSS]スタイルシートで実装するドロップダウン型のナビゲーション
スタイルシートで実装するドロップダウン型のナビゲーションをJanko At Warp Speedから紹介します。
[CSS]特定の範囲からはみ出さないドロップダウン型ナビゲーションを実装するスタイルシート | コリス
ドロップダウンするパネルが特定の範囲から左右にはみ出さないナビゲーションを実装するスタイルシートをCSSplayから紹介します。 Any width dropdown/flyout menu with left and right dropdown/flyouts v2 demo デモではドロップダウンするパネルが、通常（2, 3番目）は左端を基準に展開しますが、一番右の（6番目）ははみ出してしまうので右端を基準に展開します。 また、配下もキャプチャのように特定の範囲内に表示されます。 対応ブラウザはIE5.5/6/7/8, Fx, Op, Safari(PC), Chromeで、IE8はIE7エミュレーションモードの必要はないとのことです。
[CSS]数が多くても同じ領域に表示するアコーディオン型のナビゲーション
第二階層の項目の数が多くても、同じ高さで表示する垂直方向のアコーディオン型のナビゲーションのスタイルシートをCSSplayから紹介します。 Vertical concertina scrolling menu ナビゲーションの子の数が少ない場合はブランク、数が多い場合はスクロールを使用して表示します。 ライセンスは、個人サイトではコピーライトの明記、商用サイトでは寄付をしてほしい、とのことです。 確保するスペースが一定という利点はありますが、ちょっと操作がしにくいです。
オンラインで高性能なナビゲーションが作成できる -My CSS Menu
My CSS Menuは、多段階層に対応したドロップダウン型やアコーディオン型や面白いエフェクトがある高性能なナビゲーションを作成できるオンラインサービスです。 My CSS Menu ナビゲーションはブラウザでの表示を確認しながらラベルや項目数、デザインなどのカスタマイズが可能で、HTMLやCSSの知識が無くても簡単にできると思います。 下のパネルには変更履歴が表示され、undo機能も備えています。 カスタマイズ画面のキャプチャ ラベルを日本語にするのも簡単で、クリックで変更箇所を指定しテキストボックスに日本語を入力するだけで適用されます。 ダウンロードはファイルの保存を選択すると、HTML, JavaScript, CSSが表示されるのでコピーして使用することができます。 ナビゲーションのデザインは現在２２種類あり、下記にいくつか紹介します。
[CSS]パネルがスライドするデザインのドロップダウン型のナビゲーション
CSSplayから、ナビゲーションのサブカテゴリのパネルがスライドするデザインのドロップダウン型のナビゲーションを紹介します。 Dropdown with horizontal sliding sub menu titles 慣れないせいか違和感をちょっと感じましたが、アイデアとしては面白いと思いました。 子が開くときは、親がグレーアウトするといいのかな、うーん、ちょっとおかしいか。 対応ブラウザは、IE6, 7, Fx, Safari(PC), Op,Chromeとなっています。 ナビゲーションの各項目はリスト要素でテキストデータになっており、IE6対策にドロップダウンの箇所にtableを使用しています。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]半透明のパネルを使ったドロップダウン型ナビゲーションのスタイルシート
[CSS]スクリプト無しで、ナビゲーションの背景全体を変更するスタイルシート
[CSS]クロスブラウザ対応、ドロップダウン型ナビゲーションのフリーのテンプレート集 -LWIS.NET
[CSS]スタイルシートで実装するナビゲーション集 -CSS Menus | コリス
[CSS]補足情報などの表示に便利なアコーディオン型ナビゲーション
[CSS]本棚をモチーフにした多段型ドロップダウンのナビゲーション
[CSS]スクリプト無しで実装する、アコーディオン型のナビゲーション