コピペで使えるレスポンシブメニュー

練習＆実務で作ったレスポンシブなヘッダーメニューを紹介します。

コピペですぐに使えるので雛型としても便利かも ;)

シンプルでアレンジ万能

PCでは右上にサブメニューを表示。

グローバルメニューはマウスオンで中央からシュイーンと下線が広がる動きをつけています。

このサイトのグローバルメニューでも使っている動きですね。

余計な装飾がないのでとてもシンプルです〜。

スマホではメニュー内にサブメニューを表示。

ハンバーガーメニューのボタンクリックで、ふわっとメニューが表示されます。

ボタンは認識されやすいように枠＆影をつけてます。

ソースとデモはこちら↓

※ PC版を見るには「EDIT ON CODEPEN」をクリックしてください。

Sticky Header

スクロールするとヘッダーが上部にくっつくスティッキーヘッダーです。

かっこいいサイトでよく見かけますよね。

ヘッダーがくっつくと同時に、大きく表示されたロゴがシュッと小さくなります。

スマホでは省スペースのために最初からくっついてます。

ベンダープレフィックスは省略されているので必要に応じてつけてくださいね。

ソースとデモはこちら↓

※ PC版を見るには「EDIT ON CODEPEN」をクリックしてください。

スライドして表示されるメニュー

PCでは常に左側にメニューを表示。

スマホではボタンクリックでメニューが左からスライドして出てきます。

メニューはマウスオンで下線＆矢印。

ソースとデモはこちら↓

※ PC版を見るには「EDIT ON CODEPEN」をクリックしてください。

コーディングの詳細＆説明は、追々追記します :)