一番しっくりきたハンバーガーメニューサンプル(Jquery)



ハンバーガーメニューはCSSだけで、プラグインでなどなど色々紹介されてますね

好みとしては、なんだかんだシンプルな記述でスムーズな動きをしてくれるJqueryのslideToggle()がやっぱりいいですね

コードが簡潔に済むので気楽にメニューをサイトに導入できるのが魅力

html
<div id="menu-btn" >MENU</div>
<div id="menus">
<p>LIST</p>
<p>LIST</p>
<p>LIST</p>
<p>LIST</p>
<p>LIST</p>
<p>LIST</p>
</div>
css
*{
  text-decoration:none;
}
#menu-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width:60px;
  height:60px;
  font-size:1em;
  color:#fff;
  background:#000;
}

#menus{
  display:none;
}

#menus p{
  border-bottom:solid 1px #000;
}
Jquery
$( "#menu-btn" ).click(function() {
$( "#menus").slideToggle("slow");
});




閉じる時もメニューボタンでは使い勝手が悪すぎるので範囲外(背景)タップでのクローズややクローズボタンなんかを実装しなくてはですね

メニューボタンの方はslideToggle()で良いですが、閉じる用の背景がタップされた時は表示・非表示が逆転してしまう可能性を避けてslideUp()とfadeOut()を利用しました

z-indexで重なりをメニュー本体>背景>コンテンツになる様にして完了ですかね

See the Pen 一番しっくりきたハンバーガーメニューサンプル2 by yochans (@yochans) on CodePen.



  • このエントリーをはてなブックマークに追加

0 件のコメント :

コメントを投稿