تبلیغات
حراجی دامنه های ویژهمشاهده
تبلیغات

تبلیغات
تبلیغات تبلیغات

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

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
کلمات کلیدی پست :
تبلیغات تبلیغات
تبلیغات تبلیغات
مطالب مرتبط
22,920آموزش نحوه تغییر آدرس ورود به مدیریت وردپرس تاریخ : 2015/08/11
8,884ووکامرس حرفه ای تر با افزونه WooCommerce Jetpack تاریخ : 2016/11/6
7,977آموزش اجرای متد ها در jquery تاریخ : 2013/11/21
9,588آموزش قرار دادن تبلیغات بعد از پست اول در وردپرس تاریخ : 2013/10/20
7,368اسکریپت مدیریت کاربران CodeIgniter User Manager تاریخ : 2014/10/31
1,964آموزش وارد کردن و صادر کردن بلاک‌ها در ویرایشگر Gutenberg وردپرس تاریخ : 2019/02/15
5,608طرح آبی برای فرم ورود وردپرس + آموزش تاریخ : 2014/08/1
5,087نکات قابل توجه برای راه اندازی سایت تاریخ : 2013/12/13
6,922انتخاب و ثبت دامنه برای داشتن وب سایت تاریخ : 2017/06/6
7,095معرفی راحت وردپرس به گوگل وبمستر تاریخ : 2014/07/5
26,195آموزش رفع مشکل نصب افزونه و قالبهای وردپرس تاریخ : 2014/01/10
1,680تغییر پورت SSH لینوکس برای امنیت بیشتر تاریخ : 2019/12/2
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب
تبلیغات
تبلیغات
تبلیغات
تبلیغات