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! –