دوره جامع سئو وردپرس

تبلیغات
طراحی و بهینه سازیمشاهده
هاست

ساخت منوی باز شونده برای سایت با استفاده از بوت استرپ

CSS / HTML , آموزش طراحی

امروز در سری جلسات آموزش طراحی سایت، قصد داریم برای شما آموزشی در خصوص ساخت منوی باز شونده برای سایت با استفاده از Bootstrap قرار دهیم. با این مقاله می‌توانید بدون دردسر برای سایت خود یک منوی بازشونده بسازید.

 

به‌صورت پیش‌فرض با کلیک کردن بر روی منوها گزینه‌هایی برای شما بازخواهند شد که این موضوع کاملاً عادلانه است اما خب در برخی موارد دیگر ممکن است بعضی از طراحان بخواهند یک منوی بازشونده با استفاده از hover بسازند. اگر شما جزء این دسته از افراد هستید پیشنهاد می‌کنیم این مقاله آموزشی را دنبال کنید. شاید این موضوع در وهله اول ازنظر بسیاری از شما سخت به‌نظر بیاید اما در این آموزش، ما روش آسانی را برای شما خواهیم گفت. نقل قولی از طرف یکی از سازندگان بوت استرپ در این‌باره:

  • “The purpose of a hover state is to indicate something is clickable (underlined text) or to provide some quick information (full URL in a tooltip). The purpose of a click is to actually do something, to take an explicit action.”

Mark Otto

ساخت منوی باز شونده در بوت استرپ

توجه داشته باشید که شما نباید از روی سایز و اندازه‌ی یک صفحه نمایشگر، قابلیت لمس آن را حدس بزنید. درواقع شما می‌توانید از CSS Level 4 Media Queries استفاده کنید و تشخیص دهید کاربر می‌تواند از منوی شناور یا Hover استفاده کند. یا اینکه ترجیح می‌دهد از یکی از ویژگی‌های JavaScript مانند Modernizr استفاده کند. بااین‌حال شما از هر روشی که استفاده کنید 100 درصد بدون مشکل نیست.

 

فایل‌های اصلی بوت استرپ را اضافه کنید.

در گام اول کدهایی که در زیر برای شما قرار داده‌ایم را در سایت خود قرار دهید.

ابتدا یک منوی ساده بسازید

با استفاده از کدهایی که ما در این قسمت برای شما قرار می‌دهیم می‌توانید به‌راحتی یک منوی ساده بسازید.

اضافه کردن یک سری استایل برای زیبایی بیشتر

در گام بعدی شما باید 3 قانون اساسی CSS را برای مؤلفه خود مشخص کنید. درواقع این موارد کار بسیار مهم و زیادی را انجام نمی‌دهند و تنها یک سری فواصل بین سبک‌های منوی شما می‌دهند که باعث زیبایی سایت شما می‌شود.

به همین راحتی! خب تا الان شما موفق شدید یک منوی Bootstrap معمولی بسازید.

ساخت منوی باز شونده برای سایت با استفاده از بوت استرپ

سفارشی کردن باز شونده‌ها

در این قسمت می‌خواهیم نحوه سفارشی‌سازی کردن dropdown ها را برای شما شرح دهیم.

 

این منو بر روی صفحات نمایشگر کوچک یعنی کمتر از 768 پیکسل با کلیک کردن بر روی لینک‌ها نمایش داده می‌شوند. در صفحات متوسط یعنی 768 پیکسل و بالاتر از آن نیز با استفاده از Hover هدف را مشخص می‌کنیم.

 

برای رسیدن به این هدف باید در ابتدا حاشیه پیش‌‌فرض منوهای کشویی را حذف کنید. در واقع ما نیاز داریم که این شکاف‌‌ها را از بین ببریم در واقع به همین دلیل است که کاربر می‌‌تواند بدون فعال کردن دوباره همه چیز بتواند بین parent link و dropdown در حرکت باشد.

در مرحله بعدی ما یک کد jQuery را برای شما خواهیم گفت که یک سری اقدامات را برای شما انجام خواهد داد. این کد با بارگذاری صفحه و تغییر اندازه پنجره اجرا می‌شود.

 

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

 

تغییر حالت منو از کلیک به هاور موس

کد زیر درواقع همان کد jQuery است که شما به آن نیاز دارید. پس به هدر سایت خود با تگ <script> اضافه کنید.

اگر شما موارد گفته‌شده را به خوبی رعایت کنید می‌توانید با چند کد بسیار ساده یک منو بازشونده برای سایت خود طراحی کنید. البته به این نکته هم توجه داشته باشید که ممکن است موارد سفارشی گفته‌شده برای تمامی سایت‌ها مناسب نباشد.

 

منویی که استفاده کرده‌‌ایم با سایز عرض ۷۶۸ صفحه کار می‌‌کند. اگر می‌‌خواهید همین منو عملکرد مشابهی بر روی تبلت هم داشته باشد و دقیقا همینطور کار کند باید حتما این عدد را تغییر دهید.

 

امیدواریم این مقاله به شما برای ساخت منوی باز شونده کمک کرده باشد. موفق و پیروز باشید.


دانلود


دوره حرفه ای آموزش سئو سایت مارکیو | رتبه اول گوگل یک رویا نیست!


مطلب مفیدی بود ؟
نویسنده : mohammad 0 CSS / HTML , آموزش طراحی

لینک کوتاه مطلب : https://www.20script.ir/?p=48761

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
10,052آموزش وردپرس افزودن ابزارک به قالب وردپرس تاریخ : 1393/12/3
2,432نمایش عنوان پست با طول محدود در وردپرس تاریخ : 1397/03/16
3,602جلوگیری از انتشار مطالب بدون تصویر شاخص در وردپرس تاریخ : 1395/01/30
90,386آموزش کامل تصویری نصب و کار با ووکامرس تاریخ : 1392/09/3
4,810آموزش برنامه نویسی PHP از سطح پایه تاریخ : 1395/08/11
6,204حل مشکل آپلود swf در وردپرس تاریخ : 1392/10/12
4,590اسکریپت جی کوئری جستجوگر سریع صفحات هلمز تاریخ : 1396/08/8
876چگونه کش DNS را در ویندوز، لینوکس و مک خالی کنیم؟ تاریخ : 1398/03/11
3,892انتشار پنجمین شماره ماهنامه طراحی وب تاریخ : 1393/06/6
4,127نمایش سایر مطالب نویسنده در هر پست وردپرس تاریخ : 1394/05/11
5,832نمایش کلمه کلیدی و تعداد نتایج در صفحه جستجو وردپرس تاریخ : 1394/05/15
7,096آموزش ویدیویی ساخت اکانت FTP تاریخ : 1392/11/12
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب
Xبستن تبلیغات