Clever Geek Handbook

How to change menu title in jQuery mmenu

I have been trying to set up and use Mmenu for a while, and cannot figure out how to change the name of the menu,

I can't find a way to change it from the "Menu", I've tried different things from the documentation, etc. with no luck.

Perhaps someone has an idea?

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="author" content="www.frebsite.nl" />
        <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />

        <title>TashCraft 24/7!</title>

        <link type="text/css" rel="stylesheet" href="css/demo.css" />
        <link type="text/css" rel="stylesheet" href="../dist/css/jquery.mmenu.css" />
        <link type="text/css" rel="stylesheet" href="../dist/css/addons/jquery.mmenu.dragopen.css" />

        <!-- for the one page layout -->
        <style type="text/css">
            #intro,
            #first,
            #second,
            #third
            {
                height: 400px;
            }
            #intro
            {
                padding-top: 0;
            }
            #first,
            #second,
            #third
            {
                border-top: 1px solid #ccc;
                padding-top: 150px;
            }
        </style>

        <!-- for the fixed header -->
        <style type="text/css">
            .header,
            .footer
            {
                box-sizing: border-box;
                width: 100%;
                position: fixed;
            }
            .header
            {
                top: 0;
            }
            .footer
            {
                bottom: 0;
            }
            .mm-menu
            {
               color: black;
               background-color: white;
            }
        </style>

        <script type="text/javascript" src="http://hammerjs.github.io/dist/hammer.min.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

        <script type="text/javascript" src="../dist/js/jquery.mmenu.min.js"></script>
        <script type="text/javascript" src="../dist/js/addons/jquery.mmenu.dragopen.min.js"></script>
        <script type="text/javascript" src="../dist/js/addons/jquery.mmenu.fixedelements.min.js"></script>
        <script type="text/javascript">
            $(function() {
                var $menu = $('nav#menu'),
                    $html = $('html, body');

                $menu.mmenu({
                    dragOpen: true
                });

                var $anchor = false;
                $menu.find( 'li > a' ).on(
                    'click',
                    function( e )
                    {
                        $anchor = $(this);
                    }
                );

                var api = $menu.data( 'mmenu' );
                api.bind( 'closed',
                    function()
                    {
                        if ( $anchor )
                        {
                            var href = $anchor.attr( 'href' );
                            $anchor = false;

                            //  if the clicked link is linked to an anchor, scroll the page to that anchor 
                            if ( href.slice( 0, 1 ) == '#' )
                            {
                                $html.animate({
                                    scrollTop: $( href ).offset().top
                                }); 
                            }
                        }
                    }
                );
            });
        </script>
    </head>
    <body>
        <div id="page">
            <div class="header Fixed">
                <a href="#menu"></a>
                <font color="white"><b><font size="12">Websitename</font></font><font color="black">
            </div>
            <div class="content" id="content">
                <div id="intro">
                    <p><strong>This is a demo.</strong><br />
                        Click the menu icon to open the menu.</p>

                    <p>The links in the menu link to a section on the same page, some small javascript makes the page scroll smoothly.</p>
                </div>
                <div id="first">
                    <p><strong>This is the first section.</strong><br />
                        Notice how the fixed header and footer slide out along with the page.</p>

                    <p><a href="#menu">Open the menu.</a></p>
                </div>
                <div id="second">
                    <p><strong>This is the second section.</strong><br />
                        You can also drag the page to the right to open the menu.</p>
                    <p><a href="#menu">Open the menu.</a></p>
                </div>
                <div id="third">
                    <p><strong>This is the third section.</strong><br />
                        <a href="#menu">Open the menu.</a></p>
                </div>
            </div>
            </div>
            <nav id="menu">
                <ul>
                    <li><a href="#content">Introduction</a></li>
                    <li><a href="#first">First section</a></li>
                    <li><a href="#second">Second section</a></li>
                    <li><a href="#third">Third section</a></li>
                </ul>
            </nav>
        </div>
    </body>
</html>
+3


source to share


1 answer


You can use a parameter navbar > title

in the plug-in options to change the name of the menu, for example:



$("#my-menu").mmenu({
  navbar: {
    title: "New title"
  }
});
+8


source






More articles:


All Articles