반응형 드롭다운 메뉴를 만드는 방법

Question

햄버거 메뉴 아이콘은 오른쪽에, 이미지는 왼쪽에 있어야 합니다.

메뉴를 클릭하여 열면 로고 홈 회사 소개 연락처가 있는 드롭다운 메뉴로 확장됩니다.

<div class="직사각형1">
    <ul class="dropdown">
        <li class="li1"><a href="home.html">img class="img" src="YOGI Logo.svg"alt="" 
        <li class="li2"><a class="a1" href="#home">홈</a></li>


        <li class="li3"><a class="a2" href="aboutus.html">회사 소개</a></li>

        <li class="li4"><a class="a3" href="gallery.html">갤러리</a></li>

        <li class="li5"><a class="a4" href="contact.html">문의하기</a></li>

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

    </ul>
</div>

CSS로 변환하면 됩니다.

햄버거 메뉴가 되려면 iPhone 14 Pro의 반응형 디자인에 적응해야 합니다.

Answer 1

이 내용이 도움이 될 것이라고 생각했습니다. CSS @media Rule. 튜토리얼에서 본 것처럼 CSS에는 화면 너비를 확인하는 방법이 있습니다.

으아악

이 예시에서는 너비가 600픽셀 미만인 경우 배경색이 연한 파란색으로 설정됩니다. 이 규칙을 사용하면 그에 따라 CSS를 변경할 수 있습니다.

인터넷에서 복사해서 붙여넣기보다는 직접 구현해 보시기 바랍니다. 계속해서 CSS를 사용해 보세요. 이것이 CSS를 배울 수 있는 유일한 방법입니다.

Answer 2

반응형 햄버거 메뉴를 구현하기 위해 수정된 CSS 코드는 다음과 같습니다.

CSS(styles.css):

으아악