6
vì vậy tôi mới sử dụng html/css và tôi đang làm việc trên một trang web cá nhân. Tôi gặp sự cố khi tạo trình đơn bánh hamburger thả xuống. Tôi đã thiết lập tiêu đề cho thay đổi kích thước trên thiết bị di động, nhưng khi tôi nhấp vào biểu tượng bánh hamburger, menu sẽ tăng trở lại điều hướng chính. Tôi đang cố gắng để làm cho nó nép mình dưới menu chính và có chiều rộng là 100%. Cũng như thêm biểu tượng "x" để đóng nó khi người dùng được thực hiện nhìn vào nó. Tôi hy vọng tôi đã giải thích nó đủ tốt, tôi sẽ đăng codepen link.Cách tạo trình đơn bánh hamburger thả xuống
\t function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}body {
background-color: #EFF0EC
}
.header {
\t padding-left: 30px;
\t background-color: #FFFFFF;
\t padding-top: 18px;
\t padding-bottom: 18px;
}
h1 {
\t font-size: 36px;
\t font-family: Buenard, Times, serif;
\t background-color: #FFFFFF
\t float: left;
\t display: inline;
}
ul.topnav {
\t list-style-type: none;
\t display: inline;
\t float: right;
\t margin: auto;
\t padding: 0;
\t overflow: hidden;
}
li a {
\t color: #000;
\t text-decoration: none;
\t display: inline-block;
\t transition: 0.3s;
}
li a:hover {
\t color: #80B198;
}
li {
\t font-size: 22px;
\t font-family: Lato, Arial sans-serif;
\t padding: 10px 16px;
\t display: inline-block;
\t margin: auto;
}
ul. topnav li.icon {
\t display: none;
}
/* Smartphone-size screens */
@media (max-width: 767px) {
\t ul.topnav li {display: none;}
\t ul.topnav li.icon {
display: inline-block;
}
ul.topnav.responsive {position: relative;}
\t ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}<body>
<div class="header">
<h1>Lorem Ipsum</h1>
<ul class="topnav" id="myTopnav">
\t <li><a class="active" href="#portfolio">Portfolio</a></li>
\t <li><a href="#about">About Me</a></li>
\t <li><a href="#contact">Contact</a></i>
\t <li class="icon">
\t \t <a href="javascript:void(0);" onclick="myFunction()">☰</a>
\t \t \t </li>
\t \t </ul>
</div>
</body>
_ "và có chiều rộng 100%" _ Bạn có nghĩa là 100% như yếu tố phụ huynh hoặc 100% như để Viewport? – guest271314
Tại sao bạn không sử dụng Bootstrap? Nó có một thành phần dễ dàng làm công việc này và nó cũng đáp ứng. Bạn có biết nó không? – lisarko8077
@ guest271314 100% đến viewport, cảm ơn – user7311741