تبلیغات
طراحی و بهینه سازیمشاهده
آخرین ارسال های تالار مشاهده انجمن
  • مشکل عدم تکمیل مرحله آپدیت افزونه های وردپرس! 1 پاسخ 86 بازدید
  • پاک کردن ویروس سایت 2 پاسخ 238 بازدید
  • FS-Poster 6.0.7 5 پاسخ 722 بازدید
  • خطا در اضافه کردن اکانت در افزونه FS Poster 0 پاسخ 111 بازدید
  • افزونه یوست سئو 0 پاسخ 123 بازدید
  • اسلایدر رولوشن 1 پاسخ 431 بازدید
  • نصب نشدن افزونه اسکرپس scrapes 1 پاسخ 299 بازدید
  • درخواست راهنمایی در خصوص افزونه Duplicator 6 پاسخ 592 بازدید
  • راه اندازی سایت پاپ آپ 0 پاسخ 286 بازدید
  • اتصال وردپرس به api 9 پاسخ 651 بازدید
  • هاست

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

    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

    کلمات کلیدی پست :
    درگاه پرداخت
    مطالب مرتبط
    5,171انتخاب کلمات کلیدی حرفه ای تر برای سئو بهتر تاریخ : 2016/07/29
    3,726جلوگیری از انتشار مطالب بدون تصویر شاخص در وردپرس تاریخ : 2016/04/18
    6,79612 ابزار حرفه ای و رایگان برای تست سرعت وب سایت تاریخ : 2017/07/3
    40,034آموزش ارسال اطلاعات یک فرم به ایمیل تاریخ : 2013/10/26
    8,538دانلود صفحه زیبا به سبک مترو Metro UI تاریخ : 2015/11/13
    4,028حذف رشته های کوئری از سورس صفحات تاریخ : 2014/08/2
    8,692آموزش قرار دادن تبلیغات بعد از پست اول در وردپرس تاریخ : 2013/10/20
    1,368جاوا اسکریپت چیست و چه کاربردی دارد؟ تاریخ : 2019/04/27
    964چگونه کش DNS را در ویندوز، لینوکس و مک خالی کنیم؟ تاریخ : 2019/06/1
    10,197اسکریپت ایجاد سایت موسیقی Ci Music Online تاریخ : 2014/11/15
    6,276حل مشکل آپلود swf در وردپرس تاریخ : 2014/01/2
    3,286جستجو در فیلدهای سفارشی وردپرس بدون افزونه تاریخ : 2016/09/15
    برخی از قالب های وبلاگ - بیست اسکریپت
    قالب عشق بین انگشت ها
    قالب دخترونه و آرایش
    قالب زیبای ماشین
    قالب فانتزی و طنز چِشم
    قالب دختر رویایی
    قالب وبلاگ دکوراسیون
    قالب وبلاگ کلبه و درخت
    قالب دختر زیبا
    قالب پسرونه غمگین
    قالب عاشقانه قلب