Cara membuat menu lungsur turun responsif

Question

Ikon menu hamburger hendaklah di sebelah kanan dan imej hendaklah di sebelah kiri.

Apabila kami mengklik pada menu untuk membuka, ia harus berkembang menjadi menu lungsur yang sepatutnya mempunyai logo rumah Mengenai kami

    

        

        
Home


        
Tentang kami

        
Galeri

        
Hubungi kami

        
            Hubungi kami
          

    


Saya hanya perlu menukarnya kepada CSS. 
Saya memerlukannya untuk menyesuaikan diri dengan reka bentuk responsif iPhone 14 Pro untuk menjadi menu hamburger. 
            

Answer 1

Saya fikir ini mungkin membantu anda: CSS @media Rule. Seperti yang anda lihat dalam tutorial, CSS mempunyai cara untuk menyemak lebar skrin.

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Dalam contoh ini, apabila lebar kurang daripada 600 piksel, warna latar belakang akan ditetapkan kepada biru muda. Menggunakan peraturan ini, anda boleh menukar CSS anda dengan sewajarnya.

Anda harus cuba melaksanakannya sendiri dan bukannya hanya copy-paste daripada internet. Teruskan dan berseronok menggunakan CSS itu satu-satunya cara untuk mempelajarinya.

Answer 2

Ini ialah kod CSS yang diubah suai untuk melaksanakan menu hamburger responsif:

CSS (styles.css):

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

header {
    background-color: #333;
    color: #fff;
    padding: 10px;
    display: flex;
    align-items: center;
}

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    color: #fff;
    text-decoration: none;
    font-size: 24px;
}

.menu-toggle {
    width: 30px;
    height: 30px;
    background-color: #fff;
    cursor: pointer;
    display: none; /* 在较大屏幕上默认隐藏菜单图标 */
}

.menu-toggle::before, .menu-toggle::after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background-color: #333;
}

.menu {
    display: flex;
    align-items: center;
}

.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.menu li {
    padding: 10px;
}

.menu a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
}

/* 移动设备的媒体查询 */
@media only screen and (max-width: 767px) {
    .menu {
        display: none; /* 在小屏幕上默认隐藏菜单 */
        flex-direction: column;
        background-color: #333;
        position: absolute;
        top: 50px;
        right: 0;
        width: 100%;
    }

    .menu.active {
        display: flex; /* 激活时显示菜单 */
    }

    .menu li {
        width: 100%;
        text-align: center;
    }

    .menu-toggle {
        display: block; /* 在小屏幕上显示菜单图标 */
    }
}