パソコン画面用の超かんたん!!お手軽ハンバーガーメニュー ①

この記事を表示すると、ヘッダー右端にハンバーガーメニューが表示されています。

JPNSTYLE II と合いそうなので、作ってみました。

操作してみるとわかりますが、クリックで開閉するハンバーガーメニューではなく、マウスのホバーで開くだけの「なんちゃって」なハンバーガーメニューです。

基本的には CSS をコピペするだけでこのメニューを作ることができますので、ヘッダーまわりをすっきりさせたい方はお試しください。

手順① Header Navigation メニューを作成

ハンバーガーボタンとして使うメニュー項目のナビゲーションラベルに <i class="fas fa-bars"></i> と入力して、URL の入力欄を空にしておく。

ハンバーガーメニューに表示したいものは 副項目 として追加しておく。

Header Navigation メニュー

手順② CSS を追加

以下の CSS を追加する。

.gMenu_name .fa-bars {
font-size: 30px;
width: 40px;
height: 40px;
}
.gMenu>li:before {
border-bottom: none;
}
.gMenu>li:hover .fa-bars:before {
content: "\f00d";
}

補足 なんちゃってハンバーガーメニューということで、遊び心でマウスホバー時に × に切り替わるようにしてありますが、実際に使う場合は最後の content: "\f00d";opacity: 0.7; にした方がいいでしょう。

関連記事