利用mui实现导航栏底部切换高亮

最新推荐文章于 2023-07-16 19:06:01 发布

s_turnTurn

最新推荐文章于 2023-07-16 19:06:01 发布

阅读量528

点赞数

文章标签： mui组件实现导航栏底部切换

本文链接：https://blog.csdn.net/s_turnTurn/article/details/94721634

版权

利用mui实现导航栏底部切换

首先要引入mui 框架css文件

<link rel="stylesheet" href="css/mui.min.css">

css样式

	<style>
	//css样式
		.mui-bar-tab .mui-tab-item .mui-icon~.mui-tab-label {
			margin-top: -5px;
		}
		.mui-bar-tab {
			font-size: 8px;
		}

		.Popover1 {
			width: 25px;
			height: 25px;
			display: inline-block;
			background: url("images/22_03.gif") no-repeat;
			background-size: 100%;
			margin-top: 0px;
			margin-left: 0px;
		}

		.mui-bar-tab .mui-tab-item.mui-active .Popover1 {

			background: url("images/26_03.gif") no-repeat;
			background-size: 100%;
		}

		.Popover2 {
			width: 25px;
			height: 25px;
			display: inline-block;
			background: url("images/9_05.png") no-repeat;
			background-size: 80% 80%;
			margin-top: 0px;
			margin-left: 0px;
		}

		.mui-bar-tab .mui-tab-item.mui-active .Popover2 {

			background: url("images/26_05.gif") no-repeat;
			background-size: 80% 80%;
		}

		.Popover3 {
			width: 25px;
			height: 25px;
			display: inline-block;
			background: url("images/11_07.png") no-repeat;
			background-size: 80% 80%;
			margin-top: 0px;
			margin-left: 0px;
		}

		.mui-bar-tab .mui-tab-item.mui-active .Popover3 {

			display: inline-block;
			background: url("images/26_07.png") no-repeat;
			background-size: 80% 80%;
		}

		.mui-popover .mui-popover-arrow:after {

			width: 24px;
			height: 26px;

			-webkit-transform: rotate(54deg);
			transform: rotate(54deg);

		}

		body {
			background: #EDEDED;
			line-height: 1;
		}

		* {
			margin: 0;
			padding: 0;
		}
	</style>

HTML结构

	<body>
	
	<nav class="mui-bar mui-bar-tab ">
		<a class="mui-tab-item one server" href="#Popover_0">
			<p class="Popover1 mui-icon"></p>
			<span class="mui-tab-label">xxxx</span>
		</a>
		<a class="mui-tab-item" href="#Popover_1">
			<p class="Popover2 mui-icon"></p>
			<span class="mui-tab-label">xxxx</span>
		</a>
		<a class="mui-tab-item server" href="#Popover_2">
			<p class="Popover3 mui-icon"></p>
			<span class="mui-tab-label">xxxx</span>
		</a>

	</nav>

	<div id="Popover_0" class="mui-popover mui-bar-popover">
		<div class="mui-popover-arrow"></div>
		<ul class="mui-table-view" style="width: 9rem">
			<li class="mui-table-view-cell" onclick="showMenu('m14')"><a href="#">xxxxxx</a>
			</li>
			<li class="mui-table-view-cell" onclick="showMenu('m13')"><a href="#">xxxxxx</a>
			</li>
			<li class="mui-table-view-cell" onclick="showMenu('m12')"><a href="#">xxxxxx</a>
			</li>
			<li class="mui-table-view-cell" onclick="showMenu('m11')"><a href="#">xxxxxx</a>
			</li>
		</ul>
	</div>
	<div id="Popover_1" class="mui-popover mui-bar-popover">
		<div class="mui-popover-arrow"></div>
		<ul class="mui-table-view">
			<li class="mui-table-view-cell"><a href="#">xxxxxx</a>
			</li>
		</ul>
	</div>
	<div id="Popover_2" class="mui-popover mui-bar-popover">
		<div class="mui-popover-arrow"></div>
		<ul class="mui-table-view">
			<li class="mui-table-view-cell"><a href="#">xxxxxx</a>
			</li>
		</ul>
	</div>

</body>

引入mui框架js文件

	//引入mui框架js文件 
	<script src="js/mui.min.js"></script>

s_turnTurn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用mui实现导航栏底部切换高亮

利用mui组件实现导航栏底部切换首先要引入mui 框架css文件首先要引入mui 框架css文件<link rel="stylesheet" href="css/mui.min.css"> <style> //css样式 .mui-bar-tab .mui-tab-item .mui-icon~.mui-tab-label { margin-top: -...
复制链接

扫一扫