2015-06-29 3 views
0

Я искал способ интегрировать слайд-меню на свой сайт, но не смог с различными плагинами javascript (я совершенно новый для веб-дизайна). Кажется, я не могу заставить это работать правильно. Недавно я опубликовал о боковом меню, которое закончилось тем, что работало, но было пустое на экране телефона. Теперь я пытаюсь удачи в mmenu на http://mmenu.frebsite.nl/examples.html Я опубликовал свой html ниже и пытался исправить его на целый день и все еще не может заставить его работать! Вы можете увидеть, что в данный момент отображается на веб-сайте здесь http://jpst.it/zQtFmmenu slide out menu not working

<!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> 

ответ

0

Есть несколько вещей неправильно с вашим кодом и без ваших таблиц стилей, я не могу быть уверен, что ваша проблема, но я считаю вашу проблему начинается с того факта, что вы не включили jQuery, когда вы включаете файл javascript mmenu. Так переключение линий в коде:

<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> 

Это должно быть достаточно, чтобы сделать его функциональным, но не забудьте включить символ # в вашем JavaScript, когда вы ссылку на идентификаторы. Кроме того, помните свои полуколоны в конце всех ваших утверждений javascript.