ساخت منوهای پیمایش ملایم برای سایت تک صفحهای
معمولا در سایتهای تک صفحهای، منوها به شکلی طراحی میشوند که هنگام کلیک روی آنها، صفحه به صورت ملایم و نرم به قسمت مورد نظر حرکت میکنند. انجام این کار با استفاده از کدهای جاوااسکریپت و جیکوئری به آسانی امکان پذیر است.
جهت انجام این کار لازم است تا کتابخانه 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><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 ها را که بالاتر تعریف کردیم را مقدار دهی میکنیم.
مثلا برای منوی دوم، باید به شکل زیر باشد.
1 | <div id="slide2">...</div> |
پس از انجام مراحل بالا، هنگامی که کاربر روی منوهای سایت کلیک کند، صفحه به صورت آرام و ملایم به بخش مورد نظر حرکت خواهد کرد.
برای دانلود نمونه این آموزش اینجا کلیک کنید: دانلود مثال منوی پیمایش ملایم