طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

ساخت منو ریسپانسیو با jQuery و CSS


ساخت منو ریسپانسیو با jQuery و CSS

در این أموزش jQuery فصد داریم به شما نحوه ساخت منو ریسپانسیو با jQuery و CSS بدون استفاده از مدیا کویری ها (@media query ) را نشان بدیم.

طراحی واکنشگرا (Responsive) برای صفحات وب به منظور قابل انعطاف کردن صفحه برای صفحات نمایش با اندازه های مختلف استفاده می شود.

در این مثال, ما یک منو در هدر داریم. قصد داریم این منو را با دو سایز صفحه نمایش مختلف واکنشگرا کنیم. لیست منو بصورت افقی مرتب شده است. اگر عرض صفحه نمایش کمتر از ۶۰۰ پیکسل باشد پس منو بصورت ریسپانسیو و عمودی باز می شود (slide Down).

ساخت منو ریسپانسیو با jQuery و CSS

کد HTML منو

این کد به شما منوی هدر را نمایش می دهد. که شمال یک لیست از آیتم های منو و آیکون بازکردن/بستن است. این آیکون فقط در صفحات نمایش کوچکتر از ۶۰۰px نمایش داده می شود.

و استایل های منو ریسپانسیو بصورت زیر است :

ساخت منو ریسپانسیو با jQuery و CSS

اگر صفحه نمایش <600px باشد, پس منوی افقی مخفی خواهد شد و آیکون بازکردن/بستن منو در سمت رایت هدر نمایش داده می شود. با کلیک روی این آیکون, منو بصورت اسلایدی و بااستفاده از jQuery باز می شود.

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

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

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید

اگر مفید بود, لطفا به اشترک بگذارید تا دوستان دیگر نیز بهره ببرند

حسن شفیعی
مدرس ، پنتستر ، توسعه دهنده اپلیکیشن های تحت وب ، عضو مرکز حامی نخبگان و از مدیران و اعضای رسمی تیم امنیتی آشیانه هستم . علاقه خاصی به زبان php و امنیت شبکه و لینوکس دارم و هر روز تلاش می کنم به این حوزه ها مسلط تر شوم و اطلاعاتم را در وب به اشتراک بگذارم

دیدگاه کاربران

2 پاسخ به “ساخت منو ریسپانسیو با jQuery و CSS”

  1. caktoos گفت:

    سلام
    اگر یه پیش نمایش میزاشتین عالی میشد و دوم اینکه کجای قالب بزاریم اینا رو؟

    1+
    • حسن شفیعی گفت:

      سلام. لطفا فایل قالب خود را ویرایش و در بخش هدر به جای منوی خودتون این کدها را مطابق تنظیمات و کدنویسی قالب خود اضافه کنید
      موفق باشید.

      0

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

آموزش طراحی وب سایت

نظر کاربران عزیز

آموزش های آنلاین در چه زمینه ای تهیه کنیم ؟

  • آموزش جاوااسکریپت و جی کوئری (45%, 10)
  • آموزش ساخت ربات تلگرام (45%, 10)
  • آموزش بوت استرپ 4 (9%, 2)

تعداد رای ها : 22

Loading ... Loading ...

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

مجوزهای ما


logo-samandehi نماد اعتماد الکترونیک

دانلود کتاب

عضویت در خبرنامه