Question

我尝试将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>

Answer 1

好像你必须自己添加菜单按钮才能打开菜单。我还没有阅读所有文档，所以也许可以选择这样做。

这似乎有效：

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

Answer 2

非常感谢。实际的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>

jQuery mmenu根本不工作

2 个答案: