0
ナビゲーションバーがタブレット/モバイルサイズで表示され、ハンバーガーアイコンがクリックされると、左側にジャンプし、ナビゲートタブの下に奇妙な「ギャップ」が表示されます。私はこれを解決するのを助けてくれますか？これが私の最初の時間が応答ナビバーのハンバーグアイコンが正常に機能しない
/* NAVIGATION MENU */
.icon img {
\t margin-top: 2.5px;
}
.navbar {
\t padding-left: 0%;
\t background-color: #454242;
\t text-align:center;
}
ul.menu {
\t height: 43px;
\t background-color: #454242;
\t list-style-type: none;
\t margin: 0;
\t padding: 0;
\t overflow: hidden;
\t transiton: 1.0s;
\t font-family: "Gill Sans", Helvetica, Arial, sans-serif;
\t display:inline-block;
\t text-align: center;
}
ul.menu li {
\t float: left;
\t display: inline;
}
ul.menu li a {
\t display: inline-block;
\t color: #FFFFFF;
\t text-align: center;
\t padding: 10px 20px;
\t text-decoration: none;
\t transition: 0.5s;
\t font-size: 17px;
\t height: 23px;
}
ul.menu li a:hover {
\t background-color: #FFFFFF;
\t color: black;
}
ul.menu li a:active {
\t background-color: #FFFFFF;
\t color: black;
}
ul.menu li.icon {
\t display:none;
}
@media screen and (max-width: 680px) { \t
ul.menu li:not(:first-child){
\t display:none;
\t margin: auto;
\t float: left;
}
\t
ul.menu li.icon {
\t display: inline;
\t float: left;
\t position: absolute;
\t left: 0px;
\t text-align: left;
}
}
@media screen and (max-width: 680px) {
.navbar {
\t padding-left: 0%;
}
\t
ul.menu.responsive li.icon {
\t
\t float: left;
\t position: absolute;
\t left: -10px;
\t text-align: left;
\t color: black;
}
\t
ul.menu.responsive{
\t position: relative;
\t height: 258px;
\t transition: 1.0s;
\t width: 100%
}
\t
ul.menu.responsive li{
\t float: none;
\t display: inline;
} \t
ul.menu.responsive li a{
\t display:block;
\t text-align: center;
} \t
}<!--NAVIGATION BAR-->
<div class="navigation col-12">
<div class="navbar">
<ul class="menu">
<li class="icon">
<a href="javascript:void(0);"onClick="dropdownMenu()">☰</a></li>
<li> <a href="test.html">Home</a></li>
<li> <a href="test.html">Eat</a></li>
<li> <a href="test.html">Shop</a></li>
<li> <a href="test.html">Discover</a></li>
<li> <a href="test.html">Edge Club</a></li>
<li> <a href="test.html">Contact</a></li>
</ul>
</div>
</div>
<script>
function dropdownMenu() {
\t document.getElementsByClassName("menu")[0].classList.toggle("responsive");
}
</script>
ちょうど削除ここで質問をして、事前にHTML ...感謝を書いてある "左：-10px;" from "ul.menu.responsive li.icon" class –
Heyfirstものは、あなたのコードにCSSのリセット/ノーマライザを追加してください。 http://stackoverflow.com/questions/11578819/css-reset-what-exactly-does-it-do！ –