jquery.js

レスポンシブにするため、スライドメニュー「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>