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

تاریخ انتشار: 23 دی 1394

تعداد بازدید: 42 نفر

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

منوهای کشویی معمولاً در داخل هدرهای منوی راهبری جهت نمایش لیستی از لینک های مرتبط زمانی که کاربر موس خود را بر روی عنصر مبدل برده یا روی آن کلیک میکند، به کار برده میشوند.
میتوانید از پلاگین کشویی بوت استرپ جهت اضافه کردن منوهای کشویی متغیر که با کلیک کردن باز و بسته میشوند، تقریباً به هر چیزی مانند لینک ها، دکمه ها یا گروه های دکمه، منوهای راهبری، کلیدها و راهبری دانه ای (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

مطالب مرتبط

اشتراک گذاری:

مشاهده نمونه های بیشتر

24 تیر 1403

ثبت مکان در گوگل مپ: آموزش ثبت رایگان مکان کسب و کارتان تنها در ۵ گام

20 تیر 1403

اینفوگرافیک چیست؟ انواع، کاربرد ها و مراحل ساخت Infographic

2 خرداد 1402

راهنمای جامع طراحی سایت فروشگاهی

این راهنما شما را با دانش و استراتژی های مورد نیاز طراحی سایت فروشگاهی استثنایی مجهز می کند. برای کشف قدرت طراحی در فروش آنلاین و ایجاد یک برند دیجیتال موفق آماده شوید.

31 اردیبهشت 1402

تایپوگرافی چیست و چگونه از آن در طراحی سایت استفاده کنیم؟

با استفاده از قدرت تایپوگرافی، طراحان می توانند تجربیات دیجیتالی فریبنده و فراموش نشدنی ایجاد کنند که مجذوب، اطلاع رسانی و تأثیر ماندگاری بر روی کاربران می شود. در این مقاله قصد داریم به صورت کامل مفهموم تایپوگرافی در طراحی سایت را برای شما شرح دهیم.

25 اردیبهشت 1402

طرح رنگ چیست و چگونه از آن در طراحی سایت استفاده کنیم؟

در این مقاله، ما به پیچیدگی‌های طرح‌های رنگی در طراحی وب‌ سایت، بررسی اصول تئوری رنگ‌ها، تأثیرات روان‌شناختی رنگ‌ها و ملاحظات عملی برای انتخاب پالت رنگ مناسب می‌پردازیم.

23 اردیبهشت 1402

همه چیز در مورد چیدمان و ناوبری در طراحی سایت

ناوبری از مهم ترین عناصر طراحی سایت است که این مقاله به اهمیت طرح‌بندی و ناوبری در طراحی سایت، ارائه اصول کلیدی، استراتژی‌ها و بهترین شیوه‌ها برای بهینه‌سازی وب‌سایت شما برای موفقیت می‌پردازد.