Sidr具有不同内容的多个菜单

时间：2013-07-19 13:39:59

标签： javascript jquery html css menu

我正在尝试将sidr用于我正在建设的网站。

该网站包含一个可滚动的长页面。它包含3个锚点div并在第二个锚点上加载，以便您可以向上和向下滚动。 到目前为止，这是有效的，但是当我尝试实现sidr菜单时（我需要显示3个不同的文本，文本1打开，其中一个按钮位于锚div 1中，等等）但我甚至无法获得最简单的版本工作，甚至当我从网站上复制示例代码时都没有。

这就是我现在所拥有的; 

        <!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的新手，所以我不确定是否在所有正确的位置加载脚本。

1 个答案:

答案 0 :(得分：2)

您在两个不同的位置关闭了太多div元素（2个开始标记的3个结束标记）。此外，script标记按照您放置的顺序解析，这意味着如果您在实际加载此功能的代码之前调用.sidr()函数，它将无效！ / p>

您正在以错误的方式定位.sidr()菜单元素：您告诉链接是菜单本身！以下是正确启动.sidr()的方法：

$('#myLink').sidr({
    name: 'TheTargettedContainerWhichWillBecomeTheHiddenSidrMenu',
    side: 'left' /* Pretty self explanatory */  
});

Live Demo

HTML 

<!DOCTYPE HTML>
<html>
    <head>
        <title>Konijntjes TEST</title>
        <link rel="stylesheet" href="style.css" type="text/css">
        <link rel="stylesheet" href="javascripts/sidr/stylesheets/jquery.sidr.dark.css">
        <!-- 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">
            function moveWindow() {
                window.location.hash = "mylocation";
            }
        </script>
        <script>
            $(document).ready(function() {
                $('#menu1').sidr({
                    name: 'page1',
                    side: 'left' // By default
                });
                $('#menu2').sidr({
                    name: 'page2',
                    side: 'right'
                });

                $('#menu3').sidr({
                    name: 'page3',
                    side: 'left'
                });
            });
        </script>
    </head>
    <body onload="moveWindow()">
        <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>
            </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>
    </body>
</html>
相关问题
最新问题