全画面を覆うようなフルスクリーンのメニューはメニュー数が少ない時や、ランディングページなどにも使い勝手が良いと思います。
そんなフルスクリーンメニューを４つご紹介。

The post コピペでできる！cssとhtmlのみで作るフルスクリーンメニュー4選 first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

フロントだけでなく、管理画面でも活躍する左メニューですが、メニューの数が多くなった時などすっきり見せるなら、スライドメニューがオススメです。
ホバーでシュッと横から出てくるスライドメニューの１階層、２階層ものを２種ずつご紹介します。

アイコンはfontawesomeを使用しています。

Font Awesome, the iconic font and CSS toolkit

Font Awesome, the iconic font and CSS framework……

fontawesome.com

ホームページを見る

The post コピペでできる！cssとhtmlのみで作るスライドメニュー4選 first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

ハンバーガーメニューはちょいちょい使いますが、ホバー時のアクションがいつも同じものの使い回しになってませんか？
基本的な「×（バツ）」に切り替わるものからちょっと可愛いアクションや「！（エクスクラメーション）」に変わるものまで集めました。
イメージに合わせてアクションも切り替えてみてはいかがでしょう？

The post コピペでできる！cssとhtmlのみで作るハンバーガーメニューのアクション12選 first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

クリックすると横から出てくるメニューです。
１個目は、PC/スマホどちらも同じ動きをしていますが、
2,3個目はPCは通常の横並びメニューでスマホでハンバーガーメニューのアイコンが出てクリックするとメニューが横から表示されます。

1個目の左から出てくるバージョンが欲しいとの声がありましたので追記します。

The post コピペでできる！cssとhtmlのみで作るクリックすると横から出てくるメニュー first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

画面の左や右などに固定設置されたソーシャルリンクのボタンタイプをご紹介。
よく見かけるあのボタンを押すとピロピロッと隠れたソーシャルリンクが出てくるアレです。
固定する場所に「position: relative;」の設定が必要ですのでご注意ください。

The post コピペでできる！cssとhtmlのみのクリックでソーシャルリンクが出てくるボタン first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

画面の左や右などに固定設置されたソーシャルリンクの帯タイプをご紹介。
よく見かけるあのホバーするとピロっとリンク名などが出てくるアレです。
固定する場所に「position: relative;」の設定が必要ですのでご注意ください。

The post コピペでできる！cssとhtmlのみで作る画面固定されたソーシャルリンクメニュー7種 first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

cssとhtmlのみで作るメニューパーツです。
シンプルなものからちょっと凝ったものまで集めました。

The post コピペでできる！cssとhtmlのみで作るメニュー first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

cssとhtmlのみで作るアコーディオンメニューです。
メニューに使える<li>リストタグで作るものと、長文のテキストなどを入れ込んでもカスタマイズが面倒でないものをピックアップ。
基本構造は、<input>タグを利用しています。
input typeを「radio」にすればクリック時にアクティブになっていないものを閉じることができ、
input typeを「checkbox」にすれば他をクリックしても開いたままにできます。

The post コピペでできる！cssとhtmlのみで作るアコーディオンメニュー first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.