How to create a responsive drop-down menu

Question

The hamburger menu icon should be on the right and the image should be on the left.

When we click on the menu to open, it should expand into a drop-down menu that should have logo home About us gallery contact.

<div class="rectangle1">
    <ul class="dropdown">
        <li class="li1"><a href="home.html"><img class="img" src="YOGI Logo.svg" alt=""> </a></li>
        <li class="li2"><a class="a1" href="#home">Home</a></li>


        <li class="li3"><a class="a2" href="aboutus.html">About us</a></li>

        <li class="li4"><a class="a3" href="gallery.html">Gallery</a></li>

        <li class="li5"><a class="a4" href="contact.html">Contact us</a></li>

        <a class="Contact_Us" href="contact.html">
            <img class="Contact-us-img"src="Vector.svg" alt="">
           <span class="Contact-us-text">Contact us</span>
          </a>

    </ul>
</div>

I just need to convert it to CSS.

I need it to adapt to the iPhone 14 Pro's responsive design to become a hamburger menu.

Answer 1

I thought this might be helpful to you: CSS @media Rule. As you saw in the tutorial, CSS has a way to check the width of the screen.

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

In this example, when the width is less than 600 pixels, the background color will be set to light blue. Using this rule, you can change your CSS accordingly.

You should try to implement it yourself, not just copy-paste from the internet. Go ahead and have fun using CSS; it's the only way to learn it.

Answer 2

This is the modified CSS code to implement a responsive hamburger menu:

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; /* 在小屏幕上显示菜单图标 */
    }
}