[CSS]ビューポートのサイズに合わせてナビゲーションの形状を変更するテクニック

ビューポートのサイズに合わせてスタイルシートを適用するMediaQueriesを利用して、ナビゲーションの形状を変更するテクニックを紹介します。 デモページ：スクリーンサイズが960pxより小さい時の表示 以下は各ポイントを意訳したものです。 実装 これら2つのナビゲーションを実装するには、ul要素とselect要素の2つが必要です。 HTML：Step 1 まずは、nav要素内にul要素とselect要素の2つを記述します。 ※最終形は、異なります。 <nav> <ul> <li><a href="/" class="active">Home</a></li> <li><a href="/collections/all">Books</a></li> <li><a href="/blogs/five-simple-steps-blog">Blog</a></li> <li><a href

[psn]

<ul>を<select>に変更

[warriorking]

(CSS)ビューポートのサイズに合わせてナビゲーションの形状を変更するテクニック | コリス

[kkeisuke]

CSS：MediaQueries

[mura24]

[CSS:Media Queries]

[toaruR]

MediaQueries

[nors]

http://css-tricks.com/13303-convert-menu-to-dropdown/

[tsuki-rs]

これは将来的に実用化されそうな気がする。。

[Donca]

✔ [CSS]ビューポートのサイズに合わせてナビゲーションの形状を変更するテクニック