شرح طريقة تثبيت القائمة الرئيسية لقوالب البلوجر
اقدم لكم شرح بسيط تستطيع بواستطه تثبيت القائمة الرئيسية
بشكل بسيط بحيث يظهر شريط القائمة الرئيسية مثبت عند النزول للأسفل
هذه الطريقة جميلة جدا و تعطي للقالب شكل جمالي و احترافي
بحيث اذا اراد الزائر النزول للاسفل ينزل معه شريط القائمة الرئيسية
تساعده على الانتقال الى صفحة اخرى بدلا من ان يصعد للاعلى حتى ينتقل لصفحة اخرى
شرح الركيب
شرح تركيب الأكواد
نذهب الى المظهر و نضغط على Ctrl + F و نضع في مستطيل البحث ]]></b:skin> و نضغط على Enter
نضع الكود التالي فوقه
xxxxxxxxxx {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
التعديلات
نقوم بتغير xxxxxxxx ب الايدي الخاص بشريط القائمة الرئيسية
نضع الكود التالي فوقه
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
//fixed secondary nav
var secondaryHead = $('#menu'),
secondaryHeadTopPosition = secondaryHead.offset().top;
$(window).on('scroll', function(){
if($(window).scrollTop() > secondaryHeadTopPosition ) {
secondaryHead.addClass('f-nav').css({
'position':'fixed',
'width':'100%',
'right':'0',
'top':'0',
'margin':'0',
'padding':'5px 0',
'z-index':'10'
});
}
else {
secondaryHead.removeClass('f-nav').removeAttr( 'style' );
}
});
//header img
var introSection = $('#header img'),
introSectionHeight = introSection.height(),
//change scaleSpeed if you want to change the speed of the scale effect
scaleSpeed = 0.4;
//change opacitySpeed if you want to change the speed of opacity reduction effect
opacitySpeed = 1;
$(window).on('scroll', function(){
window.requestAnimationFrame(animateIntro);
});
//assign a scale transformation to the introSection element and reduce its opacity
function animateIntro () {
var scrollPercentage = ($(window).scrollTop()/introSectionHeight).toFixed(5),
scaleValue = 1 - scrollPercentage*scaleSpeed;
//check if the introSection is still visible
if( $(window).scrollTop() < introSectionHeight) {
introSection.css({
'transform': 'scale(' + scaleValue + ') translateZ(0)',
'opacity': 1 - scrollPercentage*opacitySpeed
});
}
}
});//end
//]]>
</script>
التعديلات
نقوم بتغير #menu ب الايدي الخاص بشريط القائمة الرئيسية
و ثم نقوم بالحفظ
و مبروك عليك الاضافة