ایجاد منوی کشویی با پلاگین Bootstrap

در این بخش نحوه اضافه کردن منوی کشویی به اجزاء مختلف با استفاده از پلاگین بوت استرپ خواهید آموخت.

منوهای کشویی معمولاً در داخل هدرهای منوی راهبری جهت نمایش لیستی از لینک های مرتبط زمانی که کاربر موس خود را بر روی عنصر مبدل برده یا روی آن کلیک میکند، به کار برده میشوند.
میتوانید از پلاگین کشویی بوت استرپ جهت اضافه کردن منوهای کشویی متغیر که با کلیک کردن باز و بسته میشوند، تقریباً به هر چیزی مانند لینک ها، دکمه ها یا گروه های دکمه، منوهای راهبری، کلیدها و راهبری دانه ای (pills nav) و ... استفاده کنید بدون نیاز به نوشتن حتی یک خط کد جاوا اسکریپت.

اضافه کردن منوهای کشویی از طریق ویژگی  -data :

بوت استرپ یک مکانیزم خوب و ساده برای اضافه کردن منوی کشویی به یک عنصر از طریق ویژگی -data ارائه می نماید. مثال زیر حداقل کد لازم برای اضافه کردن یک منوی کشویی به یک لینک از طریق ویژگی -data را ارائه میکند :








خروجی مثال بالا به شکل زیر خواهد بود :



مثال بالا ساده ترین حالت منوهای کشویی در Bootstrap را نمایش میدهد. بیایید هر بخش کد را یک به یک بررسی کنیم :

توضیح کد :

منوی کشویی بوت استرپ دو عنصر پایه دارد : عنصر مبدل منوی کشویی که میتواند یک دکمه یا لینک باشد و خود منوی کشویی

• کلاس dropdown. یک منوی کشویی را مشخص میکند.
• کلاس dropdown-toggle. عنصر مبدل را تعریف میکند که در مثال ما یک هایپر لینک میباشد. ویژگی "data-toggle="dropdown بر روی عنصر مبدل جهت باز و بسته کردن منوی کشویی، مورد نیاز است.
• عنصر caret. ،  یک مثلث کوچک رو به پایین در داخل مبدل ایجاد میکند که نشان میدهد لینک مورد نظر حاوی یک منوی کشویی میباشد.
• لیست نامرتب با کلاس dropdown-menu. در حقیقت منوی کشویی را ایجاد میکند که عموماً شامل لینک ها یا عملیات های مرتبط است.

کد مثال بالا یک مشکل کوچک دارد. اگر روی لینک منوی کشویی کلیک کنید یک کاراکتر # به URL اضافه میشود. اگر میخواهید URL ها بدون تغییر بمانند از ویژگی data-target به جای "#"=href استفاده نمایید. مانند مثال زیر :







به طور مشابه میتوانید منوی کشویی را به دکمه ها و اجزاء منوی راهبری هم اضافه کنید. بخش بعدی، پیاده سازی های رایج منوهای کشویی در Bootstrap را نشان میدهد.

منوهای کشویی در راهبری :

مثال زیر نحوه اضافه کردن منوهای کشویی به منوی راهبری را نمایش میدهد.
























خروجی مثال بالا به شکل زیر خواهد بود :




نکته : میتوانید با اضافه کردن کلاس divider. به یک عنصر لیست خالی، خط های جداکننده بین لینک های داخل منوی کشویی ایجاد کنید.

منوهای کشویی در راهبری دانه ای (pills nav) :

مثال زیر نحوه اضافه کردن منوی کشویی به راهبری دانه ای را نشان میدهد :




















خروجی مثال بالا به شکل زیر خواهد بود :




به سادگی میتوانید با جا به جا کردن nav-pills. با nav-tabs. و بدون تغییر دیگری در کد، مثال بالا را به منوی کشویی کلیدی (tab) تبدیل کنید.

منوهای کشویی در دکمه ها :

مثال زیر نحوه اضافه کردن منوی کشویی به دکمه ها را نشان میدهد :










خروجی مثال بالا به شکل زیر خواهد بود :


 

دکمه های  دو تکه ( split ) کشویی در Bootstrap :

مثال زیر نحوه اضافه کردن منوی کشویی به دکمه های دو تکه را نمایش میدهد :

 








خروجی مثال بالا به شکل زیر خواهد بود :




نکته : میتوانید از کلاس های تغییر سایز بوت استرپ برای دکمه ها مانند: btn-lg ، .btn-sm. و btn-xs. برای تغییر سایز قسمت کشویی دکمه ها استفاده نمایید.

منوهای کشویی در داخل گروه های دکمه :

جهت ایجاد منوهای کشویی داخل یک گروه دکمه، فقط کلاس btn-group به همراه کد منوهای کشویی را در داخل یک کلاس btn-group. دیگر قرار دهید.













خروجی مثال بالا به شکل زیر خواهد بود :




به طور مشابه میتوانید منوهای کشویی در داخل گروه های دکمه عمودی ایجاد نمایید :













خروجی مثال بالا به شکل زیر خواهد بود :




 

اضافه کردن هدر به آیتم های منوی کشویی :

همچنین میتوانید با اضافه کردن کلاس dropdown-header. به عنصر لیست، یک سرصفحه (هدر) جهت برچسب گذاری بخشی از آیتم های منو در داخل منوی کشویی ایجاد کنید.













خروجی مثال بالا به شکل زیر خواهد بود :

غیر فعال کردن آیتم های داخل منوی کشویی :

میتوانید کلاس disabled. را به عنصر لیست اعمال کنید تا آیتم های منو غیرفعال شوند. با این حال لینک همچنان قابل کلیک کردن میباشد. جهت حذف این حالت ویژگی href را با استفاده از جاوا اسکریپت یا به صورت نرمال حذف کنید.












خروجی مثال بالا به شکل زیر خواهد بود :









 

اضافه کردن منوهای کشویی از طریق جاوا اسکریپت :

همچنین میتوانید منوهای کشویی را با استفاده از جاوا اسکریپت اضافه کنید. تنها کافیست تابع()dropdown را با id یا کلاس لینک یا دکمه مورد نظر در کد جاوا اسکریپتتان فراخوانی نمایید.





نکته : "data-toggle="dropdown همچنان برای عنصر مبدل منوی کشویی نیز مورد نیاز میباشد(بدون توجه به اینکه تابع dropdown را با جاوا اسکریپت یا -data فراخوانی کنید).

توابع :

این تابع، تابع استاندارد منوهای کشویی در Bootstrap میباشد و برای باز و بسته کردن منوها برای یک منوی راهبری یا کلیدی مشخص به کار میرود.



 

رویدادها (Event):

جدول زیر، رویدادهای استاندارد بوت استرپ برای افزایش عملکرد منوهای کشویی را نمایش میدهد. کلیه رویدادها در منوهای کشویی درعنصر والد ( parent ) مربوط به dropdown-menu. ، فعال میشوند.
 

event	توضیحات
show.bs.dropdown	این رویداد به محض فراخوانی تابع show فعال میشود. میتوانید با استفاده از event.relatedTarget ، عنصر anchor را مقصدگذاری نمایید.
shown.bs.dropdown	این رویداد زمانی که منوی کشویی برای کاربر visible میشود، فعال میشود. تا زمان کامل شدن CSS منتظر میماند. میتوانید با استفاده از event.relatedTarget ، عنصر anchor را مقصدگذاری نمایید.
hide.bs.dropdown	این رویداد به محض فراخوانی تابع hide فعال میشود. میتوانید با استفاده از event.relatedTarget ، عنصر anchor را مقصدگذاری نمایید.
hidden.bs.dropdown	این رویداد زمانی که عملیات مخفی بودن پنجره از کاربر پایان می یابد، فعال میشود. این رویداد تا پایان کامل عملیات transition در CSS منتظر میماند و بعد فعال میشود.

مثال زیر محتوای متنی لینک منوی کشویی را وقتی که روی آن کلیک میکنید، نشان میدهد :








مطلب بعدی -> ایجاد کلیدهای پویا در Bootstrap

• - آموزش بوت استرپ
• - آموزش متریال دیزاین
• -مطالب آموزشی سئو

---