菜单按钮不起作用答案

【问题标题】：mmenu button not working菜单按钮不起作用
【发布时间】：2015-04-01 23:17:09
【问题描述】：

无法显示 mmenu 按钮。我得到一个链接“打开菜单”和“关闭菜单”。没有像教程上那样的图标。已经有一篇关于这个的帖子，但这并没有帮助。我跟着它，得到了我上面所说的结果。

这是我所拥有的：

     <%@ Page Language="vb" AutoEventWireup="false"         CodeBehind="Default.aspx.vb" Inherits="WebApplication1.WebForm1" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>          
        <script type="text/javascript" src="/src/js/jquery.mmenu.min.all.js"></script>
        <link type="text/css" rel="stylesheet" href="/src/css/jquery.mmenu.all.css" />  


        <script type="text/javascript">
            $(document).ready(function () {
                $("#my-menu").mmenu({
                "counters": true, "classes": "mm-light"       
                });

                });
          </script>
       <script type="text/javascript">
           $(document).ready(function () {
               $("#my-menu").mmenu();
               $("#my-button").click(function () {
                $("#my-menu").trigger("open.mm");
            });
        });
</script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#my-menu").mmenu();
            $("#my-button").click(function () {
                $("#my-menu").trigger("close.mm");
            });
        });
</script>

    </head>
    <body>

        <a href="#my-menu">Open the menu</a>
        <a href="#my-menu">Close the menu</a>


        <div id="page">     
            <!-- The menu -->
      <nav id="my-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>
        </div>
    </body>
</html>

【问题讨论】：

标签： jquery html mmenu

【解决方案1】：

那里没有任何 html 来创建按钮。本教程将向您介绍如何设置 Javascript 以在点击操作上触发菜单 - 您在代码中拥有该功能：

    $("#my-button").click(function () {
        $("#my-menu").trigger("close.mm");
    });

但由于没有元素#my-button，该代码是多余的。在他们的例子中，他们无论如何都使用链接。你真正缺少的是一些 CSS 来使链接看起来像一个按钮。 mmenu 下载中有一个示例。这是该示例中的相关 html：

    <div class="header FixedTop">
        <a href="#menu"></a>
        Demo
    </div>

并且css在.header a下的demo.css中

不过，任何适合按钮的 css 都可以解决问题。

Here is a fiddle 基于您的代码，带有工作按钮。希望以一种更容易查看发生了什么的方式拆分 html、css 和 javascript。

这些是我为使按钮正常工作所做的更改：

删除了一些我们不需要的 javascript - 它只是令人困惑的问题！
删除了打开和关闭链接，并用标题替换它们上面的菜单代码。将 id 从 #menu 更改为 #my-menu 为匹配 html。
从演示中复制到 .header a 的 css 中。这就是使我们的菜单链接看起来像一个按钮的原因。实际上，它只是一个链接，就像您原来的打开和关闭链接一样。
从演示中复制了 .header,.footer 的 css。这只是给我们的标题栏形成了很好的对比，以便我们可以看到白色按钮清楚。
添加了一个简单的样式规则，使标题固定在顶部。

所以最后，它的功能部分——HTML 和 Javascript 几乎不需要改变。关键在于 CSS 样式表使这些链接看起来不同。

【讨论】：

作为一个 js 新手...你能不能给代码？我刚刚将 .header a 复制到 jquery.mmenu.all.css 文件中，并将上面的代码放在 Open the menu 关闭菜单它在左上角显示单词Demo。我不确定在哪里应用按钮的所有编码。这是我要开始工作的第一个菜单。谢谢！
当然。这是一个将所有内容放在一起的小提琴：jsfiddle.net/rtzfof74我用解释更新了我的答案。该按钮有点像红鲱鱼 - 它实际上只是一个链接，就像您已经拥有的链接一样。只需要那个 CSS 来设置它的样式。此外，由于图标是白色的，您需要一个对比鲜明的背景才能看到它。希望对您有所帮助。
太棒了！我更了解它，并感谢时间和解释......这太棒了！非常感谢！