スマフォ用のサイドメニュー　スライドメニューの導入方法　jquery.sidr.js

jquery.sidr.min.js

こいつを使う

※追記
class=”simple-menu” href=”#sidr”
とし
出てくるのにも
class=”simple-menu” href=”#sidr”要素を入れて
閉じる

下記だと　IDだから１こしかきかない
http://number333.org/2013/06/14/sidr/
説明

ヘッダー

<link href="/js/css/jquery.sidr.dark.css" rel="stylesheet" type="text/css">
<script src="/js/jquery.sidr.min.js"></script>

<script>
$(document).ready(function() {
  $('.simple-menu').sidr({side: 'right'});
});
</script>

こいつでくくって

 <?php if (is_mobile()) : 
 //モバイルヘッダー
 ?>

<?php endif; ?>

リンクボタン

<a class="simple-menu" href="#sidr"> 
<img src="/img/d_this/moble_menu.jpg" width="120" height="120" alt="モバイルメニュー" />
</a>

実際のコード

<div id="sidr">
  <!-- Your content -->
  <ul>
  <li><a href="/会社概要/">タマツアーバリとは</a></li>
  <li style="text-align:center">現地ツアー</li>
    <?php wp_list_categories('title_li=&depth=1&taxonomy=bali-tours-cat&hide_empty=0'); ?>
    <li style="text-align:center">オプショナルツアー</li>
    <?php wp_list_categories('title_li=&depth=1&taxonomy=bali-optional-tours-cat&hide_empty=0'); ?>
    
<li style="text-align:center">　</li>
 <li><a href="/bali-tours/世界遺産ボロブドゥールへバリから日帰ツアー/">
世界遺産ボロブドゥール</a>
</a></li>
<li>

<li>
<a href="/bali-tours/バリ島空港送迎（デンパサール国際空港）/">
空港送迎
</a>
</li>


<li>
<a href="/bali-tours/ガソリン代込のお得な車チャーター！行動自由で/">
車チャーター
</a>
</li>
<li style="text-align:center">　</li>
<li>
<a href="/bali-tours-voice/">
お客様の声
</a>
</li>



<li style="text-align:center">　</li>
<li><a href="/お問合せ/">お問合せ</a></li>
<li><a href="/会社概要/">会社概要</a></li>
<li><a href="/個人情報の取扱/">個人情報の取扱</a></li>
    
  </ul>
</div>

<script>
$(document).ready(function() {
  $('#simple-menu').sidr({side: 'right'});
});
</script>