أخبار التقنية

[أخبار التقنية][slideshow]

جعل القائمة الأفقية الرئيسية ثابته لا تتحرك في مدونات بلوجر


مرحبا بكم هذه التدوينة الرائعة، اليوم سنقوم بشرح طريقة جعل القائمة الرئيسية أو الأفقية ثابتة في مكانها، يعني تتحرك و تنزل مع نزول صفحات المدونة. 
القائمة الأفقية الرئيسية أداة جد مهمة لكل مدونة أو موقع، تمكننا القائمة من تصنيف مواضيع المدونة بشكل أكثر دقة، مثلا تتوفر على مدونة للمعلوميات فيها مواضيع عن "بلوجر، الووردبريس، فايسبوك، أنترنت و..."، من أجل جعل المدونة أكثر إحترافية نجعل لكل موضوع تصنيفا ما وذلك من أجل الوصول السريع للزائر إلى مبتغاه. لكن ونحن في بداية طريقنا إلى عالم المعلوميات و الأنترنت نبحث دائما عن كل ما هو جديد، والجديد اليوم هو كود يجعل القائمة اللأفقية ثابتة تتحرك مع نزول المدونة كما في الفيسبوك و جوجل بليس.

كيفية جعل القائمة الأفقية ثابتة تتحرك مع نزول الصفحات


أولا نتوجه إلى قالب المدونة.
تحرير HTML ونبحث عن الكود </body> .
نقوم بالوضع الكود التالي قبله مباشرة "فوق </body>" .

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    // Menentukan elemen yang dijadikan sticky yaitu .nav
    var stickyNavTop = $('#nav').offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        // Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya    
        if (scrollTop > stickyNavTop) {
          $('#nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('#nav').css({ 'position': 'relative', 'width': '100%' });
        }
    };
    // Jalankan fungsi
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

لا تنسى تغيير الرمز الذي باللون الاحمر برمز القائمة الأفقية في مدونتك.
كيف تعرف الرمز القائمة في مدونتك :

ما عليك سوى البحث عن قائمة الأفقية داخل HTML ، بعدها ستجد الرمز الذي نبحث عنه قرب id .مثلا بالنسبة لي أنا 

<nav class='navix' id='nav'>




ليست هناك تعليقات :