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

هاست

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

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> اضافه کنید.

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

 

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

 

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

لطفا به این مطلب امتیاز بدید


دانلود


هاست + دامنه رایگان برای وردپرس و سایر اسکریپت ها وطن هاست >

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

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

کلمات کلیدی پست :
درگاه پرداخت
مطالب مرتبط
4,401صفحه اختصاصی برای خطای پایگاه داده تاریخ : 2013/10/27
10,337اسکریپت ایجاد سایت موسیقی Ci Music Online تاریخ : 2014/11/15
5,235افزودن پست تایپ به حلقه مطالب وردپرس تاریخ : 2014/12/9
5,293آموزش ترفندهای جستجو در گوگل تاریخ : 2016/08/2
3,460آموزش تصویری تغییر دامنه سایت در گوگل وبمستر تاریخ : 2018/04/13
11,936دانلود مجموعه عظیم ۸۳ اکشن فوق حرفه ای تغییر رنگ تاریخ : 2015/01/1
6,372حل مشکل آپلود swf در وردپرس تاریخ : 2014/01/2
3,943Nofollow نمودن خودکار لینک ها تاریخ : 2014/01/10
4,119جلوگیری از اسپم ها در انجمن ویبولتین تاریخ : 2014/01/23
11,356کد نمایش چند تبلیغ بنری در یک مکان به صورت تصادفی تاریخ : 2015/09/19
6,462انتخاب و ثبت دامنه برای داشتن وب سایت تاریخ : 2017/06/6
4,176کلیدهای میانبر در وردپرس تاریخ : 2016/07/31
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب