Webサイトで重要なUIパーツのひとつが「メニュー」です。
特に最近は、
- スマホ対応
- hoverアニメーション
- glassmorphism
- ハンバーガーメニュー
- sticky header
など、見た目と使いやすさを両立したUIデザインが増えています。
この記事では、コピペですぐ使えるメニューコードをまとめています。
HTML・CSS・JavaScriptを貼り付けるだけで実装できるので、
- ブログ
- ポートフォリオ
- LP
- コーポレートサイト
- UIデザイン練習
にもおすすめです。
初心者でも使いやすいように、
できるだけシンプルなコードで紹介していきます。
①シンプル・定番の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.
