49
تشکر

منوی های ریسپانسیو – نوع اول

طراحی رسپانسیو

طراحی رسپانسیو

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

در ادامه همراه ما باشید…

آشنایی با نحوه کار

ابتدا دمو را مشاهده کنید.

ما برای ساخت منویی که در دمو مشاهده کردید باید از Media Query و jQuery استفاده کنیم. ابتدا باید دو منو بسازیم که یکی از آن‌ها مخصوص نمایشگرهای دکستاپ و دیگری مخصوص نمایشگر های تبلت و موبایل است.

<!DOCTYPE html>
<html>
<head>
  <title>Nav Responsive - Section 1</title>
  <link rel="stylesheet" href="style/style.css">
</head>
<body>
  <nav id="mobile-nav">
    <a href="#">صفحه اصلی</a>
    <a href="#">درباره ما</a>
    <a href="#">نقشه سایت</a>
  </nav>
  <div id="main">
    <nav id="desktop-nav">
      <a href="#" id="nav-toggle"></a>
      <a href="#">صفحه اصلی</a>
      <a href="#">درباره ما</a>
      <a href="#">نقشه سایت</a>
    </nav>
  </div>
  
  <script src="js/jquery-1.8.3.min.js"></script>
  <script src="js/main.js"></script>
</body>
</html>

در استایل برنامه با استفاده از Media Query زمانی که نمایشگر کاربر، دسکتاپ است باید منوی مخصوص موبایل را نمایش ندهیم. و زمانی که نمایشگر کاربر موبایل است باید منوی موبایل را نمایش دهیم. مانند کد زیر:

#mobile-nav {
  display: none;
}
@media (max-width: 767px) {
  #desktop-nav a { display: none;  }
  #mobile-nav {
    display: block;
  }
}

و در آخر با استفاده از jQuery انیمیشن های مخصوص نمایش منو در نمایشگر های موبایل را درست میکنیم. (شما میتوانید از پلاگین Easing هم برای انیمیشن ها استفاده کنید).

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

مشاهده دمو

دانلود دمو

  • mahyar می‌گه:

    salam dadash
    edame bede in responsiveo
    kheyli barash amuzesh kame
    felan kamel tarin manba khodeti
    amuzesha bishtari azash bezar

  • nasim می‌گه:

    salam
    chera en menu to ie javab nemide?!nemishe kari kard ke to ie ham kar kone?

  • رضا می‌گه:

    لطفا قسمت دومش رو هم بگید
    ممنون

  • دانیال می‌گه:

    سلام دوست عزیز من می تونم در این سایت نویسنده باشم؟اگه هم می تونم بگید مطلب رو چطوری بفرستم؟

    • محسن شفیعی می‌گه:

      سلام
      فعلا شما میتونید به عنوان پست میهمان فعالیت کنید.
      میتونید به این آدرس ایمیل کنید: guest_post[at]aparnet.ir
      مشخصات و یک توضیح یا لینک از خودتون هم بدید.

  • محمد می‌گه:

    با سلام خیلی عالی بود

    راستی چرا دیر به دیر سایت بروز میشه ؟//

    • محسن شفیعی می‌گه:

      خیلی ممنون از همه کاربران سایت و همینطور شما که میخواین سایت زودتر آپدیت بشه. اما متاسفانه من یک نفره نمیتونم انتظارات شما رو برآورده کنم. خیلی دنبال نویسندگان متعهد و با دانش روز در وب گشتم که بیان و مطالب تخصصی و بروز منتشر کنند اما هنوز جوابی که میخوام رو نگرفتم.
      از این به بعد خودم سعی میکنم سایت رو زودتر آپدیت کنم.
      خیلی ممنون

  • امیر می‌گه:

    سلام
    عزیز یونیکد رو داخل دمو درست کن.
    با تشکر از سایت خوبتون


  • نظرات این مطلب بسته است.