منوی کشویی CSS

منوی کشویی CSS به منویی گفته میشود که چندین عنصر را پنهان کرده یا اطلاعات بیشتری را نمایش دهد. این محتوا معمولاً با تغییر ماوس ظاهر می شود.

نکات اصلی منوی کشویی CSS:

• منوی کشویی CSS محتوا یا گزینه ها را پنهان میکند تا زمانی که یک رویداد خاص اتفاق بیفتد . (معمولاً وقتی که: شناور باعث می شود).
• HTML ساختار اصلی را ایجاد می کند ، در حالی که CSS خصوصیات اصلی را برای سبک کردن یک دکمه یا متن به عنوان یک فهرست کشویی اضافه می کند.
• منوهای کشویی برای افزودن دکمه های ناوبری معمول هستند.

منوی کشویی پایه

منوی CSS به این معنی است که یک منوی قابل جابجایی را عمدتا با CSS و چندین عنصر HTML ایجاد میکنید.

نگاهی به این مثال کد ، روند ایجاد یک منوی کشویی را نشان می دهد:

.drop {
    position: relative; 
    display: inline-block;
}

.drop-content {
    position: absolute;
    background-color: #8842d5;
    min-width: 150px;
   padding: 15px;
   z-index: 1;
   display: none; 
}

.drop:hover .drop-content {
    display: block; 
}

1. اولین قدم ایجاد عنصر HTML است که قرار است در ابتدا در منوی کشویی مورد قابل رویت باشد. به عنوان مثال ، <span> می تواند عناصر پنهان را هنگامی که بر روی آن قرار دارید ، نشان دهد.
2. سپس ، لازم است محتوایی که منوی کشویی پنهان می کند اضافه کنید. این کار را با قرار دادن عناصر پنهان در <div> انجام می دهید. نمایش: بلوک درون خطی ، محتوا را موقعیت می دهد.
3.  <div> دارای موقعیت نسبی است تا اطمینان حاصل کند که محتوای پنهان در زیر عنصر قابل مشاهده ظاهر می شود.
4. ذکر موقعیت: مطلق و نمایشگر ضروری است: هیچ کدام برای جعبه محتوا تضمین نمی کند که تا زمان شناور مخفی بماند.
5. می توانید ویژگی های CSS را برای منوی کشویی اضافه کنید: پس زمینه ها ، padding ، عرض یا قلم ها را تغییر دهید.
6. در آخر، اضافه می کنیم: hover selector برای نمایش: block تا محتوای پنهان به محض حرکت مکان نماهای موس بر روی عنصر قابل مشاهده ، ظاهر شود.

توجه: سرریز: خودکار امکان پیمایش منوی پنهان در صفحه های کوچکتر را فراهم می کند.

افزودن پیوندها

منوی کشویی CSS با پیوندها می تواند به عنوان منوی پیمایشی برای وب سایت ها باشد.

.drop_btn { /* This is for styling the dropdown button */
    background-color: #8842d5;
    color: white;
    padding: 15px;
    font-size: 18px;
    border: none;
    cursor: pointer;
}

.drop { 
    display: inline-block;
    position: relative;
}
 	
.drop-content { /* For styling the content itself */
    background-color: white;
    min-width: 150px;
    display: none;
    position: absolute;
}
	
.drop-content a { /* For styling the links inside the content */
    color: black;
    padding: 15px;
    text-decoration: none;
    display: block;
}

.drop-content a:hover { /* Change the color of the dropdown links when they are hovered on */  	
    background-color: lightgray;
}

.drop:hover .drop-content { /* Shows the dropdown menu list when hovered on */
    display: block;
}

.drop:hover .drop_btn { /* Changes the dropdown button color once it is hovered on as well */
    background-color: #7300ff;
}

با دنبال کردن مراحل مشابه قسمت قبل ، این نوع منو را ایجاد می کنید. با این حال ، به جای جعبه متن ، عناصر لنگر دارید که به URL ها اشاره می کنند.

توجه: برای اینکه پیوند برای منوی کشویی CSS مناسب تر باشد ، باید متن-تزئین را برای حذف زیرزمینه پیش فرض اعمال کنید.

مطالب را به راست تراز کنید

این امکان وجود دارد که محتوای منوی کشویی CSS به جای سمت چپ پیش فرض در سمت راست عنصر قابل مشاهده ظاهر شود ، از متن-تراز: راست استفاده کنید.

.drop-content {
    right: 0;
}

نکات مهم منوی کشویی CSS:

• <select> یک عنصر HTML است که برای ایجاد منوهای کشویی استفاده می شود.
• می توانید: شناور را با گزینه های دیگر جایگزین کنید. به عنوان مثال ، پس از کلیک کاربران بر روی عنصر قابل مشاهده ، onclick جاوا اسکریپت محتوای منو را نشان می دهد.

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