طراحی سایت در کرج|شرکت طراحی سایت|سئو در کرج|طراحی اپلیکشن موبایل

برای مشاهده بخش خدمات طراحی سایت به سمت پایین اسکرول کنید

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

منوی رسپانسیو ۲Reviewed by مهدی اخوان on Jul 9Rating:

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

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

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

Source code منوی رسپانسیو 2 منوی رسپانسیو 2 منوی رسپانسیو 2 
<!DOCTYPE html>
<html>
<head>
  <title>Nav Responsive - Section ۱</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>

 

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

Source code منوی رسپانسیو 2 منوی رسپانسیو 2 منوی رسپانسیو 2 
* {
  margin: ۰;
  padding: ۰;
  font-family: "BYekan";
  direction: rtl;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#mobile-nav {
  position: absolute;
  width: ۲۰۰px;
  min-height: ۱۰۰%;
  background: #۲۲۲;
  right: -۲۰۰px;
  display: none;
}
#desktop-nav {
  background: #۲۲۲;
  padding: ۱۰px;
  overflow: auto;
}
#desktop-nav a, #mobile-nav a {
  color: #fff;
  text-decoration: none;
  font-size: ۱۹px;
  padding: ۲px;
  margin: ۳px ۱۰px;
  float: right;
}
#nav-toggle {
  display: block;
  font-size: ۲۵px;
  display: none;
  font-family: "webfont";
}
#nav-toggle:before {
  content: "\f0c9";
}
#mobile-nav a {
  display: block;
  width: ۱۰۰%;
  margin: ۰;
  padding: ۱۰px ۳px;
  text-align: center;
  border-bottom: solid ۱px #ccc;
}
@media (max-width: 767px) {
  #desktop-nav a { display: none;  }
  a#nav-toggle {
    display: block;
  }
  #mobile-nav {
    display: block;
  }
}

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

Source code منوی رسپانسیو 2 منوی رسپانسیو 2 منوی رسپانسیو 2 
$(function() {
  var navToggle = ۰;
  $("#nav-toggle").on("click", function() {
    if(!navToggle) {
      $("#mobile-nav").animate({"right": ۰});
      $("#main").animate({"margin-right": ۲۰۰});
      navToggle = ۱;
    } else {
      $("#mobile-nav").animate({"right": -۲۰۰});
      $("#main").animate({"margin-right": ۰});
      navToggle = ۰;
    }
  });
 
  $(window).on("resize", function() {
    var winWidth = $(this).width();
    if(winWidth > ۷۶۷) {
      $("#mobile-nav").css({"right": -۲۰۰});
      $("#main").css({"margin-right": ۰});
      navToggle = ۰;
    }
  });
 
  var desktopNavHeight = $("#desktop-nav").height();
  $("#mobile-nav a").height(desktopNavHeight );
});

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

 

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

 

 

مطالب مرتبط

FOLLOW US