미디어 쿼리를 사용한 반응형 메뉴 - 자습서

HTML

HTML에는 제목과 메뉴가 있습니다. 메뉴 항목에는 데스크탑과 모바일 요소가 있습니다.

화면이 500px보다 크면 데스크톱이 표시되고 화면이 500px 미만이면 모바일이 표시됩니다.

모바일 클래스 내부에 햄버거 svg 아이콘을 추가합니다.

데스크탑 클래스 내부에 몇 가지 메뉴 항목을 추가합니다.

<div class="nav">
    <div>Title</div>
    <div class="menu">
        <div class="mobile">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
        </div>
        <div class="desktop">
            <span>Home</span>
            <span>About</span>
            <span>Contact</span>
        </div>
    </div>
</div>

CSS

먼저 flexbox를 사용하여 왼쪽의 제목과 오른쪽의 메뉴를 정렬합니다.

그런 다음 패딩, 높이 및 색상을 설정합니다.

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    height: 60px;
    color: #fff;
    background-color: rgba(0, 0, 0, .2);
}

이제 데스크탑 클래스 내부의 모든 범위 요소에 스타일을 추가합니다. 이는 모든 메뉴 항목의 스타일을 지정하고 있음을 의미합니다.

약간의 패딩, 커서를 포인터로 설정하고 약간의 전환을 추가하고 1픽셀의 투명 테두리를 설정합니다.

투명 테두리를 추가하는 이유는 마우스를 올리면 흰색이 되고 지금 투명 테두리를 추가하지 않으면 크기가 커져서 원하지 않는 것입니다.

.desktop span {
    padding: 5px 10px;
    cursor: pointer;
    transition: .3s;
    border: 1px solid transparent;
}

이제 메뉴 항목에 대한 호버 스타일을 설정합니다.

상단 및 하단 테두리 색상을 설정하고 전환을 추가하여 색상이 부드럽게 변경되도록 합니다.

.desktop span:hover {
    border-bottom-color: #fff;
    border-top-color: #fff;
    transition: .3s;
}

이제 데스크탑 클래스를 보이지 않게 설정합시다. 나중에 미디어 쿼리에서 이를 덮어씁니다.

.desktop {
    display: none;
}

이제 모바일 클래스 내부의 햄버거 svg에 대한 포인터를 커서로 설정해 보겠습니다.

.mobile svg {
    cursor: pointer;
}

또한 모바일 요소를 보이지 않게 설정합니다. 데스크톱과 동일합니다.

.mobile {
    display: none;
}

이제 미디어 쿼리를 사용하여 화면이 50픽셀 미만일 때를 감지하고 디스플레이 속성을 없음에서 블록으로 덮어씁니다.

@media  only screen and (max-width: 500px) {
    .mobile {
        display: block;
    }
}

그리고 화면이 501픽셀보다 크면 데스크톱의 디스플레이 속성을 덮어쓰므로 표시됩니다.

@media  only screen and (min-width: 501px) {
    .desktop {
         display: flex;
    }
}

그리고 그게 다야. 이제 svg 클릭 시 모바일 클래스에 메뉴 항목을 추가할 수 있습니다.

비디오 자습서here에서 전체 코드를 찾을 수 있습니다.

읽어 주셔서 감사합니다. ❤️