اولا استعرض لكم مميزات هذا النافبار:

الكود بشكل عام ليس كبير وخالي من الاخطاء تقريبا ويتلائم مع جميع المتصفحات [ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

1- شعار منتداك عليه

[center]َ[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]َ
َ

2- قوائم منسدلة ويمكنك زيادتها ان اردت

[center]َ[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]َ
َ
3- منطقة تسجيل الدخول وهي بحد ثاتها اخترافية ولن تجد مثلها

[center]َ[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]َ

َ
4- ترحيب بعد الدخول مع صورة رمزية مصغرة لصورتة في البيانات الشخصية لكل عضو بشكل عصري مثل المواقع العالمية الكبرى

[center]َ[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]َ
َ
5- زر البحث تنسدل منه نافذه البحث مثل النافبار الاصلي لاحلى منتدى ..

[center]َ[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]َ
َ

6- النافبار يحتوي على قوائم كتابية و ايقونات نافبار احلى منتدى الاصلية

[center]َ[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]َ
َ
7- الازرار تتغير بعد تسجيل الدخول

[center]َ[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]َ
َ
8- ايقونة الرسائل الجديدة بشكل عصري وتنبهك بوجود رسالة جديدة

[center]َ[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]َ
َ

يعتبر افضل كود نافبار في منتديات احلى منتدى وايضا لن تجد مثله في منتديات VB

الآن اليكم الكود وطريقة تركيبة:

ملاحظة: ساضع الكود كما هو مع الروابط فقط عليك تغيير الروابط

الخطوة الاولى:
لاختيار الايقونات الاصلية لاحلى منتدى المراد اظهارها
لوحة الادارة - مظهر المنتدى - ادارة الصور - لوحة ادارة كاملة
الان ضع الايقونات على مزاجك، اذا اردتها مثل حوف نت ضع كل ايقونة في مكانها:
بحث َ[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]َ

البيانات الشخصية َ[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]َ

الرسائل الخاصة َ[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]َ

رسالة خاصة جديدة َ[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]َ

التسجيل َ[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]َ


ثم سجل

الخطوة الثانية:
هذه الخطوة لاضافة كود النافبار كامل في التمبلات
مظهر المنتدى - التمبلات والقوالب - ادارة عامة -فتح قالب overall_header

الان ابحث عن واحذفة

Code:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}"> <tr> <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td> </tr> </table>

ثم ابحث عن

Code:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

{JAVASCRIPT}

وضع اسفلة مباشرة كود النافبار كامل

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

<table style="table-layout:fixed;" align="center" border="0" cellpadding="0" cellspacing="1" width="90%"><tr><td>Code:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]</td></tr><tr><td class="code"> <!-- نافبار ليالي مصريه بداية --> <ul style="top: 0px; right: 0px;" class="menu"> <li><a href="http://www.layalyeg.com" alt="ليالي مصريه" title="الرئيسية"><img src="https://i.servimg.com/u/f76/12/22/94/86/123410.gif"></a></li> <li><a title="الدردشــة" href="http://www.layalyeg.com/h14-page">الدردشــة</a></li> <li><a title="المجلــة" href="http://www.layalyeg.com/h5-page">المجلــة</a></li> <li><a title="الاعضاء" href="#">الأعضاء ▼ </a> <ul> <li><a title="قائمة الأعضاء" href="/memberlist" class="documents"> » قائمة الأعضاء </a></li> <li><a title="أفضل 20 عضو" href="/memberlist?mode=overall_posters" class="messages"> » أفضل 20 عضو </a></li> <li><a title="أفضل أعضاء اليوم" href="/memberlist?mode=today_posters" class="signout"> » أفضل أعضاء اليوم </a></li> </ul> </li><li><a title="اسألة شائعة" href="/faq">اسألة شائعة</a></li> <li><a title="ما الجديد؟" href="/search.forum?search_id=newposts" class="documents">ما الجديد؟ </a></li> <li><a title="خيارات سريعة" href="#"><img src="https://i.servimg.com/u/f49/16/89/40/74/uoouo11.png"></a> <ul> <li><a title="جميع مشاركاتي" href="/search.forum?search_id=egosearch" class="messages"> » جميع مشاركاتي </a></li> <li><a title="مواضيع لم يرد عليها" href="/search.forum?search_id=unanswered" class="signout"> » مواضيع لم يرد عليها </a></li> <li><a title="العاب فلاش" href="http://www.layalyeg.com/h16-page" class="signout"> » العاب فلاش </a></li> </ul> </li> <a>{GENERATED_NAV_BAR}</a> </ul> <style type="Text/css"> /* Reset */ .menu, .menu ul, .menu li, .menu a {margin: 0; padding: 0; border: none; outline: none;} /* Menu */.menu {height: 42px; width: 100%; background: #2e2e2e;box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);background: -webkit-linear-gradient(top, #494949 0%,#202020 100%);background: -moz-linear-gradient(top, #494949 0%,#202020 100%);background: -o-linear-gradient(top, #494949 0%,#202020 100%);background: -ms-linear-gradient(top, #494949 0%,#202020 100%);background: linear-gradient(top, #494949 0%,#202020 100%); }.menu li {position: relative; list-style: none; float: right; display: block; height: 40px;} /* Links */ .menu li a { display: block; padding: 0 8px; margin: 6px 0; line-height: 30px; text-decoration: none; border-left: 1px solid #393942; border-right: 1px solid #161616; font-family: Tahoma; font-weight: bo#ld; font-size: 12px; color: #bdbdbd; text-shadow: 1px 1px 1px rgba(0,0,0,.6);} .menu li:hover > a { color: #8fde62; } /* Sub Menu */ .menu ul { position: absolute; top: 40px; left: 0; opacity: 0; background: #1f2024; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; -webkit-transition: opacity .25s ease .1s; -moz-transition: opacity .25s ease .1s; -o-transition: opacity .25s ease .1s; -ms-transition: opacity .25s ease .1s; transition: opacity .25s ease .1s; } .menu li:hover > ul { opacity: 1;} .menu ul li { height: 0; overflow: hidden; padding: 0; -webkit-transition: height .25s ease .1s; -moz-transition: height .25s ease .1s; -o-transition: height .25s ease .1s; -ms-transition: height .25s ease .1s; transition: height .25s ease .1s; } .menu li:hover > ul li { height: 34px; overflow: visible; padding: 0;} .menu ul li a {width: 130px; padding: 4px 0 4px 40px; margin: 0; border: none; border-bottom: 1px solid #353539;} .menu ul li:last-child a { border: none; } </style> <!-- نافبار ليالي مصريه نهاية--></td></tr></table>

[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذه الصورة]

الان غير صورة الشعار والروابط واضافة ما تريدة ثم سجل وانشر


الخطوة الثالثة والاخيرة:
هذه الخطوة لاظهار خانة تسجيل الدخول عبارة مرحبا بك والصورة الرمزية المصغرة
عناصر اضافية - ادارة العناصر المستقلة على المنتدى

ملاحظة:
الاعدادات اجعلها على ماهي علية في منتداك حتى لا تاثر على شيء آخر.. اذا
لم تظهر الاكواد التالية غير الاعدادات وليس شرطا ان تكون بارقام معينة
مثال : هذه اعدادات منتديات حوف نت

َ[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]َ


الان انشأ عنصر جديد وسمية مثلا "خانه الدخول" واجعل صلاحياتة للزوار فقط ومن دون جدول وضع فية هذا الكود

Code:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

<div style="left: 3px; overflow: visible; width: 250px; position: absolute; top: 10px; height: 30px;" align="center"> <form action="http://www.layalyeg.com/login" method="post" dir="rtl"> <input name="username" value="اسم العضو" onclick="if (this.value == 'اسم العضو') this.value = '';" onblur="if (this.value == '') this.value = 'اسم العضو';" size="9" maxlength="40" type="text"> <input name="password" value="كلمه سر" onclick="if (this.value == 'كلمه سر') this.value = '';" onblur="if (this.value == '') this.value = 'كلمه سر';" size="9" maxlength="32" type="password"> <input class="mainoption" name="login" value="دخول" size="9" type="submit"> <br /><br /> <input name="autologin" checked="true" type="checkbox"> <font title="تذكر بياناتي في المرة القادمة" color="#4F4F4F" size="1" >تذكرني</font> <a title="استعادة كلمه السر من هنا" href="http://www.layalyeg.com/profile?mode=sendpassword"><font color="#4F4F4F" size="1">| نسيت كلمة السر؟ |</font></a> <a title="سجل كعضو جديد" href="http://www.layalyeg.com/register?agreed=true&step=2"><font color="#db4804" size="2"><b> عضو جديد</b></font></a> </form> <style type="text/css"></style> </div>

لا تنسى تغيير رابط المنتدى

ثم سجل

وايضا انشأ عنصر جديد آخر وسمية مثلا " مرحبا بك" واجعل صلاحياتة للجميع ما عدا الزوار ومن دون جدول وضع فية هذا الكود

Code:[ندعوك للتسجيل في المنتدى أو التعريف بنفسك لمعاينة هذا الرابط]

<div style="left: 46px; overflow: visible; width: 300px; position: absolute; top: 12px; height: 30px;" align="center"><div style="text-align: left;"><font color="#C0C0C0" size="2">مرحباً بك <b>زائر</b></font><a href="http://www.layalyeg.com/login?logout"><font size="2"> [ خروج ] </font></a></div> <style Type="Text/css"></style> </div><div style="left: 20px; overflow: visible; width: 15px; position: absolute; top: 7px; height: 30px;" align="center"> <script> jQuery(document).ready(function(){ jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) { link = jQuery('#register .forumline td.row1 img', data).attr('src'); if(link){ jQuery('#avatar').html('<center><img src="'+link+'" alt=""></center>'); }else{ jQuery('#avatar').html(''); } }); }); </script><div id="avatar"></div> <style Type="Text/css"> #avatar img{ max-height: 27px; max-width: 27px; border: 1px solid #4F4F4F; border-radius: 4px; } </style> </div>

لا تنسى تغيير رابط المنتدى

ثم سجل


هكذا انتهينا والف مبروك لكم لحصولكم على النافبار

الكود برمجة ابومازن له كل الشكر علي ما يقدمه