Question

我试图制作一个简单的JQuery Mobile - mmenu滑动菜单工作。菜单显示，但仅在简单的文本方案中显示，而不是使用窗口小部件显示。这可能是我如何编码CDN的问题，但也可能是其他问题。我的问题是什么想法？ HTML代码如下

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scrolable=no">
        <title>Shaw Investment Company - Mobile</title>
        <!--<link rel="stylesheet" href="themes/ShawInvstCoMobile.min.css" /> -->
        <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.6.5/css/jquery.mmenu.all.css'>
        <link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

        <style type="text/css">
            #menu {
                background: #eee;
            }

            .mm-listview > li > a {
                font-weight: bold;
                font-size: 16px;
                transition: padding 0.5s ease;
            }
            .mm-listview > li > a:hover {
                padding-left: 40px;
            }
            .mm-listview li:nth-child( 1 ) { background: #ffd; }
            .mm-listview li:nth-child( 2 ) { background: #dfd; }
            .mm-listview li:nth-child( 3 ) { background: #dff; }
            .mm-listview li:nth-child( 4 ) { background: #ddf; }
            .mm-listview li:nth-child( 5 ) { background: #fdf; }
            .mm-listview li:nth-child( 6 ) { background: #fdf; }
            .mm-listview li:nth-child( 7 ) { background: #fdf; }
        </style>

    </head>
    <body>
        <div id="page">
            <div class="header">
                <a href="#menu"> </a>
                Shaw Investment Company
            </div>
            <div class="content">
                <p><strong>This is a test.</strong><br />
                    Click the menu icon to see menu choices.</p>
            </div>
        </div>
        <nav id="menu">
            <ul>
                <li><a href="#/">About</a></li>
                    <ul>
                        <li><a href="#">History</a></li>
                        <li><a href="#">Bylaws</a></li>
                    </ul>
                <li><a href="#/">Leases</a></li>
                <li><a href="#/">Relationships</a></li>
                <li><a href="#/">Officers</a></li>
                <li><a href="#/">Directors</a></li>
                <li><a href="#/">Shareholders</a></li>
                <li><a href="#/">Images</a></li>
                    <ul>
                        <li><a href="#">Photos</a></li>
                        <li><a href="#">Videos</a></li>
                    </ul>
            </ul>
        </nav>
        <script type="text/javascript">
        // variables
        var $menu = $('#menu');
        var $btnMenu = $('.btn-menu');
        var $img = $('img');
        // mmenu customization
        $menu.mmenu(
            {
            counters: true,
            navbar: {
                title: "Menu Content"
                    },
                extensions["pageshadow", "effect-zoom-menu", "effect-zoom-panels"],
                offCanvas:
                    {
                    position:"right",
                    zposition: "back"
                    }
        });
        $menu.find(".mm-next").addClass("mm-fullsubopen");
        </script>
    </body>
</html>

Answer 1

您错过了MMENU JS文件。

https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.6.5/js/jquery.mmenu.all.min.js

var $menu = $('#menu');
        var $btnMenu = $('.btn-menu');
        var $img = $('img');
        // mmenu customization
        $menu.mmenu(
            {
            counters: true,
            navbar: {
                title: "Menu Content"
                    },
                extensions: ["pageshadow", "effect-zoom-menu", "effect-zoom-panels"],
                offCanvas:
                    {
                    position:"right",
                    zposition: "back"
                    }
        });
        $menu.find(".mm-next").addClass("mm-fullsubopen");

           #menu {
                background: #eee;
            }

            .mm-listview > li > a {
                font-weight: bold;
                font-size: 16px;
                transition: padding 0.5s ease;
            }
            .mm-listview > li > a:hover {
                padding-left: 40px;
            }
            .mm-listview li:nth-child( 1 ) { background: #ffd; }
            .mm-listview li:nth-child( 2 ) { background: #dfd; }
            .mm-listview li:nth-child( 3 ) { background: #dff; }
            .mm-listview li:nth-child( 4 ) { background: #ddf; }
            .mm-listview li:nth-child( 5 ) { background: #fdf; }
            .mm-listview li:nth-child( 6 ) { background: #fdf; }
            .mm-listview li:nth-child( 7 ) { background: #fdf; }

        <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.6.5/css/jquery.mmenu.all.css'>
        <link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.6.5/js/jquery.mmenu.all.min.js"></script>
<div id="page">
            <div class="header">
                <a href="#menu"> Click here for menu </a>
                Shaw Investment Company
            </div>
            <div class="content">
                <p><strong>This is a test.</strong><br />
                    Click the menu icon to see menu choices.</p>
            </div>
        </div>
        <nav id="menu">
            <ul>
                <li><a href="#/">About</a></li>
                    <ul>
                        <li><a href="#">History</a></li>
                        <li><a href="#">Bylaws</a></li>
                    </ul>
                <li><a href="#/">Leases</a></li>
                <li><a href="#/">Relationships</a></li>
                <li><a href="#/">Officers</a></li>
                <li><a href="#/">Directors</a></li>
                <li><a href="#/">Shareholders</a></li>
                <li><a href="#/">Images</a></li>
                    <ul>
                        <li><a href="#">Photos</a></li>
                        <li><a href="#">Videos</a></li>
                    </ul>
            </ul>
        </nav>

diffiuculty制作一个简单的JQuery Mobile \ mmenu滑动菜单工作

1 个答案: