JQuery插件Mmenu使用入门

最新推荐文章于 2024-05-12 09:33:14 发布
最新推荐文章于 2024-05-12 09:33:14 发布
阅读量1.1w 收藏 2
点赞数 3
分类专栏： jquery插件 文章标签： jquery插件 Mmenu
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_19558705/article/details/49808151
版权

Mmenu简介：

mmenu 插件是一款用于创建光滑的导航菜单的 jQuery 插件，只需要一行 JavaScript 代码就能为您的移动网站加上类似移动应用程序外观的滑动菜单（不仅在移动网站，pc端网站也可以用）。


代码演示：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> mmenu演示 </title>
    <!--需要的第三方包-->
	<link href="font-awesome.min.css" rel="stylesheet" type="text/css"> 
	<link href="jquery.mmenu.all.custom.css" rel="stylesheet" type="text/css"> 
	<link href="bootstrap.min.css" rel="stylesheet">
	<script src="jquery.min.js" type="text/javascript"></script>  
	<script src="jquery.mmenu.min.all.js"></script>
	<script src="bootstrap.min.js"></script>
    <span style="white-space:pre">	</span>
	<script type="text/javascript">
	   $(document).ready(function() {
	      $("#main_menu").mmenu({
	    	  counters: true,
	    	  classes: "mm-light mm-zoom-menu mm-zoom-panels",
	    	  searchfield: true,
	    	  footer: {
	    		  add: true,
	    		  content: "Powered by Real @2014"
	    	  }
	      });
	   });
	</script>    
</head>
<body>
<nav class="navbar navbar-default navbar-static-top" role="navigation" 
    style="margin-bottom: 0">
    <div class="navbar-head">
    	<div class="navbar-brand">
    		<a href="#main_menu">点击</a>
    	</div>
    </div>
	    <ul class="nav navbar-top-links navbar-right">
	        <li>
	            aaa
	        </li>
	        <li class="dropdown">
	            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
	               aaa
	            </a>
	            <ul class="dropdown-menu dropdown-user">
	                <li>111</li>
	                <li class="divider"></li>
	                <li>222</li>
	            </ul>
	        </li>  
	    </ul>
</nav>
<nav id="main_menu"  class="noprint">
   <ul>
      <li>
      	<span>菜单一</span>
      	<div>
      		<ul>      				
		<span style="white-space:pre">	</span><li><a href="">1</a></li>
			<li><a href="">2</a></li>
			<li><a href="">3</a></li>	
      		</ul>
      	</div>
      </li>
      <li>
      	<span>菜单二</span>
      	<div>
      		<ul>
			<li><a href="">1</a></li>
      		</ul>
      	</div>
      </li>
      <li>
      	<span>菜单三</span>
      	<div>
      		<ul> 
      			<li><a href="">1</a></li>
                <span style="white-space:pre">	</span><li><a href="">2</a></li>
			<li><a href="">3</a></li>
			<li><a href="">4</a></li>
      		</ul>
      	</div>
      </li>       
   </ul>
</nav>
</body>
</html>

效果图：两级菜单，因为只是一个demo，所以没考虑美观


具体业务可以根据demo照猫画虎你。提供了下载资源，希望能帮助大家。

资源路径：http://download.csdn.net/detail/qq_19558705/9272541

以上是本人第一次写博客，有不足的请多多指教！


更多干货等你来拿 http://www.itit123.cn/

ITDragon龙
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
如何使用jQuery.mmenu构建画布外导航
Web design 教程小屋
06-23 652
本教程将带您快速浏览jQuery.jQuery插件jQuery.mmenu ，它有助于创建广泛的网站导航。 在检查时，我们将看到如何使用此插件从头开始构建画布菜单 。 什么是jQuery.mmenu？ 有关jQuery.mmenu的最佳说明，我们将转到其Github页面 ： “适用于应用程序的最佳jQuery插件，类似于您的网站和webapp的上下菜单，带有滑动子菜单。 jQue...
jquery mmenu_使用jQuery.mmenu轻松创建滑动菜单
cune1359的博客
06-28 1119
如果您没有任何好主意或灵感，有时创建具有创意的其他菜单会非常困难。 但是，可以通过搜索其他鼓舞人心的菜单设计或借助工具来解决此类问题。 在这件事上， jQuery.Mmenu是一个非常方便的工具。 jQuery.Mmenu是一个易于使用的jQuery插件，用于在您的网站中创建移动应用滑动导航菜单 。 这个光滑的创意菜单将带来更好，更整洁的用户体验。 入门 要开始使用jQuery.M...
jQuery.mmenu-jquery.mobile最好看的侧边菜单
07-30
jQuery.mmenu-jquery.mobile最好看的侧边菜单
推荐开源项目：mmenu.js - 优雅的网页菜单插件
最新发布
gitblog_00052的博客
05-12 254
推荐开源项目：mmenu.js - 优雅的网页菜单插件 项目地址:https://gitcode.com/FrDH/mmenu-js 1、项目介绍 mmenu.js 是一个强大的JavaScript插件，为你的网站和Web应用打造出类似APP的应用式侧滑菜单，带有平滑过渡的子菜单。它以其高度定制性著称，无论何时何地，都能满足你的需求。如果你在寻找一种提升用户体验、增加交互性的菜单解决方案，那么mm...
html移动端左侧菜单栏,jquery类似App的移动左侧滑动菜单mmenu(推荐)
weixin_33218612的博客
06-07 856
jQuery.mmenu插件是一款用于创建类似App的左侧滑动菜单的jQuery插件，只需要一行JavaScript代码就能为您的移动网站加上类似移动应用程序外观的滑动菜单。jQuery.mmenu 还提供了几个选项用于定制需要的菜单。在标题打开左侧菜单中点击“菜单”按钮。打开第二级菜单时，非常友好的滑动效果替换左侧菜单位置。特点移动网站菜单首先插件HTML5实现用户体验好的菜单头部搜索定位菜单位...
jQuery 插件的使用
qq_46670991的博客
11-09 252
jQuery 插件是什么 为了简化 jQuery 开发的难度 它是基于 jQuery 库针对某个具体使用场景（如轮播图功能…等）编写的 JavaScript 逻辑。 查找的两种主要方式： jQuery 官网，地址：https://plugins.jquery.com 通过搜索引擎对具体场景进行搜索 使用步骤 引入 jQuery 文件 引入 jQuery 插件文件 使用插件 – 利用插件达到实现效果 lazyload 懒加载插件 lazyload 插件是什么 用处：用于较长 HTML 页面
Jquery插件之mmenu
11-16
2. **初始化插件：** 使用 jQuery 来初始化 mmenu。 ```javascript $(function() { $('#my-menu').mmenu(); }); ``` ### 四、配置选项与扩展 mmenu 提供了多种配置选项以满足不同的需求，如动画效果、主题颜色、...
jquery mmenu
07-24
jQuery.mmenu 插件是一款用于创建光滑的导航菜单的 jQuery 插件，只需要一行 JavaScript 代码就能为您的移动网站加上类似移动应用程序外观的滑动菜单。jQuery.mmenu 还提供了几个选项用于定制需要的菜单。
jquery.mmenu手机端点击图标菜单展开侧边导航菜单代码
11-03
总结，`jquery.mmenu` 是一款功能强大且易于使用的 jQuery 插件，适用于构建手机端的侧边导航菜单。通过理解其基本用法、配置选项、事件监听以及扩展插件，你可以创建出满足需求的个性化导航菜单，提升移动网站的...
前端项目-jQuery.mmenu.zip
09-02
今天我们要探讨的是一个基于jQuery的插件——jQuery.mmenu，它是一个专为网站和web应用设计的滑动子菜单解决方案，让菜单设计变得简单而高效。 jQuery.mmenu的核心特性在于其灵活多样的布局和动画效果。这个插件...
jQuery.mmenu侧滑菜单·
08-11
支持响应式布局侧滑菜单支持多级菜单jquery.mmenu
Menujs是一款基于jQuery的轻量级响应式菜单插件
08-10
Menu.js是一款基于jQuery的轻量级响应式菜单插件，可以根据喜好进行个性化的UI定制
ARX 抽屉式菜单
08-09
VC2010+ARX2012编写的类似QQ的抽屉菜单
jquery.mmenu.js实现侧边导航非常适用于手机版站-最简使用教程（一）
lzm198707的专栏
06-29 7468
一、插件介绍 这个插件一般做手机站用的比较多，左侧上侧右侧下侧弹出菜单。 老杨我比较笨，每次下载下来很多demo，都让我看的晕晕的，倒是看时间长了，也能看懂，不过老杨我就是觉得麻烦。总想慢慢来，从最简单的来，越简单越好。这不，最近想做一个手机站，就用到这个菜单了，先从最简单的开始，从左侧弹出菜单，先截个图吧。       如果不想了解它的细节，直接看 第三条内容
jQuery高仿真移动手机滑动侧边栏布局插件
yuxiaoxia28的博客
06-23 1895
简要教程 jQuery.mmenu是一款高仿真移动手机滑动侧边栏效果的jQuery插件。该jQuery插件能够制作出和手机应用程序效果完全相同的隐藏滑动侧边栏和多级菜单效果。它的特点有： 滑动侧边栏可以放置在页面的上下左右四个位置。可以作为水平滑动菜单或垂直下拉菜单使用。整个布局包括完整的搜索框，页面头部，脚部和内容区域。适合移动触摸设备使用。可以很容易的通过CSS文件来自定义样式。可
JQuery Mobile入门——打开和关闭对话框
liang408015204的专栏
01-09 9769
1、JQuery Mobile 中创建对话框，只需要在指向页面的链接元素中添加一个data-rel属性，并将该属性值设置为dialog。关闭对话框是将data-rel属性值设置为back。 2、示例代码：     New Document                      JQuery Mobile   打开对话框    //打开对话框
html5 侧边滑动,jQuery高仿真移动手机滑动侧边栏布局插件
weixin_34355348的博客
06-25 508
jQuery.mmenu是一款高仿真移动手机滑动侧边栏效果的jQuery插件。该jQuery插件能够制作出和手机应用程序效果完全相同的隐藏滑动侧边栏和多级菜单效果。它的特点有：滑动侧边栏可以放置在页面的上下左右四个位置。可以作为水平滑动菜单或垂直下拉菜单使用。整个布局包括完整的搜索框，页面头部，脚部和内容区域。适合移动触摸设备使用。可以很容易的通过CSS文件来自定义样式。可以在现代浏览器和移动手机...
使用mmenu制作侧边抽屉菜单
u010289111的专栏
09-06 2031
要实现如上图所示的侧边菜单栏，这个要求。 好吧没有什么好写的我原来做过一个企业官网手机端刚好也有这种侧栏抽屉的菜单，这个菜单是我两年前做的，我原本想用jquery或者js实现类似这种效果的，毕竟那是两年前实现的了 但是居然好吧要求就是尽快弄好，然后我测试了一下我两年前做的那个官网的侧边抽屉菜单在安卓机还有苹果机上展示和使用都是没有问题的。 它的官网是  http://mmenu.frebsi
mMenu.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { isEdit = !isEdit; if (isEdit) { runOnUiThread(new Runnable() { @Override public void run() { refreshUI(); } });
06-01
这段代码中，`mMenu` 是一个 `View` 对象，表示菜单按钮。`setOnClickListener()` 是一个方法，用于设置按钮的点击事件监听器。这里传入了一个匿名内部类 `new View.OnClickListener()`，并在其中实现了 `onClick()` 方法，用于处理按钮的点击事件。 当用户点击菜单按钮时，`onClick()` 方法会被执行。方法内的第一行代码将 `isEdit` 变量的值取反，然后判断 `isEdit` 是否为 `true`。如果是，就调用 `runOnUiThread()` 方法，在 UI 线程中执行 `refreshUI()` 方法。 `runOnUiThread()` 方法是一个 Activity 的方法，用于在 UI 线程中更新 UI。`refreshUI()` 方法是一个自定义的方法，用于刷新 UI 界面，具体实现需要根据具体的业务逻辑来定。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值