ساخت منوهای پیمایش ملایم برای سایت تک صفحهای
معمولا در سایتهای تک صفحهای، منوها به شکلی طراحی میشوند که هنگام کلیک روی آنها، صفحه به صورت ملایم و نرم به قسمت مورد نظر حرکت میکنند. انجام این کار با استفاده از کدهای جاوااسکریپت و جیکوئری به آسانی امکان پذیر است.
جهت انجام این کار لازم است تا کتابخانه jQuery را در سایت خود درج نمایید و با استفاده از کدهای زیر منوهای سایت را به صورت پیمایش ملایم درآورید.
اضافه کردن کتابخانه jQuery
برای بارگزاری جیکوئری، کد زیر را به سرآمد صفحه اضافه کنید.
1 |
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script> |
اضافه کردن تابع
تابع زیر را در قسمتی دلخواه از صفحه بعد از کد jQuery قرار دهید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<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> |
ساخت منو
1 2 3 4 5 6 7 8 9 |
<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> |
ایجاد بخشهای مورد نظر با ID
سپس به اسلایدها، شناسه یا ID مقصد a ها را که بالاتر تعریف کردیم را مقدار دهی میکنیم.
مثلا برای منوی دوم، باید به شکل زیر باشد.
1 |
<div id="slide2">...</div> |
پس از انجام مراحل بالا، هنگامی که کاربر روی منوهای سایت کلیک کند، صفحه به صورت آرام و ملایم به بخش مورد نظر حرکت خواهد کرد.
برای دانلود نمونه این آموزش اینجا کلیک کنید: دانلود مثال منوی پیمایش ملایم