Question

我一直在寻找一种方法将幻灯片菜单集成到我的网站中，但是各种javascript插件都失败了（我对网页设计很陌生）。我似乎无法使其正常工作。我最近发布了一个侧面菜单，最终工作但在手机屏幕上是空白的。现在我在http://mmenu.frebsite.nl/examples.html的mmenu试试运气我已经在下面发布了我的html并且一直试图将它修复一整天，但仍然无法让它工作！您可以在此处查看网站上显示的内容http://jpst.it/zQtF

<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.1/css/jquery.mmenu.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.1/js/jquery.mmenu.min.js"></script>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
         jQuery(document).ready(function( $ ) {
            $("#menu").mmenu({});
            var API = $("menu").data("mmenu")

            $("menu-button").click(function() {
                API.open();
         });
    });
  </script>
</head>
<body>
    <div class="container">
      <div class="header">
         <div class="logo"></div>
         <button id="menu-button"><a href="#menu">menu</a></button>
</div>    
    <div class="content">
         <div class="posts">1</div>
         <div class="posts">2</div>
         <div class="posts">3</div>
         <div class="posts">4</div>
         <div class="posts">5</div>
    </div>
    <div class="footer">asdfafdsasfsdasfad</div>
    </div>
     <nav id="menu">
         <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About us</a>
               <ul>
                  <li><a href="/about/history">History</a></li>
                  <li><a href="/about/team">The team</a></li>
                  <li><a href="/about/address">Our address</a></li>
               </ul>
            </li>
            <li><a href="/contact">Contact</a></li>
         </ul>
      </nav>
</body>
</html>

Answer 1

您的代码有一些问题，没有您的样式表我不能确定您的问题是什么，但我相信您的问题始于您在包含mmenu javascript时未包含jQuery的事实文件。所以切换代码中的行：

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.1/css/jquery.mmenu.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.3.1/js/jquery.mmenu.min.js"></script>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

这应该足以使其正常运行，但请记住在引用ID时在您的javascript中包含＃符号。同样，请记住所有javascript语句末尾的分号。

mmenu滑出菜单不工作

1 个答案: