코딩스쿨

CSS Dropdowns

CSS Dropdowns: 드롭다운 메뉴 구현 및 반응형 디자인 적용 방법

드롭다운 메뉴는 웹 페이지에서 복잡한 메뉴 구조를 깔끔하고 직관적으로 표현하는 데 사용됩니다. CSS와 자바스크립트를 사용하여 사용자 인터랙션에 따라 서브 메뉴가 나타나도록 설정할 수 있으며, 모바일 환경에서도 반응형으로 동작하게 만들 수 있습니다.

1. 기본 드롭다운 메뉴 만들기

드롭다운 메뉴는 메인 메뉴 항목을 클릭하거나 호버했을 때 하위 메뉴가 나타나는 구조입니다. 이를 구현하기 위해 HTML 목록 요소(ul과 li)와 CSS를 사용합니다.

HTML 구조:

<nav class="navbar">
    <ul class="nav-list">
        <li class="nav-item"><a href="#">Home</a></li>
        <li class="nav-item dropdown">
            <a href="#">Services</a>
            <ul class="dropdown-menu">
                <li><a href="#">Web Design</a></li>
                <li><a href="#">SEO</a></li>
                <li><a href="#">Marketing</a></li>
            </ul>
        </li>
        <li class="nav-item"><a href="#">Contact</a></li>
    </ul>
</nav>

위 코드는 기본적인 네비게이션 구조에서 드롭다운 메뉴를 추가한 형태입니다. ul 태그를 사용해 서브 메뉴를 정의하고, CSS로 서브 메뉴의 표시 상태를 조정합니다.

CSS 스타일링:

/* 네비게이션 스타일 */
.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.nav-item {
    position: relative; /* 드롭다운을 위한 부모 요소 */
    margin-right: 20px;
}

.nav-item a {
    text-decoration: none;
    color: white;
    padding: 10px 15px;
    display: block;
    background-color: #333;
}

/* 드롭다운 메뉴 숨김 */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #333;
    padding: 10px 0;
    list-style: none;
}

.dropdown-menu li {
    padding: 10px;
}

.dropdown-menu li a {
    color: white;
    text-decoration: none;
    padding: 10px;
    display: block;
}

/* 드롭다운 메뉴 보이기 (호버 시) */
.nav-item:hover .dropdown-menu {
    display: block;
}

위 코드는 **position: absolute**를 사용하여 서브 메뉴를 메인 메뉴 아래에 숨긴 상태로 설정하고, 마우스를 올렸을 때 서브 메뉴가 보이도록 설정한 예시입니다.

2. 클릭으로 드롭다운 메뉴 열기

모바일 환경이나 터치 기반 기기에서는 호버보다는 클릭 또는 터치로 드롭다운 메뉴를 여는 방식이 더 적합합니다. 이를 위해 자바스크립트를 사용해 메뉴 상태를 클릭으로 토글할 수 있습니다.

HTML 구조 (변경 없음)

자바스크립트 코드:

const dropdown = document.querySelector('.dropdown');
const dropdownMenu = dropdown.querySelector('.dropdown-menu');

dropdown.addEventListener('click', function(e) {
    e.preventDefault(); // 기본 링크 동작 방지
    dropdownMenu.classList.toggle('active'); // 활성화된 상태 토글
});

CSS 수정:

/* 드롭다운 메뉴 기본적으로 숨김 */
.dropdown-menu {
    display: none;
}

.dropdown-menu.active {
    display: block; /* 활성화 시 드롭다운 메뉴 표시 */
}

위 코드는 클릭 시에만 드롭다운 메뉴가 표시되도록 설정합니다. 호버 대신 사용자가 클릭했을 때 메뉴가 나타나고 사라지도록 제어하는 방식입니다.

3. 반응형 드롭다운 메뉴

반응형 디자인을 적용하여, 화면 크기에 따라 드롭다운 메뉴의 동작 방식이 달라지도록 설정할 수 있습니다. 모바일 환경에서는 햄버거 메뉴를 통해 드롭다운 메뉴를 토글할 수 있도록 구현할 수 있습니다.

HTML 구조:

<nav class="navbar">
    <div class="menu-toggle" id="mobile-menu">☰</div>
    <ul class="nav-list">
        <li class="nav-item"><a href="#">Home</a></li>
        <li class="nav-item dropdown">
            <a href="#">Services</a>
            <ul class="dropdown-menu">
                <li><a href="#">Web Design</a></li>
                <li><a href="#">SEO</a></li>
                <li><a href="#">Marketing</a></li>
            </ul>
        </li>
        <li class="nav-item"><a href="#">Contact</a></li>
    </ul>
</nav>

CSS 수정:

/* 기본 네비게이션 스타일 */
.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-end;
}

.nav-item {
    position: relative;
    margin-right: 20px;
}

.nav-item a {
    text-decoration: none;
    color: white;
    padding: 10px 15px;
    display: block;
    background-color: #333;
}

.menu-toggle {
    display: none;
    font-size: 30px;
    color: white;
    cursor: pointer;
}

/* 반응형 스타일 */
@media (max-width: 768px) {
    .nav-list {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 60px;
        left: 0;
        background-color: #333;
    }

    .nav-list.active {
        display: flex;
    }

    .menu-toggle {
        display: block;
        position: absolute;
        top: 15px;
        right: 20px;
    }

    .nav-item {
        text-align: center;
        margin: 0;
    }

    .dropdown-menu {
        position: relative;
        display: none;
        flex-direction: column;
    }

    .dropdown-menu.active {
        display: flex;
    }
}

자바스크립트 코드 추가:

const menuToggle = document.getElementById('mobile-menu');
const navList = document.querySelector('.nav-list');

menuToggle.addEventListener('click', function () {
    navList.classList.toggle('active'); // 네비게이션 바 토글
});

const dropdown = document.querySelector('.dropdown');
const dropdownMenu = dropdown.querySelector('.dropdown-menu');

dropdown.addEventListener('click', function (e) {
    e.preventDefault(); // 기본 링크 동작 방지
    dropdownMenu.classList.toggle('active'); // 서브 메뉴 활성화 상태 토글
});

위 코드는 모바일 기기에서 햄버거 메뉴를 클릭하면 네비게이션 바가 열리고, 드롭다운 메뉴도 클릭 시에만 열리도록 설정한 반응형 드롭다운 메뉴 예시입니다.

4. CSS 애니메이션을 활용한 드롭다운 효과

CSS 애니메이션을 사용하여 드롭다운 메뉴가 나타날 때 부드러운 전환 효과를 적용할 수 있습니다. 이를 통해 드롭다운 메뉴가 자연스럽게 나타나거나 사라지는 시각적 효과를 구현할 수 있습니다.

CSS 애니메이션 추가:

/* 드롭다운 메뉴 애니메이션 */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #333;
    padding: 10px 0;
    list-style: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.nav-item:hover .dropdown-menu {
    display: block;
    opacity: 1; /* 메뉴가 보일 때 투명도 1로 변경 */
}

위 코드는 드롭다운 메뉴가 나타날 때 서서히 보이도록 설정하여, 부드러운 애니메이션 효과를 추가했습니다. **opacity**와 transition 속성을 사용하여 투명도가 서서히 변하도록 설정했습니다.

5. 드롭다운 메뉴에 아이콘 추가

아이콘을 드롭다운 메뉴 항목에 추가하면 시각적으로 직관적이고 사용자 경험을 개선할 수 있습니다. Font Awesome이나 SVG 아이콘을 사용하여 메뉴를 더 이해하기 쉽게 만들 수 있습니다.

HTML 구조 (아이콘 추가):

<nav class="navbar">
    <ul class="nav-list">
        <li class="nav-item"><a href="#"><i class="fas fa-home"></i> Home</a></li>
        <li class="nav-item dropdown">
            <a href="#"><i class="fas fa-cogs"></i> Services</a>
            <ul class="dropdown-menu">
                <li><a href="#"><i class="fas fa-paint-brush"></i> Web Design</a></li>
                <li><a href="#"><i class="fas fa-chart-line"></i> SEO</a></li>
                <li><a href="#"><i class="fas fa-bullhorn"></i> Marketing</a></li>
            </ul>
        </li>
        <li class="nav-item"><a href="#"><i class="fas fa-envelope"></i> Contact</a></li>
    </ul>
</nav>

CSS 스타일링 (아이콘 간격 추가):

/* 아이콘과 텍스트 사이 간격 설정 */
.nav-item i {
    margin-right: 8px;
}

/* 드롭다운 메뉴 아이콘 스타일 */
.dropdown-menu li i {
    margin-right: 8px;
}

위 코드는 Font Awesome 아이콘을 드롭다운 메뉴와 기본 메뉴 항목에 추가한 예시입니다. 아이콘과 텍스트 사이의 간격을 설정하여 메뉴의 가독성을 향상시킵니다. 아이콘을 사용하면 메뉴 항목을 더 직관적으로 만들 수 있습니다.

6. 다단 드롭다운 메뉴 구현

다단 드롭다운 메뉴는 서브 메뉴가 또 다른 서브 서브 메뉴를 포함하는 구조입니다. 이를 통해 복잡한 메뉴 구조를 깔끔하게 표현할 수 있습니다. 주로 대형 웹사이트나 포털 사이트에서 많은 카테고리를 나타낼 때 사용됩니다.

HTML 구조:

<nav class="navbar">
    <ul class="nav-list">
        <li class="nav-item"><a href="#">Home</a></li>
        <li class="nav-item dropdown">
            <a href="#">Services</a>
            <ul class="dropdown-menu">
                <li class="dropdown">
                    <a href="#">Web Design</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">UI Design</a></li>
                        <li><a href="#">UX Design</a></li>
                    </ul>
                </li>
                <li><a href="#">SEO</a></li>
                <li><a href="#">Marketing</a></li>
            </ul>
        </li>
        <li class="nav-item"><a href="#">Contact</a></li>
    </ul>
</nav>

위 코드는 서브 메뉴 안에 또 다른 서브 메뉴를 추가한 구조입니다. 다단 드롭다운을 사용해 다양한 레벨의 카테고리를 표시할 수 있습니다.

CSS 스타일링:

/* 드롭다운 메뉴 기본 설정 */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #333;
    list-style: none;
    padding: 10px 0;
}

/* 하위 드롭다운 (서브 서브 메뉴) */
.dropdown .dropdown-menu {
    top: 0;
    left: 100%; /* 서브 서브 메뉴는 오른쪽에 표시 */
}

.nav-item:hover .dropdown-menu {
    display: block;
}

/* 호버 시 서브 메뉴 표시 */
.dropdown:hover .dropdown-menu {
    display: block;
}

위 코드는 다단 드롭다운 메뉴에서 서브 메뉴가 수평 방향으로 열리도록 설정하였습니다. 서브 서브 메뉴는 부모 메뉴 항목의 오른쪽에 나타나도록 설정하여 다단 구조를 시각적으로 명확하게 표시합니다.

7. 드롭다운 메뉴와 웹 접근성 고려

드롭다운 메뉴를 사용할 때 웹 접근성을 고려하는 것은 매우 중요합니다. 키보드 사용자나 스크린 리더 사용자를 위해 포커스 이동과 명확한 내비게이션을 제공해야 합니다.

포커스 스타일링:

/* 포커스된 링크에 스타일 적용 */
.nav-item a:focus, .dropdown-menu li a:focus {
    background-color: #575757;
    outline: none;
}

위 코드는 키보드로 네비게이션할 때 포커스된 메뉴 항목을 시각적으로 강조합니다. 포커스 스타일을 명확히 하여, 웹 접근성을 개선할 수 있습니다.

키보드 내비게이션 지원 자바스크립트 추가:

// 키보드 내비게이션 (Tab 키로 드롭다운 메뉴 탐색)
document.addEventListener('keydown', function (event) {
    if (event.key === "Tab") {
        const focusedElement = document.activeElement;
        if (focusedElement.closest('.dropdown')) {
            const dropdownMenu = focusedElement.nextElementSibling;
            if (dropdownMenu && dropdownMenu.classList.contains('dropdown-menu')) {
                dropdownMenu.classList.add('active');
            }
        }
    }
});

위 코드는 Tab 키를 사용해 메뉴 탐색을 할 수 있도록 드롭다운 메뉴가 포커스 상태에서 자동으로 열리도록 설정합니다. 키보드 내비게이션을 통해 웹 접근성을 향상시키는 방식입니다.

8. 반응형 드롭다운 메뉴 최적화

모바일 환경에서는 햄버거 메뉴와 드롭다운 메뉴가 함께 작동할 수 있도록 최적화할 수 있습니다. 미디어 쿼리를 사용하여 모바일 환경에 맞는 드롭다운 토글 방식을 설정하는 것이 중요합니다.

CSS 반응형 설정 (계속):

@media (max-width: 768px) {
    .nav-list {
        display: none; /* 기본적으로 네비게이션 메뉴 숨김 */
    }

    .nav-list.active {
        display: flex;
        flex-direction: column; /* 모바일에서는 메뉴를 수직으로 표시 */
    }

    .dropdown-menu {
        display: none; /* 모바일에서 서브 메뉴 숨김 */
    }

    .dropdown-menu.active {
        display: flex; /* 모바일에서 서브 메뉴 활성화 */
    }
}

자바스크립트로 모바일 드롭다운 토글:

const menuToggle = document.getElementById('mobile-menu');
const navList = document.querySelector('.nav-list');

menuToggle.addEventListener('click', function () {
    navList.classList.toggle('active');
});

const dropdowns = document.querySelectorAll('.dropdown');

dropdowns.forEach(function (dropdown) {
    dropdown.addEventListener('click', function () {
        const dropdownMenu = this.querySelector('.dropdown-menu');
        dropdownMenu.classList.toggle('active');
    });
});

위 코드는 모바일 기기에서 메인 메뉴와 서브 메뉴가 토글되도록 설정했습니다. 사용자는 햄버거 메뉴를 통해 메인 메뉴를 열고, 각 드롭다운 항목을 클릭하여 서브 메뉴를 펼칠 수 있습니다.

CSS 드롭다운 메뉴는 웹사이트에서 복잡한 내비게이션 구조를 간단하고 직관적으로 표현하는 데 중요한 요소입니다. 호버 효과나 클릭 이벤트를 통해 서브 메뉴를 열고, 다단 구조의 드롭다운도 쉽게 구현할 수 있습니다. 또한 반응형 디자인을 통해 모바일 환경에서도 드롭다운 메뉴가 최적화되도록 설계할 수 있습니다.

애니메이션을 추가하여 부드러운 시각적 전환을 제공하고, 아이콘을 사용해 사용자 경험을 개선할 수 있습니다. 또한 웹 접근성을 고려한 포커스 스타일링과 키보드 내비게이션을 적용하여, 모든 사용자에게 편리한 드롭다운 메뉴를 제공할 수 있습니다.

코딩 스쿨 CSS

CSS Dropdowns

CSS Dropdowns: 드롭다운 메뉴 구현 및 반응형 디자인 적용 방법

1. 기본 드롭다운 메뉴 만들기

HTML 구조:

CSS 스타일링:

2. 클릭으로 드롭다운 메뉴 열기

HTML 구조 (변경 없음)

자바스크립트 코드:

CSS 수정:

3. 반응형 드롭다운 메뉴

HTML 구조:

CSS 수정:

자바스크립트 코드 추가:

4. CSS 애니메이션을 활용한 드롭다운 효과

CSS 애니메이션 추가:

5. 드롭다운 메뉴에 아이콘 추가

HTML 구조 (아이콘 추가):

CSS 스타일링 (아이콘 간격 추가):

6. 다단 드롭다운 메뉴 구현

HTML 구조:

CSS 스타일링:

7. 드롭다운 메뉴와 웹 접근성 고려

포커스 스타일링:

키보드 내비게이션 지원 자바스크립트 추가:

8. 반응형 드롭다운 메뉴 최적화

CSS 반응형 설정 (계속):

자바스크립트로 모바일 드롭다운 토글: