Html
    Css
    Js
body {
	font-family:"Microsoft Yahei",Arial,Helvetica,sans-serif;
	margin:0px;
	padding:0px;
	font-size:12px;
	min-width:1200px;
}
fieldset,img {
	border:none;
}
input,select,textarea {
	font-family:"Microsoft Yahei",Arial,Helvetica,sans-serif;
	font-size:100%;
	outline:none;
}
ul,li,dl,dt,dd,form,p,b,i,input,h1,h2,h3,h4,h5,td,th {
	margin:0px;
	padding:0px;
	list-style:none;
	font-style:normal;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
.nav {
	height:60px;
	background:#ccc;
	position:relative;
}
.nav li {
	float:left;
	height:60px;
}
.nav li a {
	display:block;
	height:60px;
	line-height:60px;
	padding:0 20px;
	min-width:100px;
	text-align:center;
	font-size:16px;
	color:#fff;
	position:relative;
	z-index:10px;
	text-decoration:none;
}
.nav li a:hover {
	text-decoration:none;
}
.gl {
	position:absolute;
	top:0;
	left:0;
	height:60px;
	background:#E63C39;
	z-index:9px;
	width:140px;
}

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

jQuery导航滑动跟随效果

1
      ┵╊安安份份?小淑女0
      2017/9/8 10:25:13
      也不错代码简洁明了 回复