منوی کشویی

Main Page Tutorial
موارد آموزشی
۱	خانه
۲	مقدمه
۳	شیوهٔ نوشتار
۴	انتخابگرها
۵	اضافه‌کردن CSS
۶	نظرات
۷	رنگ‌ها RGB HEX HSL
۸	پس‌زمینه‌ها رنگ پس‌زمینه‌ها تصویر پس‌زمینه تکرار پس‌زمینه پیوست در پس‌زمینه کوته‌شدهٔ پس‌زمینه
۹	کادرها عرض کادر رنگ کادر اطراف کادر کوته‌شدهٔ کادر کادر گرد شده
۱۰	حاشیه‌ها شکسته‌شدن حاشیه
۱۱	Padding
۱۲	ارتفاع/عرض
۱۳	Box Model
۱۴	Outline عرض Outline رنگ Outline کوته‌شدهٔ Outline Outline Offset
۱۵	متن رنگ متن آراستگی متن تبدیل‌کردن متن فاصله‌گذاری متن سایهٔ متن
۱۶	قلم‌ها خانواده قلم استایل قلم اندازهٔ قلم کوته‌شدهٔ قلم
۱۷	آیکن‌ها
۱۸	لینک‌ها
۱۹	لیست‌ها
۲۰	جداول
۲۱	ویژگی Display
۲۲	ویژگی Max-Width
۲۳	ویژگی Position
۲۴	ویژگی Overflow
۲۵	ویژگی Float ویژگی Clear مثال‌های Float
۲۶	مقدار Inline-block
۲۷	ترازکردن
۲۸	ترکیب کننده‌ها
۲۹	شبه کلاس
۳۰	شبه عنصر
۳۱	ویژگی Opacity
۳۲	نوار Navigation ناوبری ناوبری عمودی ناوبری افقی
۳۳	منو آبشاری
۳۴	گالری تصویر
۳۵	Image Sprites
۳۶	انتخاب‌گرهای خاصیت
۳۷	فرم‌ها
۳۸	شمارنده‌ها
۳۹	چیدمان وب‌سایت
۴۰	واحدها
۴۱	اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

ساخت یک منوی کشویی قابل hover شدن با CSS.

نسخهٔ نمایشی: مثال های Dropdown

نشانه‌گر موس را روی مثال‌های زیر ببرید:

منوی کشویی ساده

ساخت یک جعبه کشویی ساده که هنگام قرار گرفتن نشانه‌گر موس بر روی عنصر، ظاهر می‌شود.

مثال

 1 <style>
 2 .dropdown {
 3   position: relative;
 4   display: inline-block;
 5 }
 6 
 7 .dropdown-content {
 8   display: none;
 9   position: absolute;
10   background-color: #f9f9f9;
11   min-width: 160px;
12   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
13   padding: 12px 16px;
14   z-index: 1;
15 }
16 
17 .dropdown:hover .dropdown-content {
18   display: block;
19 }
20 </style>
21 
22 <div class="dropdown">
23   <span>Mouse over me</span>
24   <div class="dropdown-content">
25     <p>Hello World!</p>
26   </div>
27 </div>

مشاهدهٔ نتیجه

توضیح مثال

HTML) از هر عنصری برای باز کردن محتوای کشویی، مانند یک <span> ، یا یک عنصر <button> استفاده کنید.

از یک عنصر نگه دارنده (مانند <div>) برای ساخت محتوای کشویی و اضافه‌کردن هر آنچه که می‌خواهید در درون آن، استفاده کنید.

قرار دادن یک عنصر <div> دور عناصر برای موقعیت دهی صحیح محتوای کشویی با CSS.

CSS) کلاس .dropdown از position:relative استفاده می‌کند، که هنگامی که می‌خواهیم محتوای کشویی در قسمت سمت راست دکمه کشویی (با استفاده از position:absolute) قرار گیرد، مورد نیاز است.

کلاس .dropdown-content محتوای واقعی کشویی را نگه می‌دارد. به صورت پیش‌فرض مخفی است، و در هنگام قرارگیری موس روی عنصر (hover) نمایش داده خواهد شد. (مثال پایین را ببینید). توجه داشته باشید که ویژگی min-width برلبر با 160px تنظیم شده‌است. می توانید آن را تغییر دهید .  نکته: اگر می‌خواهید عرض محتوای کشویی برابر با اندازه کلید کشویی باشد، ویژگی width را برابر با ۱۰۰٪ تنظیم کنید (و overflow:auto را برای فعال سازی پیمایش در صفحات کوچک استفاده کنید).

به جای استفاده از یک کادر، از ویژگی box-shadow در CSS برای اینکه منوی کشویی شبیه به یک «کارت» باشد استفاده کرده‌ایم.

انتخابگر :hover برای نمایش منوی کشویی هنگامی که کاربر نشانه‌گر موس را روی کلید کشویی قرار می‌دهد استفاده می‌شود.

منوی کشویی

یک منوی کشویی ایجاد می کند که به کاربر اجازه می‌دهد یک گزینه را از لیست انتخاب کند:

این مثال بسیار شبیه به مثال قبل است، با این تفاوت که ما لینک‌هایی درون جعبه کشویی اضافه کرده‌ایم و آنها را استایل دهی کرده‌ایم تا برای یک کلید استایل دهی شده کشویی مناسب باشند:

مثال

 1 <style>
 2 /* Style The Dropdown Button */
 3 .dropbtn {
 4   background-color: #4CAF50;
 5   color: white;
 6   padding: 16px;
 7   font-size: 16px;
 8   border: none;
 9   cursor: pointer;
10 }
11 
12 /* The container <div> - needed to position the dropdown content */
13 .dropdown {
14   position: relative;
15   display: inline-block;
16 }
17 
18 /* Dropdown Content (Hidden by Default) */
19 .dropdown-content {
20   display: none;
21   position: absolute;
22   background-color: #f9f9f9;
23   min-width: 160px;
24   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
25   z-index: 1;
26 }
27 
28 /* Links inside the dropdown */
29 .dropdown-content a {
30   color: black;
31   padding: 12px 16px;
32   text-decoration: none;
33   display: block;
34 }
35 
36 /* Change color of dropdown links on hover */
37 .dropdown-content a:hover {background-color: #f1f1f1}
38 
39 /* Show the dropdown menu on hover */
40 .dropdown:hover .dropdown-content {
41   display: block;
42 }
43 
44 /* Change the background color of the dropdown button when the dropdown content is shown */
45 .dropdown:hover .dropbtn {
46   background-color: #3e8e41;
47 }
48 </style>
49 
50 <div class="dropdown">
51   <button class="dropbtn">Dropdown</button>
52   <div class="dropdown-content">
53     <a href="#">Link 1</a>
54     <a href="#">Link 2</a>
55     <a href="#">Link 3</a>
56   </div>
57 </div>

مشاهدهٔ نتیجه

راست چین کردن محتوای Dropdown

اگرشما می‌خواهید منوی کشویی به جای چپ به راست، از راست به چپ باشد، کد right: 0; را اضافه کنید

مثال

.dropdown-content {
  right: 0;
}

مشاهدهٔ نتیجه

مثالهای بیشتر

تصویر کشویی

چگونه یک تصویر و سایر محتوا را درون جعبه کشویی اضافه کنیم.

اشاره گر ماوس خود را روی تصویر ببرید:

مثال

مشاهدهٔ نتیجه

Navbar کشویی

چگونه یک منوی کشویی درون ناحیه navigation اضافه کنیم.

مثال

مشاهدهٔ نتیجه

صفحهٔ بعد»

«صفحهٔ قبل