MUI下拉导航组件 - 应用篇

最新推荐文章于 2021-08-06 12:56:06 发布
最新推荐文章于 2021-08-06 12:56:06 发布
阅读量787 收藏 1
点赞数
本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！
本文链接：https://blog.csdn.net/qq_35393869/article/details/96702889
版权

MUI下拉导航组件 - 看效果图

注意：

  1. 滚动监听，自动获取Y轴滚动高度，始终定位（下拉菜单高度）于页眉底部；
  2. 代码待优化点：（下拉菜单的fixed，仍会随页面滚动而滚动）。

效果图

在这里插入图片描述

全部代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>安家家政</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="statics/plugin/mui/mui.min.css">
		<style>
			html,
			body {
				min-height: 100%;
				background-color: #efeff4;
			}
			.animated {
				-webkit-animation-duration: 0.5s;
				animation-duration: 0.5s;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			@-webkit-keyframes bounceInDown {
				0%, 60%, 75%, 90%, 100% {
					-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
					transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				}
				0% {
					opacity: 0;
					-webkit-transform: translate3d(0, -100%, 0);
					transform: translate3d(0, -100%, 0);
				}
				60% {
					opacity: 1;
					-webkit-transform: translate3d(0, 25px, 0);
					transform: translate3d(0, 25px, 0);
				}
				75% {
					-webkit-transform: translate3d(0, -10px, 0);
					transform: translate3d(0, -10px, 0);
				}
				90% {
					-webkit-transform: translate3d(0, 5px, 0);
					transform: translate3d(0, 5px, 0);
				}
				100% {
					-webkit-transform: none;
					transform: none;
				}
			}
			@keyframes bounceInDown {
				0%, 60%, 75%, 90%, 100% {
					-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
					transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				}
				0% {
					opacity: 0;
					-webkit-transform: translate3d(0, -100%, 0);
					transform: translate3d(0, -100%, 0);
				}
				60% {
					opacity: 1;
					-webkit-transform: translate3d(0, 25px, 0);
					transform: translate3d(0, 25px, 0);
				}
				75% {
					-webkit-transform: translate3d(0, -10px, 0);
					transform: translate3d(0, -10px, 0);
				}
				90% {
					-webkit-transform: translate3d(0, 5px, 0);
					transform: translate3d(0, 5px, 0);
				}
				100% {
					-webkit-transform: none;
					transform: none;
				}
			}
			.bounce-in-down {
				-webkit-animation-name: bounceInDown;
				animation-name: bounceInDown;
			}
			@-webkit-keyframes fadeInDown {
				0%, 60%, 75%, 90%, 100% {
					-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
					transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				}
				0% {
					opacity: 0;
					-webkit-transform: translate3d(0, -100%, 0);
					transform: translate3d(0, -100%, 0);
				}
				60% {
					opacity: 1;
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				75% {
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				90% {
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				100% {
					-webkit-transform: none;
					transform: none;
				}
			}
			@keyframes fadeInDown {
				0%, 60%, 75%, 90%, 100% {
					-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
					transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
				}
				0% {
					opacity: 0;
					-webkit-transform: translate3d(0, -100%, 0);
					transform: translate3d(0, -100%, 0);
				}
				60% {
					opacity: 1;
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				75% {
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				90% {
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				100% {
					-webkit-transform: none;
					transform: none;
				}
			}
			.fade-in-down {
				-webkit-animation-name: fadeInDown;
				animation-name: fadeInDown;
			}
			@-webkit-keyframes bounceOutUp {
				20% {
					-webkit-transform: translate3d(0, -10px, 0);
					transform: translate3d(0, -10px, 0);
				}
				40%,
				45% {
					opacity: 1;
					-webkit-transform: translate3d(0, 20px, 0);
					transform: translate3d(0, 20px, 0);
				}
				100% {
					opacity: 0;
					-webkit-transform: translate3d(0, -100%, 0);
					transform: translate3d(0, -100%, 0);
				}
			}
			@keyframes bounceOutUp {
				20% {
					-webkit-transform: translate3d(0, -10px, 0);
					transform: translate3d(0, -10px, 0);
				}
				40%,
				45% {
					opacity: 1;
					-webkit-transform: translate3d(0, 20px, 0);
					transform: translate3d(0, 20px, 0);
				}
				100% {
					opacity: 0;
					-webkit-transform: translate3d(0, -100%, 0);
					transform: translate3d(0, -100%, 0);
				}
			}
			.bounce-out-up {
				-webkit-animation-name: bounceOutUp;
				animation-name: bounceOutUp;
			}
			@-webkit-keyframes fadeOutUp {
				20% {
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				40%,
				45% {
					opacity: 1;
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				100% {
					opacity: 0;
					-webkit-transform: translate3d(0, -100%, 0);
					transform: translate3d(0, -100%, 0);
				}
			}
			@keyframes fadeOutUp {
				20% {
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				40%,
				45% {
					opacity: 1;
					-webkit-transform: translate3d(0, 0px, 0);
					transform: translate3d(0, 0px, 0);
				}
				100% {
					opacity: 0;
					-webkit-transform: translate3d(0, -100%, 0);
					transform: translate3d(0, -100%, 0);
				}
			}
			.fade-out-up {
				-webkit-animation-name: fadeOutUp;
				animation-name: fadeOutUp;
			}
			.menu-open {
				height: 100%;
				width: 100%;
			}
			.menu-open .mui-scroll-wrapper {
				position: absolute;
				top: 48;
				bottom: 0;
				left: 0;
				z-index: 1;
				width: 100%;
				overflow: hidden;
				-webkit-backface-visibility: hidden;
			}
			.menu-backdrop {
				display: none;
			}
			.menu-open .menu-backdrop {
				position: fixed;
				top: 0;
				bottom: 0;
				height: 100%;
				width: 100%;
				display: block;
				z-index: 998;
			}
			.menu-wrapper {
				position: absolute;
				top: 48px;
				left: 0;
				right: 0;
				z-index: 999;
				text-align: center;
				background-color: #333;
				width: 100%;
			}
			.menu-wrapper.hidden {
				-webkit-transform: translate3d(0, -100%, 0);
				transform: translate3d(0, -100%, 0);
				z-index: -1;
			}
			.menu {
				width: 100%;
			}
			.menu .mui-table-view-inverted {
				color: gray;
				font-size: 19px;
			}
			.menu .mui-table-view-inverted .mui-table-view-cell:after {
				height: 2px;
				left: 0;
				right: 0;
			}
			.menu-wrapper.mui-active,
			.menu-wrapper.mui-active .menu {
				-webkit-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
			}
			#info{
			  	padding: 20px 10px ;
			 }
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a id="icon-menu" class="mui-action-menu mui-icon mui-icon-bars mui-pull-left"></a>
			<a class="mui-action-back mui-btn mui-btn-link mui-pull-right">关闭</a>
			<h1 class="mui-title">安家家政</h1>
		</header>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="index.html">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-chat">
				<span class="mui-icon mui-icon-email"><span class="mui-badge">hot</span></span>
				<span class="mui-tab-label">保姆</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-contact">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">育婴师</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-map">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">QQ咨询</span>
			</a>
		</nav>
		<div class="mui-content">
			<div class="mui-content-padded" >
				<p>这是div模式下沉菜单示例，主页面和菜单在一个HTML文件中，
					
					当前页面为主界面，你可以在主界面放置任何内容；
					 打开侧滑菜单有多种方式：  1、点击页面左上角的
					<span class="mui-icon mui-icon-bars"></span> 图标；
					 2、通过JS API触发（例如点击如下蓝色按钮体验）；
					 <span class="android-only">3、Android手机按menu键；</span>
				</p>
				<p style="padding: 5px 20px;margin-bottom: 5px;">
					<button id="menu-btn" type="button" class="mui-btn mui-btn-primary mui-btn-block" style="padding: 10px;">显示下拉菜单</button>
				</p>
				<div id="info"></div>
			</div>
			
		</div>
		<div id="menu-wrapper" class="menu-wrapper hidden">
			<div id="menu" class="menu">
				<ul class="mui-table-view mui-table-view-inverted">
					<li class="mui-table-view-cell">
						<a href="index.html">首页</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="allservices.html">全部服务</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="about_us.html">关于我们</a>
					</li>
					<li class="mui-table-view-cell">
						<a href="contact_us.html">联系我们</a>
					</li>
				</ul>
			</div>
		</div>
		<div id="menu-backdrop" class="menu-backdrop"></div>
		<script src="statics/plugin/mui/mui.min.js"></script>
		<script>
			mui.init({
				swipeBack:true //启用右滑关闭功能
			});
			var menuWrapper = document.getElementById("menu-wrapper");
			var menu = document.getElementById("menu");
			var menuWrapperClassList = menuWrapper.classList;
			var backdrop = document.getElementById("menu-backdrop");
			var info = document.getElementById("info");
			
			backdrop.addEventListener('tap', toggleMenu);
			document.getElementById("menu-btn").addEventListener('tap', toggleMenu);
			document.getElementById("icon-menu").addEventListener('tap',toggleMenu)
			//下沉菜单中的点击事件
			mui('#menu').on('tap', 'a', function() {
				toggleMenu();
				info.innerHTML = '你已选择：'+this.innerHTML;
				window.location.href=this.href;
			});
			var busying = false;

			function toggleMenu() {
				if (busying) {
					return;
				}
				busying = true;
				if (menuWrapperClassList.contains('mui-active')) {
					document.body.classList.remove('menu-open');
					menuWrapper.className = 'menu-wrapper fade-out-up animated';
					menu.className = 'menu bounce-out-up animated';
					setTimeout(function() {
						backdrop.style.opacity = 0;
						menuWrapper.classList.add('hidden');
					}, 500);
				} else {
					document.body.classList.add('menu-open');
					menuWrapper.className = 'menu-wrapper fade-in-down animated mui-active';
					menu.className = 'menu bounce-in-down animated';
					backdrop.style.opacity = 1;
				}
				setTimeout(function() {
					busying = false;
				}, 500);
			}
		</script>
	</body>

</html>

以上关于“ MUI下拉导航组件 - 应用篇 ” 的全部内容。

草巾冒小子
关注
基于mui框架选项卡列表下拉滑动加载代码
12-14
基于mui框架制作移动端选项卡切换，触屏滑动下拉加载数据列表刷新代码。
MUI顶部选项卡的用法(tab-top-webview-main)详解
11-28
MUI提供了丰富的功能，包括下拉刷新、侧滑导航以及我们关注的顶部和底部选项卡。 首先，让我们看一下主页代码。在HTML结构中，我们看到一个类名为".d1"的div，它将作为子页面的容器。接着，我们引入了MUI的核心CSS...
mui下拉菜单
weixin_43891731的博客
07-23 1018
mui下拉菜单 <div id="pullrefresh" class="mui-content mui-scroll-wrapper"> <div class="mui-scroll"> <ul class="mui-table-view mui-table-view-chevron" id="list"> </ul> </div> </div> var page = 1;
mui ajax 下拉,mui下拉菜单
weixin_42106357的博客
08-06 1033
mui下拉菜单var page = 1;//最大页数var maxPage = Number.MAX_VALUE;mui.init({pullRefresh: {container: '#pullrefresh',up: {auto: true,style: 'circle',contentrefresh: "正在刷新...",height: 50,callback: pullupRefresh}...
mui下拉菜单样式
热门推荐
gdali的专栏
11-24 2万+
首先，看一下效果 html代码： &lt;div class="mui-input-group"&gt; &lt;div class="mui-input-row"&gt; &lt;label&gt;选择门店&lt;/label&gt; &lt;a class="mui-navigate-right"&gt; &lt;span clas
MUI下拉菜单样式
weixin_30306905的博客
06-24 1119
1 <div class="mui-input-row my_select"> 2 <label style="width: 47px;padding-right: 0;font-size: 15px;">性别</label> 3 ...
仿微信界面，swipe滑动mui-bar-tab
08-28
MUI提供了一系列符合移动设备特性的组件，包括导航栏、底部导航栏（mui-bar-tab）、侧滑菜单、下拉刷新等，非常适合开发微信风格的应用。 在实现"仿微信界面，swipe滑动mui-bar-tab"这个项目时，我们首先需要创建...
mui手册参考-中文.zip
07-31
1. **丰富的UI组件**：包括导航栏、侧滑菜单、下拉刷新、上拉加载、按钮、输入框、列表、轮播图等，这些组件设计简洁，易于定制，能满足大多数应用场景的需求。 2. **高性能的触摸事件处理**：mui采用自定义的事件...
MUI所需涉及文件--h5
07-20
例如`mui.css`包含了框架的基础样式，而`mui.bar.css`、`mui.pullToRefresh.css`等则是特定组件的样式文件，它们负责实现诸如顶部导航栏、下拉刷新等功能的视觉表现。 2. **JavaScript库文件**：MUI的JavaScript库...
BUGmui.picker 组件在 ios16.0 及以上版本系统存在遮挡问题
最新发布
06-29
这个组件是移动端应用开发中常用的一个选择器控件，通常用于实现下拉选择功能。然而，当在新款iPhone或升级至iOS 16.0的设备上运行含有BUGmui.picker的应用时，用户可能会遇到遮挡问题，这严重影响了用户体验和应用...
一款非常好看下拉框样式(select)
09-27
一款非常好看下拉框样式(select)主要调用了已经封装好的样式文件selectBox.htc,才实现了下拉框的美化......
bootstap下拉框（含多选下拉框）
09-20
好用的bootstrap下拉框，其中含多选下拉框，保证下载即可使用
带搜索功能的下拉列表框
10-26
带搜索功能的下拉列表框，集成select2.js。很好用的搜索功能。
mui-tree-select:具有TreeView下拉列表的Select组件
03-29
ReactMUI树选择 A Select，允许用户从选择一个选项 设计用于轻松使用和诸如和类的表单框架。 例子 如何建树 为了构建树，我们使用遵循点符号的层次结构字段，例如：L.L1将是： 大号L1 请参考示例以了解如何使用。
MUI - 下拉列表
SsStr的博客
10-10 4293
必须引入CSS <link rel="stylesheet" type="text/css" href="../css/mui.min.css" /> <link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" /> 必须引入JS <script src="....
mui 组件：“div下拉导航”【scroll固定位置】- 案例篇
草巾冒小子的博客
05-12 1588
（含代码、效果图）侧滑导航：“div下拉导航” 截图如下： 重要代码 · 如下： //下拉菜单定位：动态锁定 window.onscroll = function(){ let scrollHeight = document.documentElement.scrollTop; // 滚动条的滚动行程 console.log(scrollHeight); document.getEl...
Mui 底部导航切换
dianshe9581的博客
07-19 217
1.建好子模板目录 2.导航代码 <nav class="mui-bar mui-bar-tab"> <a id="defaultTab" class="mui-tab-item mui-active" href="html/home1.html"> <span class="mui-icon mui-icon-home...
mui下拉框picker选择器
Bling Bling ~~
11-03 3733
经常做pc端的下拉框（图一），所以在做手机端下拉框的时候发现很少有图一样式的，然后在网上找了很长时间，发现大多的UI库都是如图三中的展示，所以开始我在努力的往图一样式靠（重新引入的样式组件js+css），花了很长时间，最后还是因为样式和取值复杂而放弃啦 图一： 然后我开始用其原生的select,虽然样式也改动了部分但是还是觉得有点丑，最后也放弃啦 图二： 最后由于时间的关系最终决定还是用mui自带的这个picker选择器，虽然丑了点但是改改之后还是可以看下去的。 图三： 图四就是我用mui修改后的效果，虽
jquery mutiselect 可以查询的下拉框
zhangyang0918的博客
11-17 620
jquery mutiselect 可以查询的下拉框首先来看效果：一：引入js和css<link rel="stylesheet" type="text/css" href="~/Scripts/jquerymultiselect/jquery-ui.css" /> <link rel="stylesheet" type="text/css" href="~/Scripts/jquerymultis
使用MUI开发HTML5应用：UI组件详解
“HBuilder-MUI-开发文档.pdf是关于HTML5应用开发的文档，主要介绍了MUI框架中的UI组件，如Accordion（手风琴效果）和Actionsheet（操作表单）的使用方法。” 在HTML5应用开发中，MUI是一个流行且强大的前端框架，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值