如何在 jQuery mmenu 中更改菜单的标题
Posted
技术标签:
【中文标题】如何在 jQuery mmenu 中更改菜单的标题【英文标题】：How to change title of menu in jQuery mmenu 【发布时间】：2015-07-28 23:07:14 【问题描述】：我已经尝试配置和使用 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,
#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>
【问题讨论】：
请创建demo解决您的问题JSFiddle 【参考方案1】：您可以使用plug-in options 中的navbar > title 设置来更改菜单标题，如下所示：
$("#my-menu").mmenu(
navbar:
title: "New title"
);
【讨论】：
【参考方案2】：我还需要更改 Search 标题。我发现你可以change language 自己。它也会更改 Menu 标题。
$('nav#menu').mmenu(
"navbars": [
"position": "top",
"content": [
"close","searchfield"
]
]
,
language: "nl"
);
【讨论】：
以上是关于如何在 jQuery mmenu 中更改菜单的标题的主要内容，如果未能解决你的问题，请参考以下文章
Jquery mmenu：如何在所有子菜单打开的情况下启动？