گروپ دیزاین | ارائه دهنده خدمات نوین

منوی رسپانسیو 2

 28 ژوئن 2015

آموزش ساخت منوی ریسپانسیو با جکوئری

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

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

[codesyntax lang=”php”]

<!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/menu.js"></script>
</body>
</html>

[/codesyntax]

 

استایل منو به صورت زیر میشود پس فایل به نام style.css ایجاد کنید.

[codesyntax lang=”css”]

* {
  margin: 0;
  padding: 0;
  font-family: "BYekan";
  direction: rtl;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#mobile-nav {
  position: absolute;
  width: 200px;
  min-height: 100%;
  background: #222;
  right: -200px;
  display: none;
}
#desktop-nav {
  background: #222;
  padding: 10px;
  overflow: auto;
}
#desktop-nav a, #mobile-nav a {
  color: #fff;
  text-decoration: none;
  font-size: 19px;
  padding: 2px;
  margin: 3px 10px;
  float: right;
}
#nav-toggle {
  display: block;
  font-size: 25px;
  display: none;
  font-family: "webfont";
}
#nav-toggle:before {
  content: "\f0c9";
}
#mobile-nav a {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 3px;
  text-align: center;
  border-bottom: solid 1px #ccc;
}
@media (max-width: 767px) {
  #desktop-nav a { display: none;  }
  a#nav-toggle {
    display: block;
  }
  #mobile-nav {
    display: block;
  }
}

[/codesyntax]

حالا نوبت به جاوا اسکریپت میرسد فایلی به نام menu.js ایجاد کنید و محتوای زیر را درون آن قرار دهید.

[codesyntax lang=”php”]

$(function() {
  var navToggle = 0;
  $("#nav-toggle").on("click", function() {
    if(!navToggle) {
      $("#mobile-nav").animate({"right": 0});
      $("#main").animate({"margin-right": 200});
      navToggle = 1;
    } else {
      $("#mobile-nav").animate({"right": -200});
      $("#main").animate({"margin-right": 0});
      navToggle = 0;
    }
  });
  
  $(window).on("resize", function() {
    var winWidth = $(this).width();
    if(winWidth > 767) {
      $("#mobile-nav").css({"right": -200});
      $("#main").css({"margin-right": 0});
      navToggle = 0;
    }
  });
  
  var desktopNavHeight = $("#desktop-nav").height();
  $("#mobile-nav a").height(desktopNavHeight );
});

[/codesyntax]

در آخر شما فایل جکوئری jquery-1.8.3.min را دانلود کنید و در کنار فایل های بالا قرار دهید.

 

کار به اتمام رسید.