Webサイトにおいて、ヘッダーメニューはユーザーの回遊性や使いやすさを左右する重要なUIパーツです。
特に近年では、
- スマホ対応
- ハンバーガーメニュー
- sticky header
- hoverアニメーション
- glassmorphismデザイン
など、デザイン性と機能性を兼ね備えたヘッダーメニューが多く採用されています。
そこで本記事では、コピペするだけで実装できるヘッダーメニューを紹介します。
HTML・CSS・JavaScriptを貼り付けるだけで利用できるため、
- ブログ
- ポートフォリオサイト
- ランディングページ（LP）
- コーポレートサイト
- Webデザイン学習
など、さまざまな用途で活用できます。
また、できるだけシンプルなコードを採用しているため、初心者でも導入しやすい構成になっています。
さらに、レスポンシブ対応を前提としているので、PCだけでなくスマートフォンやタブレットでも快適に利用できます。
そのため、これからWeb制作を始める方はもちろん、短時間で高品質なUIを実装したい方にもおすすめです。
ヘッダーメニューとは？
ヘッダーメニューとは、サイト上部に配置されるナビゲーションメニューのことです。
ユーザーが目的のページへスムーズに移動できるようにする役割があり、サイト全体の使いやすさに大きく影響します。
たとえば、以下のような項目が配置されるケースが一般的です。
- ホーム
- サービス
- 料金
- 会社概要
- お問い合わせ
また、スマートフォンでは表示スペースが限られるため、ハンバーガーメニューが採用されることも少なくありません。
今回作成するヘッダーメニューの特徴
今回紹介するヘッダーメニューには、次のような特徴があります。
- レスポンシブ対応
- スマホでハンバーガーメニュー表示
- シンプルなデザイン
- 軽量なJavaScript
- カスタマイズしやすい構造
さらに、コード量も少ないため、既存サイトへの組み込みも簡単です。
完成イメージ
今回作成するヘッダーメニューは、PCでは横並びのナビゲーションを表示し、スマートフォンではハンバーガーボタンからメニューを開閉できる仕様です。
そのため、どのデバイスでも快適な操作性を実現できます。
それでは実際にコードを見ていきましょう。
①シンプル・定番のheader
See the Pen メニュー① by にろりーろ (@ibuki-kyougoku) on CodePen.
②おしゃれ・洗練系のheader
See the Pen ヘッダーメニュー by にろりーろ (@ibuki-kyougoku) on CodePen.
③高級感・ラグジュアリー系のheader
See the Pen ヘッダー by にろりーろ (@ibuki-kyougoku) on CodePen.
④IT・Web制作系のheader
See the Pen ヘッダー by にろりーろ (@ibuki-kyougoku) on CodePen.
⑤美容・サロン系のheader
See the Pen ヘッダー by にろりーろ (@ibuki-kyougoku) on CodePen.
⑤採用サイト系
See the Pen ヘッダー by にろりーろ (@ibuki-kyougoku) on CodePen.
