Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
}
li {
	list-style:none;
}
::-webkit-scrollbar {
	width:5px;
	height:0px;
	background-color:#fff;
}
.friendlj {
	width:100%;
	height:50px;
	position:relative;
	overflow-x:auto;
	/*padding-bottom:10px;
	*/overflow-y:hidden;
	z-index:9;
	background-color:#666666;
}
.friendlj div:nth-child(1) {
	width:auto;
	height:50px;
	z-index:11;
	position:relative;
}
.friendlj div ul {
	width:auto;
	height:50px;
	text-align:center;
	position:absolute;
	left:50%;
	z-index:11;
}
.friendlj div ul li {
	float:left;
	width:auto;
	height:100%;
	line-height:50px;
	z-index:12;
	color:#fff;
	position:relative;
}
.bjk {
	width:auto;
	height:50px;
	background-color:rgba(252,5,5,0.8);
	position:fixed;
	top:0px;
	z-index:10;
	left:50%;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

移动端仿购物网站可滑动导航栏(适用于移动端)

1.可以自定义时间来切换导航栏的位置和下面板块的内容
2.可用作购物网站的限时购导航栏
3.简单容易理解,方便使用。

0