[ شرح طريقة ] : عمل قائمة علوية ثابثة مع مزايا جوكيري رائعة

[linnou]

http://www.dzbatna.com/images/icons/icon26.gif [ ط´ط±ط* ] : ط¹ظ…ظ„ ظ‚ط§ط¦ظ…ط© ط¹ظ„ظˆظٹط© ط«ط§ط¨ط«ط© ظ…ط¹ ظ…ط²ط§ظٹط§ ط¬ظˆظƒظٹط±ظٹ ط±ط§ط¦ط¹ط© (http://www.dzbatna.com/t2034388/)






السلام عليكم ورحمة الله و بركاته


موضوعي الثاني في هذا القسم عبارة عن " قائمة علوية ثابثة مع مزايا جوكيري رائعة "


♥ في بادئ الأمر أترككم مع مميزات القائمة :

- مكان ثابث في أعلى صفحة منتداك ~
- اختفاء القائمة عند النزول إلى أسفل أو وسط الصفحة لعدم حجب الرؤية ~
- القائمة تضم روابط على شكل أزرار بتقنية الــ CSS3 و زر العودة السريعة لأعلى الصفحة ~


♥ ثانيا أترككم مع المثال المصور :

http://www.dzbatna.com/attachments/627270d1328484895-untitled-2.png


♥ ثالثا نأتي للتركيب install :


♥ أولا وقبل شيء يجب عليك رفع المجلد " topbar " الموجود داخل الملف الملف المرفق الى مجلد المنتدى forum الرئيسي

♥ ثانيا قم بااضافة الكود code التالي باخر قالب template " headinclude " :


رمز PHP:

<code style="white-space:nowrap"> <code> <link href="topbar/style.css" rel="stylesheet" type="text/css" />


<script type="text/javascript">

$(function() {
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop != 0)
$('#nav').stop().animate({'opacity':'0.2'},400);
else
$('#nav').stop().animate({'opacity':'1'},400);
});

$('#nav').hover(
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#nav').stop().animate({'opacity':'1'},400);
}
},
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('#nav').stop().animate({'opacity':'0.2'},400);



}
}
);
});
</script>
</code> </code>



♥ أخيرا قم بأضافة الكود code التالي بآخر قالب template &quot; header &quot; :


رمز PHP:

<code style="white-space:nowrap"> <code> <div id="nav">
<ul>
<li><a class="top" href="#"><span></span></a></li>
<li><a> :: ديزاد باتنة ::</a></li>
<li><a> :: dev-vb ::</a></li>
<li><a> :: ديزاد باتنة ::</a></li>
<li><a> :: dev-vb ::</a></li>
<li><a> :: ديزاد باتنة ::</a></li>
<li><a> :: dev-vb ::</a></li>
<li><a> :: ديزاد باتنة ::</a></li>


</ul>
</div>
</code> </code>



♥ اذا أعجبك الموضوع لا تبخل على باعجاب أو تقييم










ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)

الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif dev-vb.zip (http://www.traidnt.net/vb/attachments/627272d1328485535-dev-vb.zip) (12.3 كيلوبايت, عدد مرات المشاهدة 312 مرة)


https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©