배경:
반응형 내비게이션 바라고 하면 가장 먼저 떠오르는 반응은 부트스트랩 반응형 내비게이션 바일 것입니다. 모바일 단말기, 변화가 없다? ? ? 이런 식으로 인터넷에서 여러 기사를 읽었는데 다른 플러그인과 함께 사용하거나 js를 작성해야 할 수도 있습니다. 나중에 이유를 설명하는 기사를 찾았고 웹 페이지 및 모바일 내비게이션의 요구 사항을 실현하기 위해 매우 간단한 js를 사용했기 때문에 여기에 기록합시다. 먼저 다음과 같이 렌더링을 살펴보십시오.
1. 메인코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<meta name="viewport" content="width=device-width,initial-scale=1">-->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Responsive Navigation Bar</title>
<style type="text/css">
* {
box-sizing: border-box;
padding:0;
margin:0;
}
body {
font-family: 'Josefin Sans',sans-serif;
}
.navbar {
font-size: 18px;
background-image:linear-gradient(260deg,#2376ae 0%, #c16ecf 100%);
border:1px solid rgba(0,0,0,0.2);
padding-bottom: 10px;
}
.main-nav {
list-style-type: none;
display:none;
}
.main-nav li {
text-align:center;
margin:15px auto;
}
.nav-links,
.logo {
text-decoration:none;
color:rgba(255,255,255,0.7);
}
.logo {
display:inline-block;
font-size: 22px;
margin-top:10px;
margin-left:20px;
}
.navbar-toggle {
position:absolute;
top:10px;
right:20px;
cursor:pointer;
color:rgba(255,255,255,0.8);
font-size:24px;
}
.active {
display:block;
}
/*针对桌面网页设计*/
@media all and (min-width:768px) {
.navbar {
display: flex;
justify-content: space-between;
padding-bottom:0;
height:70px;
align-items:center;
}
.main-nav {
display: flex;
margin-right:30px;
flex-direction: row;
justify-content: flex-end;
}
.main-nav li {
margin:0;
}
.nav-links {
margin-left:40px;
}
.navbar-toggle {
display: none;
}
.logo:hover,
.nav-links:hover {
color:rgba(255,255,255,1);
}
}
</style>
</head>
<body>
<nav class="navbar">
<span class="navbar-toggle" id = "js-navbar-toggle">
<i class="glyphicon glyphicon-align-justify"></i>
</span>
<a href="#" class="logo">logo</a>
<ul class="main-nav" id="js-menu">
<li>
<a href="#" class="nav-links">Home</a>
</li>
<li>
<a href="#" class="nav-links">Products</a>
</li>
<li>
<a href="#" class="nav-links">About Us</a>
</li>
<li>
<a href="#" class="nav-links">Concat Us</a>
</li>
<li>
<a href="#" class="nav-links">Blog</a>
</li>
</ul>
</nav>
<script type="text/javascript">
let mainNav = document.getElementById('js-menu');
let navBarToggle = document.getElementById('js-navbar-toggle');
navBarToggle.addEventListener("click",function(event) {
mainNav.classList.toggle("active")
})
</script>
</body>
</html>
둘, 코드 분석
실제로 위의 주요 아이디어는 다음과 같습니다.
이러한 웹사이트를 반응형 웹 디자인이라고도 하며 일반적인 반응형 웹 디자인에 대해 따르는 원칙은 다음과 같습니다
移动优先，渐进增强. 따라서 이 예에서는 모바일 우선
전략을 채택했습니다 .
웹 페이지의 데스크톱 버전에서 이 효과를 얻을 수 있지만 이때 모바일 웹 페이지를 열면 내비게이션 바의 너비가 980px 임을 알 수 있습니다 . ! ? (ps: 온라인에서 보는게 대부분입니다.)
그렇다면 왜 이런 일이 벌어지는 걸까요?
실제로 반응형 웹 개발에서 뷰포트는 매우 중요한 개념입니다. 이상적인 뷰포트와 기본 뷰포트를 살펴보겠습니다.
- 기본 표시 영역이란 무엇입니까? 모바일 단말기에서 데스크톱 버전의 웹 페이지를 직접 열고 장치의 너비가 변경되면 그에 따라 웹 페이지도 변경됩니다. iOS에서는 데스크톱 버전의 웹페이지가 980px를 기준으로 배치된 다음 압축되어 모바일 단말기에 표시됩니다 . 위의 애니메이션에서 내비게이션 바의 너비가 실제로 980px임을 알 수 있습니다.
- 이상적인 뷰포트란 무엇입니까? 웹페이지의 레이아웃 너비가 기기의 실제 너비 임을 의미합니다 . 모바일 너비와 높이가 375*667px라고 가정하면 이상적으로 레이아웃은 너비 375px를 기반으로 합니다.
즉, 위의 코드에서 미디어 쿼리를 사용하더라도 여전히 상대적인 기본 뷰포트는 모바일 측의 레이아웃에 사용되므로 메타 태그를 설정하여 이상적인 뷰포트 로 변환할 수 있습니다.关键就是下面这句代码：(ps: 헤드에 다음 코드를 추가하면 끝, 즉 시작 코드에 주석 처리된 코드)
<meta name="viewport" content="width=device-width,initial-scale=1">
실제로 내비게이션 바의 레이아웃은 데스크톱과 모바일 단말기에서 약간 다를 것이고 CSS를 통해 다른 레이아웃을 만들 수 있습니다.
그런 다음 모바일 단말기에서 js를 통해 클릭하면 모바일 단말기 탐색의 표시 및 축소가 실현됩니다.
<script type="text/javascript">
let mainNav = document.getElementById('js-menu');
let navBarToggle = document.getElementById('js-navbar-toggle');
navBarToggle.addEventListener("click",function(event) {
mainNav.classList.toggle("active")
})
</script>
참조 블로그:
웹 소형 기술의 반응형 내비게이션 바 구현 https://www.jianshu.com/p/d13800f962c2