Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

[CSS] Sticky (Fixed) SideNav Layout with CSS – CSSを使ってフレームのような表現を

  • Pocket
  • このエントリーをはてなブックマークに追加

CSSを使って、メニューバー固定のフレームのような表現をするというTips記事。昔よくありましたよね、サイドメニューが固定でコンテンツエリアだけがスクローラブルなサイト。今それをやると「えぇっ!?」って話になっちゃいますが、機能面を見ればあれはあれで使いやすいインターフェースだと思います。スクロールするとJSで追従してくるというUIもよく見かけるし。んでこの記事では、CSSだけを使ってサイドメニューを固定してます。デモはこちらから。スクロールすると右側のコンテンツエリアだけが動いて、左側のメニューバーは固定されてます。JSを使った表現のように動きこそありませんが、実用的で手堅い見せ方ですね。特に縦方向にページが長くなりがちなサイトに有効のような気がします。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください