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

スマートフォン向けのメニューバーを作りました。リンク数は変更出来ます。

 完成予想図

 Menuボタンをタップすると、子カテゴリのメニューが現れます。

コードの貼り付け先

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

貼り付けるCSSコード

  <div class="toggleBtn">
    <span class="hatenaToggleBtn"><i class="blogicon blogicon-reorder"></i> Menu</span> 
  <ul class="menuToggle"> 
<!--↓名前とURLを変更してください-->
    <li><a href="#"><i class="blogicon blogicon-user"></i> プロフィール</a></li> 
    <li><a href="#"><i class="blogicon blogicon-good"></i> 人気記事</a></li> 
    <li><a href="#">リンク２</a></li> 
    <li><a href="#">リンク３</a></li> 
<!--↑名前とURLを変更してください-->
  </ul>
  </div>

<style>
.toggleBtn{
    width: 100%;
   background:radial-gradient(#4A4A4A,#2B2B2B);/*メニューの色*/
   padding:5px 0;
}

.hatenaToggleBtn{
 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);/*メニューボタンの色*/
}
.hatenaToggleBtn:hover{
  opacity:0.8;  
}

.menuToggle{
  margin-top:3px;
 margin-left:-40px; 
  display:none;

}

.menuToggle 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);
  color:white;/*文字色*/
}
.menuToggle a{
    text-decoration:none;
  color:white;
  }
.menuToggle li:hover{
  opacity:0.8;  
}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$(".hatenaToggleBtn").click(function(){
  $(this).next().slideToggle(100);
});
});
</script>

<!--名前とURLを変更してください-->

ここで囲まれた部分のURLと名前は自由に変更できます。

    <li><a href="#">リンク３</a></li> 

 メニューの数は<li>を続くようにコピペすることで増やすことが出来ます。

メニューの色を変更したい場合

メニューの色はグラデーションを設定しています。どこの色を変えるといいのかはタグの中に記入しています。グラデーションの色に関してはこちらを参考にしてください。

ios7colors.com

今まで取り組んだカスタマイズの一覧

カスタマイズ カテゴリーの記事一覧 - かるみに