jQuery mmenu根本不工作

我試圖使用我的手機網站的jquery mmenu，但它根本不工作。菜單圖標未顯示。這裏是我的網站的精簡版。感謝您的幫助。jQuery mmenu根本不工作

<!doctype html> 
<html > 
<head> 
    <link href="../imagesCA/favicon.ico" rel="shortcut icon"> 
    <title>title</title> 
    <script src="../slideMenu/jquery.js" type="text/javascript"></script> 
    <script src="../slideMenu/jquery.mmenu.min.js" type="text/javascript"></script> 
    <link href="../slideMenu/jquery.mmenu.css" type="text/css" rel="stylesheet" /> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#menu").mmenu({}); 
     }); 
    </script> 
</head> 
<body> 
    <nav id="menu"> 
     <ul> 
      <li><a href="home.php">Home</a></li> 
      <li><a href="link_1.php">link 1</a></li> 
      <li><a href="link_2.php">link 2</a></li> 
     </ul> 
    </nav> 
    <div id="content"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed facilisis libero. 
     Nunc egestas neque luctus quam ultrices blandit a eleifend risus. Morbi vulputate, 
     sem at congue tincidunt, augue nisl imperdiet metus, non maximus velit velit ut lacus. 
     Aenean ullamcorper, lectus id sollicitudin sollicitudin, augue justo vestibulum nisl, 
    </div> 
</body>

來源

2015-04-24 Paulcraey

是什麼控制檯說？ – wahwahwah

好像你必須自己增加一個菜單按鈕打開菜單。我沒有閱讀所有的文檔，所以也許有一個選項可以做到這一點。

這似乎工作，雖然：

$(document).ready(function() { 
 
    var mmenu = $("#menu").mmenu({}).data('mmenu'); 
 
    $('a').click(function(ev) { 
 
    ev.preventDefault(); 
 
    mmenu.open(); 
 
    }); 
 
});

#content { 
 
    background: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://mmenu.frebsite.nl/mmenu/js/jquery.mmenu.min.all.js"></script> 
 
<link href="http://mmenu.frebsite.nl/mmenu/css/jquery.mmenu.all.css" rel="stylesheet" /> 
 

 

 

 
<nav id="menu"> 
 
    <ul> 
 
    <li><a href="home.php">Home</a> 
 
    </li> 
 
    <li><a href="link_1.php">link 1</a> 
 
    </li> 
 
    <li><a href="link_2.php">link 2</a> 
 
    </li> 
 
    </ul> 
 
</nav> 
 
<div id="content"> 
 
    <a href="">MENU</a> 
 
    <br/> 
 
    <br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed facilisis libero. Nunc egestas neque luctus quam ultrices blandit a eleifend risus. Morbi vulputate, sem at congue tincidunt, augue nisl imperdiet metus, non maximus velit velit ut lacus. 
 
    Aenean ullamcorper, lectus id sollicitudin sollicitudin, augue justo vestibulum nisl, 
 
</div>

來源

2015-04-24 18:09:58 Andy

非常感謝。實際的3格菜單圖標由CSS生成。在網站的源代碼中，我看到菜單按鈕是一個名爲「hamburger」的元素。所以我從那裏繼續。這個「漢堡包」的東西在教程中沒有提及，甚至沒有在下載的css文件中！所以我通過在他們的網站上「反向工程」源代碼來獲得它。

<!doctype html> 
<html > 
<head> 
    <link href="../imagesCA/favicon.ico" rel="shortcut icon"> 
    <title>title</title> 
    <link href="../css-CA/boilerplate.css" 
type="text/css" rel="stylesheet" /> 
    <link href="../css-CA/stijlMobielCA.css" 
type="text/css" rel="stylesheet"/> 
    <script src="../slideMenu/jquery.js" type="text/javascript"></script> 
    <script src="../slideMenu/jquery.mmenu.min.all.js" 
type="text/javascript"></script> 
    <link href="../slideMenu/jquery.mmenu.all.css" 
type="text/css"rel="stylesheet" /> 
    <script>$(document).ready(function() { 
var mmenu = $("#menu").mmenu({"slidingSubmenus": false, 
       "extensions": [ 
         "effect-slide", 
         "effect-zoom-menu", 
         "pageshadow" 
       ]}).data('mmenu'); 
$('a').click(function(ev) { 
ev.preventDefault(); 
mmenu.open(); 
}); 
}); 
    </script> 
</head> 
<body>

在CCS文件添加此：

#hamburger 
{ 
box-sizing: border-box; 
display: block; 
width: 70px; 
height: 45px; 
position: fixed; 
top: 10px; 
left: 0; 
z-index: 4; 
    color: black; 
} 
#hamburger:before, 
#hamburger:after, 
#hamburger span 
{ 
background: #000; 
content: ''; 
display: block; 
width: 30px; 
height: 5px; 
position: absolute; 
left: 20px; 
} 
#hamburger:before 
{ 
top: 10px; 
} 
#hamburger span 
{ 
top: 20px; 
} 
#hamburger:after 
{ 
top: 30px; 
} 

/* Hamburger animation */ 
#hamburger:before, 
#hamburger:after, 
#hamburger span 
{ 
-webkit-transition: none 0.5s ease 0.5s; 
transition: none 0.5s ease 0.5s; 

-webkit-transition-property: transform, top, bottom, left, opacity; 
transition-property: transform, top, bottom, left, opacity; 
} 
    <nav id="menu"> 
     <ul> 
      <li><a href="home.php">Home</a></li> 
      <li><a href="link_1.php">link 1</a></li> 
      <li><a href="link_2.php">link 2</a></li> 
     </ul> 
    </nav> 
    <div id="content"> 
     <a id="hamburger" class="Fixed" href="#menu"><span></span></a> 
     <!--   <a href="">MENU</a>--> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed facilisis libero. 
     Nunc egestas neque luctus quam ultrices blandit a eleifend risus. Morbi vulputate, 
     sem at congue tincidunt, augue nisl imperdiet metus, non maximus velit velit ut lacus. 
     Aenean ullamcorper, lectus id sollicitudin sollicitudin, augue justo vestibulum nisl, 
    </div> 
</body>

來源

2015-04-25 08:49:19 Paulcraey

jQuery mmenu根本不工作

回答

相關問題