Dropdown

Dropdown یا منوی کشویی یک منو هست که وقتی کاربر روی یک آیتم (مثلاً "خدمات") کلیک یا هاور می‌کنه، گزینه‌های بیشتری نمایش داده میشه.
این روش باعث میشه منوی شما مرتب‌تر و حرفه‌ای‌تر باشه.

✅ ساخت یک Dropdown ساده با HTML و CSS

🔹 HTML

<!DOCTYPE html> <html lang="fa"> <head> <meta charset="UTF-8"> <title>Dropdown Menu Example</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul class="navbar"> <li><a href="#home">خانه</a></li> <li><a href="#about">درباره ما</a></li> <!-- Dropdown --> <li class="dropdown"> <a href="#services" class="dropbtn">خدمات ▼</a> <div class="dropdown-content"> <a href="#web">طراحی وب</a> <a href="#seo">سئو</a> <a href="#app">اپلیکیشن</a> </div> </li> <li><a href="#contact">تماس با ما</a></li> </ul> </body> </html>

🔹 CSS

/* استایل نوار ناوبری */ .navbar { list-style-type: none; margin: 0; padding: 0; background-color: #333; overflow: hidden; } .navbar li { float: left; } .navbar li a, .dropbtn { display: block; color: white; text-align: center; padding: 14px 20px; text-decoration: none; } .navbar li a:hover, .dropdown:hover .dropbtn { background-color: #111; } /* استایل منوی کشویی */ .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; /* مخفی بودن پیشفرض */ position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #ddd; } /* نمایش هنگام هاور */ .dropdown:hover .dropdown-content { display: block; }

📌 نتیجه

🔹 وقتی روی آیتم "خدمات" هاور کنی، یک منوی کشویی با گزینه‌های بیشتر باز میشه.
🔹 منو ظاهر و مخفی میشه بدون نیاز به JavaScript (فقط با CSS).

🚀 نکته حرفه‌ای

  • میشه Dropdown رو با کلیک باز کرد (اون موقع نیاز به JavaScript هست).

  • میشه چند سطحی (زیرمنو در زیرمنو) ساخت.

  • در بوت‌استرپ هم Dropdown آماده وجود داره.