Html
    Css
    Js
* {
	box-sizing:border-box;
}
body {
	background:#1A1E23;
	font-family:"Lato",sans-serif;
	-webkit-font-smoothing:antialiased;
}
nav {
	position:relative;
	padding-bottom:12px;
}
nav .line {
	height:2px;
	position:absolute;
	bottom:0;
	margin:10px 0 0 0;
	background:#FF1847;
}
nav ul {
	padding:0;
	margin:0;
	list-style:none;
	display:flex;
}
nav ul li {
	margin:0 40px 0 0;
	opacity:0.4;
	transition:all 0.4s ease;
}
nav ul li:hover {
	opacity:0.7;
}
nav ul li.active {
	opacity:1;
}
nav ul li:last-child {
	margin-right:0;
}
nav ul li a {
	text-decoration:none;
	color:#fff;
	text-transform:uppercase;
	display:block;
	font-weight:600;
	letter-spacing:0.2em;
	font-size:14px;
}
body {
	display:flex;
	justify-content:center;
	align-items:center;
	min-height:100vh;
}

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

jQ导航滑动

0