منوی کشویی

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی 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 تنظیم شده‌است. می توانید آن را تغییر دهید .<translate> نکته</translate>  نکته: اگر می‌خواهید عرض محتوای کشویی برابر با اندازه کلید کشویی باشد، ویژگی 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 اضافه کنیم.



منابع آموزشی