かるみに

趣味とともに生きる

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

f:id:trrun:20170228231638p:plain

こんにちは。すーく(@sytry7)です。前回に引き続き、今回は左からスライドして現れるメニューバーを作成しました。最近色々な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="#">カテゴリ1</a></li>
    <li><a href="#">カテゴリ2</a></li>
    <li><a href="#">カテゴリ3</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>
<!--プロフィールここまで-->

動きがあるとブログがオシャレになる

最近のWEBサイトは、装飾の少ないシンプルなデザインが流行しています。フラットデザインと呼ばれているデザインですね。

そのため今まで静的なデザインが中心だったページが、アニメーションなどを導入した動きのあるデザインへと変わってきているそうです。こういう動きがあるWEBサイトっていいですよね。