高さが増えてもよい
リンクを見せたまま、入らない分だけ次の行へ送ります。
CSS LAYOUT · RESPONSIVE UI
Responsive Navigation Pattern Lab
幅が足りないとき、ナビをどう見せる？ 4つの実装を同じリンクで比べます。
014 PATTERNS
LIVE NAVIGATION LAB
幅を変えて、ナビの動きを見る
PREVIEW
折り返すナビ
← 620px →幅はスライダーで変更
PAGE CONTENT
Make room for ideas.
上のナビを操作できます。横へ送るパターンでは、リンクの行を実際にスクロールしてください。
幅が足りなくなると、リンクが次の行へ移ります。同じHTMLリンクで比較
02
CHOOSING A PATTERN
必要な振る舞いから選ぶ
1行の高さを保ちたい
横にスクロールさせます。見えないリンクがあることを示します。
均等なタイルにしたい
列数を幅に任せ、各リンクのサイズを揃えます。
小さい幅では隠したい
部品の幅で切り替え、メニューからすべてのリンクを開けるようにします。