HTML
CSS
jQuery
はてなブログ

ハンバーガーボタンのフルスクリーンMENUを自力で実装してみた。(はてなブログで)

jQueryプラグイン「jQuery fatNav」のような
フルスクリーンのハンバーガーメニューを作ってみたくて半自力で実装してみました。

DEMO

http://sudara-bluse.hatenablog.com/entry/2017/10/03/115231

はてなブログ 無料版スマホ版デザイン ハンバーガーボタンでフルスクリーンMENUを実装してみた。

完成図

スマホ
ファイル名 ファイル名

PC
ファイル名

まずはHTMLを記述。

hoge.html
<div id="overlay">
    <ul>
        <li><a href="#">TOPページへ</a></li>
        <li><a href="#">メニュー1</a></li>
        <li><a href="#">メニュー2</a></li>
        <li><a href="#">メニュー3</a></li>
    </ul>
</div>
<a class="menu-trigger" href="#"><span></span><span></span><span></span></a>

次はCSSを記述!ハンバーガーボタンもCSSで実装!

ボタンはこちらを参考にさせていただきました! 動きが可愛いしすごい!
CSSで実装するハンバーガーメニュークリック時のエフェクト 10+

style.css
<style>
.menu-trigger,
.menu-trigger span {
 display: inline-block;
 transition: all .4s;
 box-sizing: border-box;
}
.menu-trigger {
 position: fixed;
 /*bottom: 20px;
 right: 20px;*/
 top: 65px;
 right: 14px;
 width: 60px;
 height: 60px;
 z-index: 9999;
 background: rgba(0,0,0,0.6);
 border-radius: 4px;
}
a.menu-trigger:hover{
background: rgba(0,0,0,0.5);
}
.menu-trigger span {
 position: absolute;
 z-index: 9999;
 left: 8px;
 width: 75%;
 height: 4px;
 background-color: #fff;
 border-radius: 4px;
}
.menu-trigger span:nth-of-type(1) {
 top: 9px;
}
.menu-trigger span:nth-of-type(2) {
 top: 28px;
}
.menu-trigger span:nth-of-type(3) {
 bottom: 9px;
}
.menu-trigger.active span:nth-of-type(1) {
 -webkit-transform: translateY(20px) rotate(-45deg);
 transform: translateY(19px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
 opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
 -webkit-transform: translateY(-20px) rotate(45deg);
 transform: translateY(-20px) rotate(45deg);
}
#overlay{
 display: none;
 width: 100%;
 height:100%;
 text-align: center;
 position: fixed;
 top: 0;
 z-index: 100;
 background: rgba(0,0,0,0.8);
 padding: 20px;
 box-sizing: border-box;
}
#overlay ul{
 padding-left: 0px;
}
#overlay ul li{
 padding-left: 0px;
 list-style-type: none;
 margin-top: 50px;
}
#overlay ul li a{
 color: #fff;
 text-decoration: none;
 font-size: 150%;
}
</style>

最後にjQueryです。

iPhone、Androidのみ表示版

hoge.js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
var ua = navigator.userAgent;
if (ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) {
 $(function(){

     $('.menu-trigger').on('click', function() {
         $(this).toggleClass('active');
         $("#overlay").fadeToggle();
         return false;
     });
 });
} // if sp
</script>

PCも含め全デバイス表示版(レスポンシブ)

hoge.js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
 $(function(){
     $('.menu-trigger').on('click', function() {
         $(this).toggleClass('active');
         $("#overlay").fadeToggle();
         return false;
     });
 });
</script>

CSSは各自微調整してください!
以上です!