スーダラブルース

雑多な日々のぶるーす(音楽・映画・本など)です!前のブログから引越し中

無料はてなブログ ハンバーガーボタン実装!

f:id:isao2:20190130205139p:plain      f:id:isao2:20190130205208p:plain

↑ 完成図

 

最近よく見かけるハンバーガーボタンを押すと、

フルスクリーンで表示されるメニュー。

 

「このブログのスマホ版 (無料版) でも導入したい!!」と思いまして、実装してみました!

ハンバーガーボタン部分の参考サイト

 

www.nxworld.net

 

1、実装方法

注意:レスポンシブではなく、スマホ版デザイン(無料版)を適用しています。

 

下記のコードを管理画面の「設定」→「詳細設定」→「headに要素を追加」の部分に下記コードをコピペしてください。

 

<!-- ハンバーガー フルスクリーンMENU -->
<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(){   var html = '<div id="overlay">';
html += '<ul>';
html += '<li><a href="http://sudara-bluse.hatenablog.com/">TOPページへ</a></li>';
html += '<li><a href="http://sudara-bluse.hatenablog.com/archive/category/%E3%82%B3%E3%83%A9%E3%83%A0">カテゴリー名1</a></li>';
html += '<li><a href="http://sudara-bluse.hatenablog.com/archive/category/Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3">カテゴリー名2</a></li>';
html += '<li><a href="http://sudara-bluse.hatenablog.com/archive/category/%E6%9B%B2%E3%81%AE%E6%84%9F%E6%83%B3">カテゴリー名3</a></li>';
html += '<li><a href="http://sudara-bluse.hatenablog.com/archive/category/Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3">カテゴリー名4</a></li>';
html += '</ul></div>';
html += '<a class="menu-trigger" href="#"><span></span><span></span><span></span></a>';
$("body").prepend(html);

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


<!-- ここから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%;
}
#overlay ul li a:hover{
background:none;
}
</style>
<!-- /ハンバーガー フルスクリーンMENU -->

 

 以上です! 

「トップページのURL」、

「カテゴリー名」とhref=""の中の「URL」はそれぞれ各自のブログのものに変更してください!""が消えないように注意!

以上です。

バックアップをとって作業しましょう!

 

Q1、パソコン版にも使用したい。

 

jQueryの部分を下記に変更してください!

(<style>〜</style>以外の部分)

動作は確認済みですが、

それぞれのテーマに合わせCSSの微調整が必要かもしれません、、、

 

 

<!-- ハンバーガー フルスクリーンMENU -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){   var html = '<div id="overlay">';
html += '<ul>';
html += '<li><a href="http://sudara-bluse.hatenablog.com/">TOPページへ</a></li>';
html += '<li><a href="http://sudara-bluse.hatenablog.com/archive/category/%E3%82%B3%E3%83%A9%E3%83%A0">カテゴリー名1</a></li>';
html += '<li><a href="http://sudara-bluse.hatenablog.com/archive/category/Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3">カテゴリー名2</a></li>';
html += '<li><a href="http://sudara-bluse.hatenablog.com/archive/category/%E6%9B%B2%E3%81%AE%E6%84%9F%E6%83%B3">カテゴリー名3</a></li>';
html += '<li><a href="http://sudara-bluse.hatenablog.com/archive/category/Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3">カテゴリー名4</a></li>';
html += '</ul></div>';
html += '<a class="menu-trigger" href="#"><span></span><span></span><span></span></a>';
$("body").prepend(html);

$('.menu-trigger').on('click', function() {
$(this).toggleClass('active');
$("#overlay").fadeToggle();
return false;
});
}); </script>
<!-- ハンバーガー フルスクリーンMENU -->

以上です〜

このブログでも近々実装予定