<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>媒体查询</title>
<style type="text/css">
:root {
--nav-item-active: #800080;
--nav-item-normal: #FFFFFF;
--nav-back-color: #000000
}
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 98vh;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100%;
}
.container .tab-header {
position: relative;
height: 50px;
width: 100%;
background-color: var(--nav-back-color);
}
.container .tab-header .indicator {
position: absolute;
bottom: 0;
width: 100px;
height: 5px;
background-color: var(--nav-item-active);
transition: transform .2s ease;
}
/* MD LG 大屏幕时的导航条 */
.container .tab-header .normal-content {
display: none;
width: 100%;
height: 50px;
overflow: hidden;
}
.container .tab-header .normal-content div {
min-width: 100px;
height: 57px;
line-height: 50px;
padding: 0 0 10px 0;
box-sizing: border-box;
text-align: center;
color: var(--nav-item-normal);
}
/* XS 小屏幕是的导航条 */
.container .tab-header .xs-content {
display: none;
width: 100%;
height: 100%;
overflow-y: hidden;
}
.container .tab-header .xs-content .nav-list {
display: flex;
flex-direction: row;
width: 100%;
height: 57px;
overflow-x: auto;
}
.container .tab-header .xs-content .nav-list li {
min-width: 100px;
height: 57px;
line-height: 50px;
padding: 0 0 10px 0;
text-align: center;
box-sizing: border-box;
color: var(--nav-item-normal);
}
.container .content {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-size: 24px;
}
.container .tab-header .xs-content .nav-list .link-item-active {
border-bottom: 10px solid var(--nav-item-active);
box-sizing: border-box;
color: var(--nav-item-active);
}
.container .tab-header .normal-content .link-item-active {
/* border-bottom: 10px solid var(--nav-item-active); */
box-sizing: border-box;
color: var(--nav-item-active);
}
@media screen and (max-width:558px) {
.container .tab-header .normal-content {
display: none;
}
.container .tab-header .xs-content {
display: block;
}
}
@media screen and (max-width: 980px) and (min-width:559px) {
.container .tab-header .xs-content {
display: none;
}
.container .tab-header .normal-content {
display: flex;
width: 100%;
height: 100%;
flex-direction: row;
align-content: center;
}
}
@media screen and (min-width: 981px) {
.container .tab-header .normal-content {
display: flex;
width: 100%;
height: 100%;
flex-direction: row;
align-content: center;
}
}
</style>
</head>
<body>
<div class="container">
<div class="tab-header">
<div class="normal-content">
<div class="link-item link-item-active">面板一</div>
<div class="link-item">面板二</div>
<div class="link-item">面板三</div>
<div class="link-item">面板四</div>
<div class="link-item">面板五</div>
</div>
<div class="xs-content">
<ul class="nav-list">
<li class="link-item link-item-active">面板一</li>
<li class="link-item">面板二</li>
<li class="link-item">面板三</li>
<li class="link-item">面板四</li>
<li class="link-item">面板五</li>
</ul>
</div>
<div class="indicator"></div>
</div>
<div class="content">
面板一
</div>
</div>
<script type="text/javascript">
(function() {
var oNormalNavList = document.getElementsByClassName('normal-content')[0],
oXsNavList = document.getElementsByClassName('xs-content')[0],
oContent = document.getElementsByClassName('content')[0],
oIndicator = document.getElementsByClassName('indicator')[0];
const linkItemClassName = 'link-item';
var curLinkItem = '面板一';
function init() {
bindEvent();
}
function bindEvent() {
oNormalNavList.addEventListener('click', navListHandler, false);
oXsNavList.addEventListener('click', navListHandler, false);
}
function navListHandler(e) {
var e = e || window.event,
target = e.target || e.srcElement,
tarClassName = target.className,
clzs = tarClassName && tarClassName.split(' ');
if (clzs.indexOf(linkItemClassName) !== -1) {
curLinkItem = target.textContent;
}
oContent.textContent = curLinkItem;
var oNavLists = Array.from(document.getElementsByClassName('link-item'));
oNavLists.forEach((oNav) => {
if (oNav.textContent === curLinkItem) {
oNav.className = 'link-item link-item-active';
} else {
oNav.className = 'link-item';
}
})
oIndicator.style.transform = 'translateX(' + (oNavLists.indexOf(target) * 100) + 'px)';
}
init()
})();
</script>
</body>
</html>
CSS3小案例:CSS3 媒体查询、CSS3过渡变换、CSS3变量
最新推荐文章于 2024-04-23 17:04:18 发布