طريقة تثبيت القائمة العلوية عند تمرير الصفحة للأسفل
ســأشـرح فــي تـدويــنـتــنــا الــيــوم (وكما هو موضح في العنوان) طـريــقــة جــعــل الـقــائمــة الـرئيـسـيـة ( الـعـلـويـة ) تـتـحـرك مـع نـزول الــمــدونـة الــخــاصـة بـك بــســلاسـة، فـعـنـدمــا تـنــزل إلـى الأسـفـل تـلاحـظ أن الــقـائمـة الــعــلـويـة عـاديـة أي أنـهـا تــتـحـرك إلـى الأسـفـل، هـنـا يـأتـي درسـنـا الـيـوم لــكــيــفـيـة جــعــلـهـا تـكـون ثــابـتـة عـنـد تــمـريـر الــصــفـحـة لــلأسـفـل طــبـعـا يــمـكـن إســتـخـدام الــطـريــقــة حــتــى عــلــى قــوائم أخــرى عــلــى شــرط أن تــكــون فــي الـهــيــدر ( ذاخــل الــوســم <header> )، الـفـائدة مـن تـثـبـيـت الـقـائمـة عـنـد تـمـريـر الـصـفـحـة لـلأسـفـل هـو مـنـح الــمـتـصـفـح إمـكـانـيـة الـتـنـقـل بـيـن مــخــتـلــف أقـســام الــمـوقــع بــســهـولــة تـامــة، دون الــحـاجــة إلــى تــمـريــر الــصــفـحــة إلــى الأعـلــى فــي كــل مــرة يـرغــب فــيـهــا فــي اخــتـيــار عــنـصــر أو تــصــنـيــف آخــر مــن الــقـائمــة...
الأمــر لـيــس مــعـقــدا كـمــا يــظـنــه الـبــعـض، بـل بــالـعــكـس الأمـر فـي غــايـة الــبـســاطـة كـل مـا عـلــيـك فـعــلـه هـو الـتـركـيــز عـلــى مــا سـأشـرحــه.
مراحل تركيب الإضافة
- ادخل إلى لوحة تحكم المدونة في بلوجر.
- اختر قالب المدونة التي تود تطبيق الشرح فيها.
- اضغط على تحرير HTML ( قم بأخد نسخة إحتياطية للقالب )
- ابحث عن الوسم ]]></b:skin> و اضف الكود التالي قبله مباشرة
- مجدداً نبحث عن الكود التالي </head> ونضع الكود التالى أسفلة مباشرة
- قم بحفظ العمل ثم إذهب لمعاينة الإضافة في مدونتك
.stick-navigation{ position: fixed; z-index: 9999; top: 0; width: 100%; }
<script type="text/javascript"> var b4teq = jQuery.noConflict(); b4teq("document").ready(function () { b4teq(window).scroll(function () { if (b4teq(this).scrollTop() > 136) { b4teq('.stick-navigation').addClass("fixed-nav"); } else { b4teq('.stick-navigation').removeClass("fixed-nav"); } }); }); </script>
الآن وصــلـنـا لـلـمـرحــلـة الأخــيـرة والــتـي سـتـطــبـق بــهـا ثـبــيـت الـقــائمـة إذا كــانـت لــديـك قــائمـة عــلــويـة أو ثــانــويـة وتــريـد تـثــبــيـت الــقــائمـة الـعــلــويـة، كـل مـا عــلــيـك فــعــلـه هـو الــبــحـث عـن كــلــمـة مــتــواجـدة بـالــقــائمــة مــثــلا الـرئيــســيــة عــنــدهــا سـتــجــد فــوقــهــا أكــواد مــثــال :
<div id='sidebar'>
<ul> <li><a href="#">الرئيسية</a></li>
<li><a href="#">عن المدونة</a></li>
<li><a href="#">اتصل بنا</a></li></ul>
</div>
الـعـنــصـر الــمـلــون بـالأصــفــر هــو الــكــود الــخــاص بـالـقــائمــة كــل قــائمــة تـخـتــلــف عــن بــقـيـتــهــا لــذا قــد يــكــون هــنــاك أكــثــر مــن كــوديــن ضــع فـوقـهــمــا هـذا الـكـود :
<div class="stick-navigation">
سبحان الله، والحمدلله، ولا إله إلا الله، والله أكبر
إذا أعجبك الموضوع فلماذا تبخل علينا بالردود المشجعة ؟!
ليست هناك تعليقات
يمكنك وضع تعليقك هنا