آخرین بازبینی: ۱۳۹۸/۰۲/۲۵

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

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

جهت انجام این کار لازم است تا کتابخانه 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><aclass="active"title="Next Section"href="#slide1">صفحهاصلی</a></li>

<li><atitle="Next Section"href="#slide2">منویدوم</a></li>

<li><atitle="Next Section"href="#slide3">منویسوم</a></li>

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

<li><atitle="Next Section"href="#slide5">منویپنجم</a></li>

</ul>

</nav>

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

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

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

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

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

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

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

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

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

ساخت منو

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

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

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