コンテンツがたっぷりつまって使いやすそうなドロップダウンメニュー実装デモ&チュートリアル
2010年10月15日-
スポンサード リンク
How to Build a Kick-Butt CSS3 Mega Drop-Down Menu | Nettuts
コンテンツがたっぷりつまって使いやすそうなドロップダウンメニュー実装デモ&チュートリアル。
ドロップダウンメニューというとテキストリンクだけの羅列をイメージしがちですが、次のようなリッチなドロップダウンを実装するデモです。
ソースのDLが可能なのでカスタマイズして使うことが出来ます。

画像なんかも入ってリッチなドロップダウン。

5カラムから構成される複雑なレイアウトもタブの中に入っちゃいます。

4カラム。シンプルだけどカテゴライズされていて押しやすい。

ドロップダウンメニューの大項目は必要最小限にして、下位でこういう感じに広げれば、基本のシンプルさは保ちつつ、沢山ページのあるサイトであっても比較的迷うことないナビゲーションを実現できるのかも。
関連エントリ
コンテンツがたっぷりつまって使いやすそうなドロップダウンメニュー実装デモ&チュートリアル。
ドロップダウンメニューというとテキストリンクだけの羅列をイメージしがちですが、次のようなリッチなドロップダウンを実装するデモです。
ソースのDLが可能なのでカスタマイズして使うことが出来ます。

画像なんかも入ってリッチなドロップダウン。

5カラムから構成される複雑なレイアウトもタブの中に入っちゃいます。

4カラム。シンプルだけどカテゴライズされていて押しやすい。

ドロップダウンメニューの大項目は必要最小限にして、下位でこういう感じに広げれば、基本のシンプルさは保ちつつ、沢山ページのあるサイトであっても比較的迷うことないナビゲーションを実現できるのかも。
関連エントリ
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- ホバー時にCSSで下線などをアニメーション表示するサンプル
- iPhone, iPad, Mac, Android などのフリーのベクターモックアップ
- macOS用の使いやすいカラーピッカー「pika」
- CSSでボタンにサイバーパンク効果を与えるサンプル
- カラフルな球体をWEB上でうごかすThree.jsをつかったサンプル
- ダークモード対応のミニマルなHTMLページを作れるCSS「spcss」
- CSSのみで実現できるローディングアニメーションやエフェクト集「Css Effects」
- スムーズに横スクロールするレイアウトサンプル
- 斬新なページメニューが作れる「Inline Menu Layout with Gallery Panel」
- 世界中で今何時を計算できる「Spacetime」
- 過去のエントリ