利用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>