【コピペで楽々】スマートフォン向けのトグルメニューバーのカスタマイズ方法（サイドバー編）

前回に引き続き、今回は左からスライドして現れるメニューバーを作成しました。最近色々なWEBサイトで見かけるやつです。一度に多くの情報を見られるのが良い感じです。

↓前回のトグルメニューバー

www.colmin.xyz

注意！！！
完成予想図
コードの貼り付け先
貼り付けるコード
このカスタマイズはスマートフォンページ向けです
補足
- プロフィール部分削除方法
動きがあるとブログがオシャレになる

注意！！！

広告の上にメニューが重なったり、広告の大部分を隠してしまうことになるためグーグルアドセンスの規約違反となる可能性があります。実装は慎重に行ってください

完成予想図

画面左上のメニューアイコンをタッチするとサイドメニューが現れます。メニューは「×」で閉じられます。

f:id:trrun:20170228225453g:plain

コードの貼り付け先

スマートフォンページのヘッダ→タイトル下に貼り付けてください。

f:id:trrun:20170227185231p:plain

貼り付けるコード

<div id="leftToggle">
<div class="left-menu">
<!--閉じるボタンここから-->
<div class="left-menu-content">
  <div class="left-menu-close"><i class="blogicon blogicon-close"></i></div>
</div>
<!--閉じるボタンここまで-->
<!--プロフィールここから-->
  <div class="left-menu-content left-menu-profile">
    <h3>プロフィール</h3>
  <ul>
    <li>
     <img src="http://placehold.it/100x100"><!--プロフィール画像-->
     <p>【名前】</p><!--プロフィール説明文-->
     <p>プログラミング勉強中だよ</p>
    </li>
  </ul>
</div>
<!--プロフィールここまで-->
<!--コンテンツここから-->
<div class="left-menu-content">
  <h3>コンテンツ</h3>
<ul>
    <li><a href="#">カテゴリ１</a></li>
    <li><a href="#">カテゴリ２</a></li>
    <li><a href="#">カテゴリ３</a></li>
  </ul>
</div>
<!--コンテンツここまで-->
</div>
<span class="left-menuBtn"><i class="blogicon blogicon-reorder"></i></span>
</div>

<!--CSS-->
<style>

html{position:relative;}
#leftToggle{
    width:100%;
    height:100%;
    z-index:100;
    position:fixed;/*メニューボタンを固定*/
    top:0;
    left:0;
    padding:5px;
}

#globalheader-container{display:none;}/*はてなブログのヘッダーメニューを消す*/

.menuSpace{
    background-color:black;
    width:100%;
}
.left-menu{
  display:none;
  width:90%;/*サイドメニューのサイズ*/
  height:100%;
  background-color:rgba(0,0,0,.85);/*サイドバーの背景色*/
  float:left;
  color:white;/*文字色*/
  font-size:13px;/*サイドバーの文字サイズ*/
}
.left-menu-content h3{
  margin-left:10px;
  padding-left:7px;
  font-size:20px;
  border-left:5px solid white;
}
.left-menu ul{
    padding:10px;
}
.left-menu li{
  display:block;
  padding:5px 10px;
  list-style-type:none;
  border-bottom:1px solid rgba(0,0,0,0.2);
  box-shadow:0 1px rgba(255,255,255,0.2);
}
.left-menu a{
 text-decoration:none;
 color:white;
  }
.left-menu a:hover{
  opacity:0.5;  
}
.left-menuBtn{
  font-size:30px;/*メニューボタンのサイズ*/
  float:left;
  margin-left:5px;
  box-shadow:0 0 2px rgba(255,255,255,0.2);
  display:inline-block;
  border-radius:4px;
  padding:3px 5px;
  color:white;
  background:radial-gradient(#4A4A4A,#2B2B2B);/*メニューボタンの色*/
}
.left-menu-close{
    float:right;
    display:inline-block;
    border:1px solid rgba(255,255,255,.7);
    border-radius:4px;
    padding:4px;
    font-size:25px;/*閉じるボタンのサイズ*/
    margin:10px;
}

</style>
<!--jQuery-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$(".left-menuBtn").click(function(){
 $(".left-menu").addClass("active");
 $(".active").animate({width:'toggle'},200);
 $(".left-menuBtn").css("display","none")
});
$(".left-menu-close").click(function(){
 $(".left-menu").addClass("active");
 $(".active").animate({width:'toggle'},200);
 $(".left-menuBtn").css("display","inline-block")
});
  
});
</script>

このカスタマイズはスマートフォンページ向けです

f:id:trrun:20170228232011p:plain

本カスタマイズはスマートフォン向けに調整しています。PCページにも実装は出来ますが、メニューが画面全体に広がってしまいます。申し訳ありませんが、実装の際は調整をお願いします。以下の部分を変更することでサイドバーのサイズが変えられます。

  width:90%;/*サイドメニューのサイズ*/

補足

コンテンツ部分の項目は<li>で囲まれている部分をコピペして増やすことが出来ます。ただ、コンテンツが増えすぎると画面からはみ出てしまいますので、必要に応じてプロフィール部分を削除してください

プロフィール部分削除方法

コード部分の以下の部分を削除するだけでOKです。

<!--プロフィールここから-->
  <div class="left-menu-content left-menu-profile">
    <h3>プロフィール</h3>
  <ul>
    <li>
     <img src="http://placehold.it/100x100"><!--プロフィール画像-->
     <p>【名前】</p><!--プロフィール説明文-->
     <p>プログラミング勉強中だよ</p>
    </li>
  </ul>
</div>
<!--プロフィールここまで-->