かるみに

趣味とともに生きる

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

f:id:trrun:20170227190022p:plain

こんにちは。すーく(@sytry7)です。

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

 完成予想図

f:id:trrun:20170227183941g:plain

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

コードの貼り付け先

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

f:id:trrun:20170227185231p:plain

貼り付ける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="#">リンク2</a></li> <li><a href="#">リンク3</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="#">リンク3</a></li> 

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

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

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

ios7colors.com

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

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