ایجاد بخش چسبان با افزونه و کد جی کوئری Sticky Menu
در هنگام طراحی قالب وردپرس یا ایجاد پوسته برای وبلاگ و سیستم های مدیریت محتوای دیگر می توان از کد جی کوئری و css برای ساخت اجزاء چسبنده استفاده کرد البته می توان تنها با استفاده از css و دستور position:fixed اجزاء ثابت ایجاد کرد تنها عیب استفاده از css تنها عدم ایجاد قابلیت بهره گیری از اسکرول صفحه می باشد یعنی هر بخشی که ثابت شد همیشه در همانجا نمایش داده می شود ولی با بکارگیری jquery می توانیم اسکرول کردن کاربر را شناسایی کنیم و در صورتیکه از ارتفاع مشخصی طی شد منو یا بخش چسبان نمایش داده شود در حقیقت کار حرفه ای تر می شود.
اگر می خواهید از کد برای ساخت Sticky Menu منوی چسبنده استفاده کنید، کدهای jquery زیر را در سربرگ header قالب تان بعد از کتابخانه جی کوئری کپی کنید.
<script>
$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}};
stickyNav();
$(window).scroll(function() {stickyNav();});});
</script>
// css codes copy to style.css
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 10000;
border-top: 0;
}
کلاس .nav مشخص کننده بخشی است که می خواهیم بعد از رسیدن کاربر به آن با اسکرول موس در صفحه ثابت شود می توانید کلاس nav را به منو، هدر، جدیدترین مطالب در ستون های کناری سایت و … اختصاص دهید. سپس کدهای css بالا را در فایل شیوه نامه style.css پوسته تان کپی کنید. توسط کلاس تعریف شده منو چسبنده به صورت تمام صفحه و در بالاترین بخش صفحه نمایش قرار می گیرد. اگر می خواهید تمام صفحه نباشد تمام دستورها بجز دستور position:fixed را حذف کنید.
افزونه وردپرس Sticky Menu منو چسبنده و هدر ثابت
اگر به هردلیلی نمی خواهید از کد استفاده کنید می توانید توسط افزونه های ایجاد منوی چسبنده این قابلیت را در وردپرس ایجاد کنید. توسط افزونه Sticky Menu (or Anything!) on Scroll می توان منو ثابت بالای سایت و صفحه نمایش ایجاد کرد. پس از نصب و فعال سازی با مراجعه به بخش تنظیمات افزونه کلاس یا ای دی class or id مربوط به بخشی که قصد چسبان کردنش را دارید به همراه تنظیماتی مانند فاصله از بالای صفحه، ایجاد و یا عدم نمایش در موبایل یا تبلت، تنظیم خاصیت z-index برای نمایش در بالاترین سطح نسبت به سایر اجزاء قالب و … را انجام می دهد.
افزونه وردپرس Awesome Sticky Header برای ایجاد هدر چسبنده مورد استفاده قرار می گیرد تا بتوانید الاوه بر منو سایر المانهای دیگری مثل: لوگو ، عنوان و توضیحات سایت، نوار جستجو و … را نیز به حالت چسبنده در بیاورید. از امکانات این افزونه می توان به مواردی مانند: امکان تنظیم رنگ متن و زمینه منو و سایر اجزاء قالب، تعیین فاصله بخشها نسبت به یکدیگر، افزودن چند منو و فهرست به سربرگ چسبنده، امکان تعریف باز شدن زیرمنو ها در سمت راست یا چپ دسته مادر، نوشتن css دلخواه برای ایجاد سربرگ چسبان مورد نظر و …
در این مطلب چند افزونه و کد جی کوئری Sticky Menu منوی چسبنده معرفی شد تا به دلخواه از آنها در سایت و یا وبلاگتان استفاده کنید.
]]>