レスポンシブにするため、スライドメニュー「Sidr」を実装。注意点
2014年11月17日
Categories | ホームページ
レスポンシブにするため、流行のスライドメニュー「Sidr」を実装してみました。
でも、スライドメニューになりません・・・
何で？？
色々検証して攻略しました。の備忘録です。
参考ページ：http://cosao.net/archives/4937
公式サイト：Sidr [ sidr-package-1.2.1 ]
まず公式サイトから必要ファイルをダウンロードし、htmlファイル（htlm5）に
こう記述した。（公式引用）
<!DOCTYPE html> <html lang="ja"> <head> <!-- Your stuff --> <!-- Include Sidr bundled CSS theme --> <link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css"> </head> <body> <!-- Your stuff --> <!-- Include jQuery --> <script src="javascripts/jquery.js"></script> <!-- Include the Sidr JS --> <script src="javascripts/sidr/jquery.sidr.min.js"></script> </body> </html>
あれ？ダウンロードしたものには、13行目にあるjquery.jsなんて入ってないんだけど。
調べてみても、そのことに触れているページを見つけることが出来ず。
自力で作ってみた。
まずjquery本家ダウンロードに行き、えっ！英語解らないけど、
大体新しいバージョンは数字が大きいものじゃなかろうかと、
Download the compressed, production jQuery 2.1.1をクリックした。
ダダダ～って、英語やら記号が表示されたものを全てコピーし、
始にダウンロードしたjquery.sidr.min.jsを、コピペしたファイル
（jquery.sidr.min – コピー.js）に全て貼り付け、ファイル名をjquery.jsにして保存。
次にhtmlコードを記述。
<a id="simple-menu" href="#sidr">Toggle menu</a>
<div id="sidr">
<!-- Your content -->
<ul>
<li><a href="#&">List 1</a></li>
<li class="active"><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
</ul>
</div>
<script>
$(document).ready(function() {
$('#simple-menu').sidr();
});
</script>
以上で問題なく表示できるはず？、が、当ホムペではうまく表示されないのは何故？
かなり時間を費やしましたが、原因がやっと分かりました。
今までライトボックスでjquery（jquery-1.7.2.min.js）を使っていたので、
それと被っていたからでした。
<script type="text/javascript" src="lightbox/jquery-1.7.2.min.js"></script>
lightboxをやめたら（消したら）無事表示できました！
もしこの手がうまく動作しなかったら、類似した「javascript」が被っていないかを、
再度検証するべし。
