ナビゲーションメニューをおしゃれにするCSSスニペット15選。横並び、縦並び、二段組・・・
横並び、縦並び、２段組、レスポンシブなど多数！ナビゲーションメニューのCSSサンプルをまとめました。
デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインのメニューは利用者の興味を引き付けます。
横並びメニューは最もスタンダードなメニュー表示方法ですので、実装することも多いと思います。基本の形を中心に、縦並び、二段組、レスポンシブとバリエーションも豊富です。本記事ではフォームの中でも「ナビゲーションメニュー」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。
横並びナビゲーションメニューのCSSデザイン例。2段組3段組、レスポンシブ。
2段組3段組もあり！シンプルな横並びメニュー。
See the Pen
Simple CSS Drop Menu by Paul van Zyl (@pushplaybang)
on CodePen.
非常にシンプルな横並びメニューです。しかも段無し、サブメニュー、2段サブメニュー、3段サブメニューと、様々なデザインパターンが用意されています。
メニューのデザインを考える上で非常に参考になります。
シンプル横並びメニューでレスポンシブ対応。スマホビューでは縦並びメニューに変化。
See the Pen
Pure CSS Menu Navigation by Izzy Skye (@chrysokitty)
on CodePen.
ホバーで色が変わるだけのシンプルな横並びメニューです。レスポンシブ対応で、スマホビューでは縦並びメニューに変化します。
デザインに奇抜さはありませんが、実装するメニューに必要な要素が揃っているサンプルです。
デザイン重視の1段のみ横並びメニュー①
See the Pen
Untitled by Lars Moelleken (@voku)
on CodePen.
こちらはホバーでメニュー文字が回転するスタイリッシュな横並びメニュー。
サブメニューはないのでメニュー選択肢が少なく、デザイン性を重視したい人向け。
デザイン重視の1段のみ横並びメニュー②
See the Pen
Lavalamp CSS Menu by Patak (@Patak)
on CodePen.
ホバーで背景色が移動するように変化していきます。
スタイリッシュな横並びメニューで、デザインをカッコよくしたい人向けです。
ホバーでサブメニューが看板のように表示されるサンプル
See the Pen
CSS Swinging Panel Menu by Seth Abbott (@sethabbott)
on CodePen.
一見、シンプルな横並びメニューですが、ホバーするとサブメニューが看板のような形で表示されるアニメーション付き。
割とよくありがちなデザインで、流行的には少し古い表現ですが、基本系のメニューに少し動きを加えたい場合などに最適です。
縦並びナビゲーションメニューのCSSデザイン例。
シンプルな縦並びナビゲーションメニュー
See the Pen
Animated Menu Active Item Indicator by Sheelah Brennan (@sheelah)
on CodePen.
縦並びタイプのナビゲーションメニューです。
クリックするとメニュー文字の大きさが大きくなり、サイドのバーが移動するだけですが、これだけでも美しいです。
アイコンのアニメーションが可愛らしい横並びメニュー。
See the Pen
Pure CSS3 Vertical menu with nice hover effect by Jitendra (@berdejitendra)
on CodePen.
メニューをホバーすると、アイコンがクルっと回転すると同時に、メニュー背景色が伸びるアニメーションをします。
よくありがちな動作ですが、うまく組み合わせることでカッコイイ動きになっており素晴らしいですね。
シンプル＆スタイリッシュな縦並びナビゲーションメニュー
See the Pen
Vertical icons sidebar navigation with tooltips by nikhil (@nikhil)
on CodePen.
メニューを選択状態にすると背景色が変わり、ホバーでメニュー名が表示されます。
メニュー名の表示非表示とアイコンの反転のみのアニメーションですが、総合的に非常にスタイリッシュです。
アイコンで機能の意味が表現できるならば、場所を取らないのでスペースを有効活用したい場合に良いですね。
メニュー全体が隠れるタイプの縦並びメニュー
See the Pen
Material Design Vertical Tabs by james (@jamesmfbrown)
on CodePen.
左側のメニューをホバーすると、メニュー全体が現れるタイプの縦並びメニューです。
こちらのデザインサンプルも場所を取らないです。また、メニュー全体が表示されるので、アイコンで機能の意味がわからなくとも、とりあえずメニューを出せば機能を選択できるのが利点です。
タブ型の縦並びメニュー
See the Pen
Clickable CSS menu by Ondřej Bárta (@bartaxyz)
on CodePen.
タブ型の縦並びメニューです。
選択したメニューとcontentエリアの背景色が同化するので、一体感のあるメニューデザインです。
デザイン重視！奇抜な見た目・動きが面白いナビゲーションメニュー。
メニューの背景色が動く横並びメニュー。
See the Pen
CSS Menu Concept (Clip-path) by Charlie Marcotte (@FUGU22)
on CodePen.
メニューの背景色になっている物体が何やらうごめいてます。ホバーすると伸びるような動きを見せてくれます。
ちょっとした遊び心が面白いメニューデザインです。
ページをめくるようなアニメーションをする縦並びメニュー。
See the Pen
One Page Navigation CSS Menu by Alberto Hrtzt (@hrtzt)
on CodePen.
メニューをクリックすると、ページをめくるような動作でコンテンツが現れます。
背景に1枚目の画像が解像度を落としたようなデザインで残っていて、メニュー切り替え時に見えるのが印象的。非常にスタイリッシュです。
スライダータイプの縦並びメニュー①。
See the Pen
Pure CSS One page vertical navigation by Alberto Hrtzt (@hrtzt)
on CodePen.
よくあるスライダーのデザインですが、左にメニュー表示することで、縦並びメニューとして使うこともできるデザインサンプルです。
関連性や連続性のある内容をメニューで切り分けたい場合に使えるテクニックです。
スライダータイプの縦並びメニュー②。
See the Pen
Single-Page Navigation by Sarah Wulf (@slwulf)
on CodePen.
こちらもスライダータイプの縦並びメニュー。
デザイン的によりメニューっぽくなっています。
コンテンツが左からスライドで現れる。
See the Pen
One page css menu by Jappe (@jappe)
on CodePen.
メニューはアイコンのみのシンプルな縦並びメニューですが、クリックするとコンテンツが左から流れるように表示されます。
右のコンテンツ部の背景が見えたままで、上に重なった部分のみが動くので、一体感のあるデザインに仕上がってます。
ウェブサイトのフォームをおしゃれにするCSSスニペットシリーズ記事一覧
フォームの各入力要素のスニペットはシリーズ記事化していますので、こちらの記事も参考にしてください。
https://kodocode.net/design-css-textbox/
