以下のコードでモバイルメニューボタン<container>
を私の<navigation>
の中に作成したいと思います。これまでのところすべてこれがうまく動作します。モバイルメニューボタンがナビゲーション内に残りません
しかし、どういうわけかモバイルメニューボタンはの中にはありません。<nav>
です。
(黄色ナビゲーションに比べて緑色のコンテナを参照してください)
私はそれは、幅と高さのために固定PXとは何かを持って推測しています。しかし、それらを%幅に変更すると、バーが完全に消えてしまいます。
が周囲に残るように、コードで変更する必要があるのは<nav>
ですか?
あなたはまた、here
body {
margin: 0;
}
.header {
width: 80%;
height: 10%;
margin-left: 10%;
display: flex;
justify-content: space-between;
position: fixed;
top: 0;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: yellow;
}
.navigation {
width: 100%;
height: 100%;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.container {
display: inline-block;
cursor: pointer;
float: right;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: green;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
<div class="header"> \t
<nav class="navigation">
<div class="container">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div> \t
</nav>
</div>
こんにちはAbhishek、ありがとうございます。私はまた、ここで応答の良い解決策を見つけました:https://jsfiddle.net/p6dqLLj6/16/。これまでにできなかった唯一のことは、モバイルメニューボタンが縦に並んで表示されることです。 – Michi