less的样式
*{
margin:0;
padding: 0;
border:0;
}
ul,li{
list-style: none;
}
.nav-tab1 {
100%;
margin: 0 auto;
/* overflow-x: auto;*/
overflow: hidden;
position: relative;
//第一套样式
>.conment{
font-size: 0px;
overflow-x: auto;
white-space: nowrap;
scrollbar-face-color:transparent;
>li{
list-style: none;
70px;
text-align: center;
font-size: 14px;
padding: 6px 0;
display: inline-block;
border-bottom: 3px solid transparent;
box-sizing:border-box;
> a {
100%;
text-decoration: none;
display: inline-block;
color:black;
padding: 10px 0px;
}
}
>.cddd {
color:#cc3333;
border-bottom: 3px solid #cc3333;
}
}
>.btn-img{
position: absolute;
right:0;
top:0;
z-index: 100;
>img:first-child{
display: block;
}
>img:last-child{
display:none;
}
}
}
//第二套样式
.nav-tab2{
>.conment{
font-size: 0px;
100%;
margin-left:9px;
margin-top:50px;
> li {
list-style: none;
float:left;
25%;
font-size: 14px;
margin: 10px 0px;
> a {
75%;
text-decoration: none;
display: inline-block;
color:black;
border:1px solid black;
text-align: center;
padding: 4px 0px;
border-radius: 45px;
box-sizing: border-box;
}
}
>.cddd > a{
border:1px solid #cc3333;
color:#cc3333;
}
}
>.btn-img{
position: absolute;
right:0;
top:0;
z-index: 100;
>img:first-child{
display: none;
}
>img:last-child{
display: block;
}
}
}
.title-span{
position: absolute;
left: 15px;
top: 15px;
}
html的结构布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="css/dao-hang-lang.css" />
</head>
<body>
<div class="nav-tab1" id="navBOX">
<span class="title-span" style="display: none;">切换页面</span>
<div id="btn-box" class="btn-img" >
<img src="img/导航按钮_02.png" alt="" width="40px" height="40px;" />
<img src="img/保健器材导航展开浮动框_02.png" alt="" width="40px" height="40px;" />
</div>
<!--内容-->
<ul class="conment">
<li><a >推荐</a></li>
<li><a class="headline-channel-item">热门</a></li>
<li> <a class="headline-channel-item">养生</a></li>
<li> <a class="headline-channel-item">减肥</a></li>
<li> <a class="headline-channel-item">美食</a></li>
<li> <a class="headline-channel-item">美容</a></li>
<li> <a class="headline-channel-item">慢病</a></li>
<li> <a class="headline-channel-item">育儿</a></li>
</ul>
</div>
</body>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/nav.js" type="text/javascript" charset="utf-8"></script>
js的控制代码
<script>
$(function(){
//控制按钮的切换
var tag = true;
$("#btn-box").click(function(){
if(tag){
$(this).parent(".nav-tab1").removeClass("nav-tab1");
$(this).parent().addClass("nav-tab2");
$(".title-span").css("display","block")
}else{
$(this).parent().addClass("nav-tab1");
$(this).parent().removeClass("nav-tab2");
$(".title-span").css("display","none");
}
tag =!tag;
})
$("#navBOX>.conment>li>a").click(function(){
$(this).parent().addClass("cddd").siblings().removeClass("cddd");
})
});
</script>
</html>