background:
When it comes to the responsive navigation bar, your first reaction may be the bootstrap responsive navigation bar. This responsive type is generally aimed at reducing the size of the screen and the navigation bar appears in the viewport. However, when it is displayed on the mobile terminal, there is no change? ? ? I read several articles on the Internet like this, maybe it needs to be used with other plug-ins, or write js. Later, I found an article explaining the reason, and used very simple js to realize the needs of web pages and mobile navigation, so let’s record it here. First look at the renderings, as follows:
1. Main code
<!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>
Two, code analysis
In fact, the main idea above is:
Such a website is also called responsive web design, and the principles we follow for general responsive web design are:
移动优先，渐进增强.
So, in this example, we have adopted a mobile-first strategy.
Although we can achieve this effect on the desktop version of the webpage, but if you open the mobile webpage at this time, you will find that the width of the navigation bar is 980px ? ! ? (ps: that's most of what I see online.)
So, why is this happening?
In fact, in responsive web development, viewport is a very important concept, here is a look: ideal viewport and default viewport.
- What is the default viewport: When we directly open the desktop version of the webpage on the mobile terminal, and the width of the device changes, the webpage will also change accordingly. In ios, the desktop version of the webpage will be laid out relative to 980px, then compressed and displayed on the mobile terminal . In the animation above, you will find that the width of the navigation bar is indeed 980px;
- What is an ideal viewport: It means that the layout width of the webpage is the real width of the device . Here it is, assuming that our mobile width and height are 375*667px, then ideally the layout is based on a width of 375px.
So, that is to say, in the above code, although the media query is used, the relative default viewport is still used for layout on the mobile side. We can convert it to the ideal viewport by setting the meta tag .关键就是下面这句代码：(ps: Add the following code to the head and you're done, that is, the code commented in the beginning code)
<meta name="viewport" content="width=device-width,initial-scale=1">
In fact, the layout of the navigation bar will be slightly different on the desktop and mobile terminals, and different layouts can be made through css.
Then, on the mobile terminal, click through js to realize the display and contraction of the mobile terminal navigation.
<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>
Reference blog:
Implementing Responsive Navigation Bar of Web Small Technology https://www.jianshu.com/p/d13800f962c2