[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>
タブUI詳解
タブUIの構造や特長、設置の判断、ユーザビリティ、アクセシビリティ、実装のポイントや機能の拡張方法、実装例やスクリプト例をSmashing Magazineから紹介します。 Module Tabs in Web Design 以下、その意訳です。 ※原文では「タブモジュール」となっていますが、タブモジュールやタブUIと記載すると煩雑になるため、「タブ」と略します。 タブのみを指す場合は、「タブ コントロール」としています。 はじめに 1. タブの構造 2. タブはいつ使用するのか 3. タブのユーザビリティとベストプラクティス 4. タブのアクセシビリティ 5. タブの拡張 6. タブの実装集 7. タブを実装するためのチュートリアル集 8. タブを実装するスクリプト集 はじめに タブモジュールは複数のコンテンツを異なるパネルに配置したユーザインターフェースのデザインパターンです。 パネル
滑らかにアニメーション動作してナビゲーションにも使えそうな1KBのアコーディオンＵＩ:phpspot開発日誌
Horizontal JavaScript Accordion 1kb - Web Development Blog 滑らかにアニメーション動作してナビゲーションにも使えそうな1KBのアコーディオンＵＩ 次のように、マウスをあわせると、ホバーした部分がビヨーンとアニメーションしながら伸びるＵＩ実装用のサンプルが公開されています。 設置手順がすごくシンプルです (1) HTMLを定義します <ul id="sm" class="sm"> <li><img src="images/1.gif" alt="" /></li> <li><img src="images/2.gif" alt="" /></li> <li><img src="images/3.gif" alt="" /></li> <li><img src="images/4.gif" alt="" /></li> </ul> (2
SmoothMenu
Updated: April 1st, 16' (v3.02): Fixed Chrome desktop falsely reporting as touch enabled, requiring clicking on menu items to drop down. Description: Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair. And that's a good thing given the important role of this element in any site. The menu's contents can either be from dire
[CSS]Hack無しで実装する、中央に配置するタブ型ナビゲーション | コリス
Matthew James Taylorのエントリーから、リスト要素でマークアップしたタブ型ナビゲーションを中央に配置するスタイルシートの紹介です。 <textarea name="code" class="html" cols="60" rows="5"> <div id="centeredmenu"> <ul> <li><a href="#">Tab one</a></li> <li><a href="#" class="active">Tab two</a></li> <li><a href="#">Tab three</a></li> <li><a href="#">Tab four</a></li> </ul> </div> </textarea>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]ナビゲーションの区切り線をホバー時にすっきりさせるスタイルシート
[CSS]パネルの情報を整理したドロップダウンを実装するスタイルシート
