構築中の Web サイトに sidr を使用しようとしています。
Web サイトは、スクロール可能な 1 つの長いページで構成されています。3 つのアンカー div が含まれており、2 番目のアンカーに読み込まれるため、上下にスクロールできます。これまでのところうまくいきますが、sidr メニューを実装しようとすると (3 つの異なるテキストを表示する必要があり、テキスト 1 はアンカー div 1 にあるボタンで開きます)、最も単純なバージョンを取得することさえできませんWeb サイトからサンプル コードをコピーしても機能しません。
これが私が今持っているものです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Konijntjes TEST</TITLE>
<script>
$(document).ready(function() {
$('#menu1').sidr({
name: 'menu1',
side: 'left' // By default
});
$('#menu2').sidr({
name: 'menu2',
side: 'right'
});
$('#menu3').sidr({
name: 'menu3',
side: 'left'
});
});
</script>
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css">
</head>
<body onload="moveWindow()">
<!-- Include jQuery -->
<script src="javascripts/jquery.js"></script>
<!-- Include the Sidr JS -->
<script src="javascripts/sidr/jquery.sidr.min.js"></script>
<script type="text/javascript" language="javascript">
function moveWindow (){window.location.hash="mylocation";}
</script>
<div class="container">
<!--- PAGE 2 --->
<div class="page2">
<h1>Deel 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Aliquam aliquet diam at erat aliquet malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<a id="menu1" href="#menu1">Menu 1</a>
<div id="sidr 2">
<!-- Your content -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
</div>
</div>
<!--- PAGE 1 --->
<a name="mylocation"><div class="page1"><div class="pagecontainer">
<h1>This should be the beginning.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Aliquam aliquet diam at erat aliquet malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Aliquam aliquet diam at erat aliquet malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<a id="menu2" href="#menu2">Menu 2</a>
<div id="sidr 1">
<!-- Your content -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
</div>
</div>
</div>
</div></a>
<!--- PAGE 3 --->
<div class="page3">
<h1>Deel 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas sed arcu ac ante convallis aliquam eu nec libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec euismod odio erat, a suscipit elit luctus sed. Aliquam aliquet diam at erat aliquet malesuada. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<a id="menu3" href="#menu3">Menu 3</a>
<div id="sidr 3">
<!-- Your content -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris gravida aliquam odio. Duis elementum nisl vel libero molestie, in varius nisi venenatis. Maecenas se</p>
</div>
</div>
</div>
</div>
</body>
</html>
そして、これは私が持っている css と、別の文書の sidr css です。
body {
font-family: verdana;
line-height: 1.2em;
font-size:1.1em;
}
p { width: 100%;
}
.container {
margin: 0px auto;
width: 800px;
}
h1 {
padding-bottom: 2em;
}
.pagecontainer {
padding-top:9.8em;
padding-bottom:10.2em;
}
.page1 {
padding-top:2em;
}
.page2 {
padding-top:2em;
}
.page3 {
padding-top:2em;
padding-bottom: 3em;
}
私は何を間違っていますか？私は JavaScript を初めて使用するので、スクリプトをすべて適切な場所にロードしたかどうかわかりません。