jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了如何在jQuery mmenu中更改菜单的标题大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我一直在尝试配置和使用Mmenu一段时间,似乎无法弄清楚如何更改菜单标题,

我似乎找不到从“菜单”中更改它的方法,我从文档等尝试了不同的东西,没有运气.

也许这里有人有想法?

<!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,#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>

解决方法

您可以使用导航栏> plug-in options中的标题设置更改菜单标题,如下所示:

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

大佬总结

以上是大佬教程为你收集整理的如何在jQuery mmenu中更改菜单的标题全部内容,希望文章能够帮你解决如何在jQuery mmenu中更改菜单的标题所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: