ساخت منوهای پیمایش ملایم برای سایت تک صفحه‌ای

معمولا در سایت‌های تک صفحه‌ای، منوها به شکلی طراحی می‌شوند که هنگام کلیک روی آن‌ها، صفحه به صورت ملایم و نرم به قسمت مورد نظر حرکت می‌کنند. انجام این کار با استفاده از کدهای جاوااسکریپت و جی‌کوئری به آسانی امکان پذیر است.

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

اضافه کردن کتابخانه jQuery

برای بارگزاری جی‌کوئری، کد زیر را به سرآمد صفحه اضافه کنید.

<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>

1	<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>

اضافه کردن تابع

تابع زیر را در قسمتی دلخواه از صفحه بعد از کد jQuery قرار دهید.

<script>
$(document).ready(function() {
  $('a[href*=#]').each(function() {
    if (location.pathname.replace(/^\/,'') == this.pathname.replace(/^\//,'')
    && location.hostname == this.hostname
    && this.hash.replace( /#/, '' ) ) {
      var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
      var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
       if ($target) {
         var targetOffset = $target.offset().top;
         $(this).click(function() {
            $("#nav li a").removeClass("active");
            $(this).addClass('active');
           $('html, body').animate({scrollTop: targetOffset}, 1000);
           return false;
         });
      }
    }
  });
});
</script>

$(document).ready(function() {

$('a[href*=#]').each(function() {

if (location.pathname.replace(/^\/,'') == this.pathname.replace(/^\//,'')

&& location.hostname == this.hostname

&& this.hash.replace( /#/, '' ) ) {

var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');

var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;

if ($target) {

var targetOffset = $target.offset().top;

$(this).click(function() {

$("#nav li a").removeClass("active");

$(this).addClass('active');

$('html, body').animate({scrollTop: targetOffset}, 1000);

return false;

});

}

});

</script>

ساخت منو

<nav id="nav">
<ul>
	<li><a class="active" title="Next Section" href="#slide1">صفحه اصلی</a></li>
	<li><a title="Next Section" href="#slide2">منوی دوم</a></li>
	<li><a title="Next Section" href="#slide3">منوی سوم</a></li>
	<li><a title="Next Section" href="#slide4">منوی چهارم</a></li>
	<li><a title="Next Section" href="#slide5">منوی پنجم</a></li>
</ul>
</nav>

<ul>

<li><a title="Next Section" href="#slide4">منوی چهارم</a></li>

</ul>

</nav>

ایجاد بخش‌های مورد نظر با ID

سپس به اسلایدها، شناسه یا ID مقصد a ها را که بالاتر تعریف کردیم را مقدار دهی می‌کنیم.
مثلا برای منوی دوم، باید به شکل زیر باشد.

<div id="slide2">...</div>

1	<div id="slide2">...</div>

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

برای دانلود نمونه این آموزش اینجا کلیک کنید: دانلود مثال منوی پیمایش ملایم

ساخت منوهای پیمایش ملایم برای سایت تک صفحه‌ای

اضافه کردن کتابخانه jQuery

اضافه کردن تابع

ساخت منو

ایجاد بخش‌های مورد نظر با ID

بیشتر بخوانید:

دیدگاهتان را بنویسید لغو پاسخ