スーダラぶるーす。(仮)

湘南あたりを転がってる石コロのゆるゆる生きてく軌跡です。音楽、本のレビュー、WEB制作、日々のコラムなど。

【無料版で頑張る!はてなブログカスタマイズ】 コピペでOK。ハンバーガーボタンでフルスクリーンメニュー。

   

f:id:sudara_bluse:20171012213745p:plain   f:id:sudara_bluse:20171012213804p:plain

 

 ↑ 完成図

 

(追記: 10月12日)   

このブログは現在はPC、スマホ共に右上にボタンを表示してます!

 

 

> 実装方法

> パソコン版、レスポンシブにも使用したい。

> ハンバーガーメニューを右下に表示したい

 

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

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

 

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

検索によく出てきたこちらのjQuery fatNavを実装しようとしたのですが、

何故か上手くいかず、、、プラグインではなく自力で実装してみました!

(↑既存のjQueryとの喧嘩が原因...?誰か教えてください。。)

 

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

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、パソコン版、レスポンシブにも使用したい。

f:id:sudara_bluse:20171012212014p:plain

A2、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 -->

 

 

Q3、ハンバーガーメニューを右下に表示したい

f:id:sudara_bluse:20171012164427p:plain

 

A3、CSSの部分、<style>〜〜〜</style>内の下記箇所ポジションの値を

 

 


.menu-trigger {
    bottom: 10px;    /*下から10pxの場所*/
    right: 10px;  /*右端から10pxの場所*/
}

 

のように、お好みで変更してください!

 

以上です!あとはみなさんこうしたい!と思うままにお好きに改造してください! 僕もこれからも思いついたらカスタマイズしたいと思います!

だいぶ改造されてきました!

最新記事のスライドショーとかやりたいな、、、!いらないかな、、

 

 

Qitaにも書きました。

qiita.com

f:id:sudara_bluse:20170930130706p:plain