دنیای برنامه نویسی و اپلیکیشن

baner-telegram
شما اینجا هستید : صفحه اول » طراحی سایت » آموزش CSS » آموزش کامل ساخت Dropdown در فیلم آموزش CSS
آموزش کامل ساخت Dropdown در فیلم آموزش CSS

آموزش کامل ساخت Dropdown در فیلم آموزش CSS

در این قسمت از فیلم آموزش CSS نحوه استفاده از Dropdown آموزش داده شده است ، از dropdown یا کشویی می تونید برای متن ، منو ، عکس ، دکمه ( botton ) استفاده بکنید .

نحوه استفاده از Dropdown :

برای استفاده ازdropdown یا کشویی باید اول اون رو پنهانش بکنیم و بعد از Hover شدن یا کلیک شدن اون رو نمایش بدیم .

برای استفاده از کشویی برای یک متن می تونید از سورس کد زیر استفاده کنید :

سورس کد HTML :

کد CSS :

در کدهای بالا مهم ترین کاری که باید انجام دهید این است که اون متنی را که می خواهید بعد از کلیک شدن یا Hover شدن نمایش دهید اول باید اون رو با استفاده از display: none پنهان کنید و بعد از Hover شدن متن اصلی آن را نمایش دهیم .

عبارت dropdown:hover  .dropdown-content.  در CSS می گوید که وقتی که کلاس dropdown. هاور ( Hover ) شد به کلاس dropdown-content استایل هایی که می دیم رو اعمال کن .  ( در فیلم آموزش CSS توضیح داده شد است )

استفاده از  Dropdown برای یک Button :

کد HTML :

کد CSS :

برای راست چین کردن کافیست که به کلاسdropdown خاصیت float: right را بدهید .

حالا برای تمرین می تونید یک منوی کشویی افقی با استفاده از آموخته های این جلسه درست کنید ، اگر سوالی یا اشکالی در این مورد داشتید در قسمت نظرات آن را بنویسید .

فیلم آموزش ساخت dropdown را می توانید از لینک زیر دانلود کنید .

پیشنهاد می کنیم حتما بخوانید :

درباره : رضا طوماری

دانشجوی رشته نرم افزار ، عاشق برنامه نویسی

نظرات کاربران :



جواب سوال چیه ؟ *