• Trong thời gian này, bạn không thể tạo bài mới, đăng comment, hay tạo tài nguyên mới để diễn đàn dọn dẹp nội dung.
    Diễn đàn sẽ sớm mở trở lại, chi tiết hãy theo dõi tại Discord
Senkuu

Đã giải quyết Themes

  • Người tạo chủ đề Người tạo chủ đề Senkuu
  • Ngày gửi Ngày gửi
Trạng thái
Không mở trả lời sau này.

Senkuu

DEVELOPER
Ai cho mình hỏi cách làm cho cái trang nó chạy xích xuống khi mở cái menu ra, à chạy xích lên khi đóng lại, chứ k nhìn nó ghế lắm, còn chỉnh cao ra thì lúc chưa bật menu, có 1 khoảng trống, thấy kì kì
NRKj95t.png

*****Nội dung được bổ sung thêm*****
@Anh Craft giúp nha, pls

Mã:
    * {
  margin: 0;
  padding: 0;
}
#menu li {   LIST-STYLE-TYPE:none;}

#MENU {LIST-STYLE-TYPE:none;}
    

    @media screen and (min-width:801px) {
      #menu input {display:none;}
      
          #menu label {display:none;}

* {
  margin: 0;
  padding: 0;
}



.sub-menu  ul {
  background: #1F568B;
  list-style-type: none;
  text-align: center;
}
.sub-menu li {
  color: #f1f1f1;
  display: inline-block;
  width: 120px;
  height: 40px;
  line-height: 40px;
  margin-left: -5px;
}
.sub-menu a {
  text-decoration: none;
  color: #fff;
  display: block;
}
.sub-menu a:hover {
  background: #F1F1F1;
  color: #333;
}

}

          
            @media screen and (max-width: 800px) {
    

ul #menu{
  position:fixed;
  top:0;
  height:3em;
  margin:0;
  padding:0 10px;
  background:#333;
  color:#eee;
  box-shadow:0 -1px rgba(0,0,0,.5) inset;

}

ul #menu li{
  list-style-type:none;
  position:relative;
  width:100%;
}
label{
  position:relative;
  display:block;
  padding:0 18px 0 12px;
  line-height:3em;
  transition:background 0.3s;
  cursor:pointer;
}

label:after{
  content:"";
  position:absolute;
  display:block;
  top:50%;
  right:5px;
  width:0;
  height:0;
  border-top:4px solid rgba(255,255,255,.5);
  border-bottom:0 solid rgba(255,255,255,.5);
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  transition:border-bottom .1s, border-top .1s .1s;
  }


input:checked ~ label:after{
  border-top:0 solid rgba(255,255,255,.5);
  border-bottom:4px solid rgba(255,255,255,.5);
}


input{display:none;}

input:checked ~ ul.sub-menu{
  max-height:300px;
  transition:max-height 0.5s ease-in;
}
input:checked ~ .sub-menu{height:240px;}

input:checked ~ label{background:rgba(0,0,0,.3);}

ul.sub-menu{
  max-height:0;
  padding:0;
  overflow:hidden;
  list-style-type:none;
  background:#444;
  box-shadow:0 0 1px rgba(0,0,0,.3);
  transition:max-height 0.5s ease-out;
  position:absolute;
  min-width:100%;
}


ul.sub-menu li a{
  display:block;
  padding:12px;
  color:#ddd;
  text-decoration:none;
  box-shadow:0 -1px rgba(0,0,0,.5) inset;
  transition:background .3s;
  white-space:nowrap;
}

ul.sub-menu li a:hover{
  background:rgba(0,0,0,.3);
}
}
Mã:
<ul id="menu">
                        <li><input type="checkbox" id="checkbox-toggle"/><label for="checkbox-toggle">Menu</label>
                            <ul class="sub-menu">
                                <li><a href="#">Trang chủ</a></li>
                                <li><a href="#">Download</a></li>
                                <li><a href="#">Nạp thẻ</a></li>
                                <li><a href="#">Đăng ký</a></li>
                                <li><a href="#">Liên hệ</a></li>
                            </ul>
                        </li>
                    </ul>
 
Sửa lần cuối:
KxE2NFZ.png

nguyên nhân nội dung đè lên menu :|
nên thêm margin-left: -10px; j đó cho menu nữa, để cách ra thấy xấu....
 
Trạng thái
Không mở trả lời sau này.
Nội dung tương tự Xem nhiều nhất Xem thêm

Thống kê nội dung

Tạo
Senkuu,
Trả lời lần cuối từ
Senkuu,
Trả lời
2
Lượt xem
710
Quay lại
Trên cùng