تاپ منو
۰

آموزش ساخت تاپ منو با قابلیت ریسپانسیو

به اشتراک بگذارید :
امروز به شما یاد خواهم داد که چگونه یک تاپ منوی (Topnav) ساده ولی پر کاربرد برای سایت خود بسازید که در سایز های مختلف صفحات نمایشگر قابلیت ریسپانسیو (responsive) شدن را داشته باشد. پس در ادامه با من همراه باشید تا به شکلی ساده این سبک منو ها را برای شما آموزش بدهم.
این منو ها از ۳ بخش تشکیل شده است، CSS ، HTML ، JS که در ادامه کد های هر قسمت را در اختیار شما قرار میدم و انتهای صفحه لینک دموی این منو را قرار خواهم داد.
کد HTML :
<ul class="topnav" id="myTopnav">
<li><a class="active" href="#home">خانه</a></li>
<li><a href="#news">اخبار</a></li>
<li><a href="#contact">تماس با ما</a></li>
<li><a href="#about">درباره ما</a></li>
<li class="icon">
    <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
  </li>
</ul>
در بالا دستور بین خطوط ۶ الی ۸ را به صورت انتخاب شده ببینید، این قسمت با کلاس (icon) برای حالت تبلت یا موبایل فعال خواهد شد که در ادامه خواهید فهمید که به چه صورت عمل خواهد کرد.
کد CSS :
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

ul.topnav li {float: right;}

ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}

ul.topnav li a:hover {background-color: #555;}

ul.topnav li.icon {display: none;}
در این قسمت در کنار خصوصیاتی که تعریف شده در خط ۲۳ می بینید که کلاس مورد نظر (icon) در حالت عادی به صورت غیر فعال (display: none) می باشد.
کد CSS (قسمت ریسپانسیو) :
@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: left;
    display: inline-block;
  }
}

@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    left: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: right;
  }
}
کد قسمت ریسپانسیو که در بالا مشاهده می کنید تعریف شده است که در سایز نمایش زیر ۶۸۰ پیکسل در هر نوع دستگاهی از دستوراتی که در زیر آن آمده است پیروی کند که در این حالت منوی ما به صورت جمع شونده و آیکون شکل برای دسترسی راحت قرار می گیرد.

و اما…

کد Javascript :
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
کد جاوا اسکریپت بالا را در انتهای صفحه خود قبل از تگ <body/> و در تگ <script> قرار دهید تا اکشن مورد نظر برای منو ها اعمال شود.
و در آخر دموی آنلاین این تاپ منو در لینک زیر :
Demo: http://aminy.ir/demo/top-menu
نکته: برای مشاهده قابلیت ریسپانسیو در دسکتاپ صفحه مرورگر خود را کوچک یا با موبایل و تبلت خود چک کنید.

 

به اشتراک بگذارید :

پاسخ دهید

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