منوی کشویی (Dropdown)

ساخت منوی کشویی زیبا و واکنش‌گرا با CSS خالص — بدون نیاز به JavaScript

منوی کشویی (Dropdown) چیست؟

منوی کشویی زیرمنویی است که با هاور یا کلیک باز می‌شود. برای صرفه‌جویی در فضا و سازمان‌دهی لینک‌ها استفاده می‌شود.

ساختار HTML

<div class="dropdown">
        <button class="dropdown-btn">منو ▾</button>
        <div class="dropdown-content">
            <a href="#">گزینه ۱</a>
            <a href="#">گزینه ۲</a>
            <a href="#">گزینه ۳</a>
        </div>
    </div>

CSS اصلی Dropdown

.dropdown {
        position: relative;
        display: inline-block;
    }
    
    /* محتوای کشویی — مخفی */
    .dropdown-content {
        position: absolute;
        top: 100%;
        right: 0;
        min-width: 200px;
        background: white;
        box-shadow: 0 8px 16px rgba(0,0,0,0.15);
        border-radius: 8px;
        padding: 8px 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.3s;
        z-index: 100;
    }
    
    /* نمایش با hover */
    .dropdown:hover .dropdown-content {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    /* گزینه‌ها */
    .dropdown-content a {
        display: block;
        padding: 10px 20px;
        color: #333;
        text-decoration: none;
        transition: background 0.2s;
    }
    
    .dropdown-content a:hover {
        background: #f0f0f0;
    }

انواع Dropdown

نوعتوضیح
Hoverبا ماوس باز می‌شود
Click (CSS-only)با checkbox hack
Mega Menuمنوی بزرگ چندستونه
Multi-levelکشویی تو در تو

Dropdown با Checkbox Hack

<input type="checkbox" id="toggle" hidden>
    <label for="toggle">منو</label>
    <div class="menu">...</div>
    
    #toggle:checked ~ .menu {
        display: block;
    }

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط