バックグラウンド：
レスポンシブ ナビゲーション バーに関して言えば、ブートストラップのレスポンシブ ナビゲーション バーが最初に反応するかもしれません。このレスポンシブ タイプは通常、画面のサイズを縮小することを目的としており、ナビゲーション バーはビューポートに表示されます。携帯端末、変化ありませんか？? ? インターネット上でこのような記事をいくつか読みましたが、おそらく他のプラグインと併用するか、js を記述する必要があると思われます。その後、その理由を説明し、非常に簡単な js を使用して Web ページとモバイル ナビゲーションのニーズを実現する記事を見つけたので、ここに記録しておきます。まず、次のようにレンダリングを確認します。
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>
2、コード分析
実際、上記の主なアイデアは次のとおりです。
このような Web サイトはレスポンシブ Web デザインとも呼ばれ、一般的なレスポンシブ Web デザインで従う原則は次のとおりです
移动优先，渐进增强。したがって、この例では、モバイルファースト
戦略を採用しました。
この効果はデスクトップ バージョンの Web ページで実現できますが、この時点でモバイル Web ページを開くと、ナビゲーション バーの幅が980 ピクセル であることがわかります。！? （追記：これが私がオンラインで見たことのほとんどです。）
では、なぜこのようなことが起こったのでしょうか？
実際、レスポンシブ Web 開発では、ビューポートは非常に重要な概念です。理想的なビューポートとデフォルトのビューポートを見てみましょう。
- デフォルトのビューポートとは: デスクトップ版の Web ページをモバイル端末で直接開くと、デバイスの幅が変化すると、それに応じて Web ページも変化します。iOS では、デスクトップ版のウェブページは 980px を基準にレイアウトされ、圧縮されてモバイル端末に表示されます。上のアニメーションでは、ナビゲーション バーの幅が実際に 980 ピクセルであることがわかります。
- 理想的なビューポートとは: Web ページのレイアウト幅がデバイスの実際の幅であることを意味します。ここでは、モバイルの幅と高さが 375*667 ピクセルであると仮定し、理想的にはレイアウトは 375 ピクセルの幅に基づいています。
つまり、上記のコードではメディアクエリを利用しているものの、モバイル側のレイアウトには相対的なデフォルトのビューポートが使用されており、メタタグを設定することで理想的なビューポートに変換することができます。关键就是下面这句代码：(追記: 次のコードを先頭に追加すると完了です。つまり、最初のコードでコメント化されたコードです)
<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>
参考ブログ：
Web Small Technology のレスポンシブ ナビゲーション バーの実装https://www.jianshu.com/p/d13800f962c2