(تومبلايت)حصري كود ناف بار فوق الاقسام بطريقة جديدة ومميزة

السلام عليكم ورحمة الله وبركاته
مرحبا اعضاء اسرة احلي منتدي
سوف اقدم لكم شرح عمل ناف بار علي كل الاقسام

صورة توضيحة للغرض

http://i45.servimg.com/u/f45/15/95/28/21/navbar11.png

[img]http://i45.servimg.com/u/f45/15/95/28/21/navbar11.png[/img]


نتوكل علي الله :--> نذهــب الي

لوحة الادارة > مظهر المنتدي > التومبلايتات و القوالب > إدار عامة
نختار هذا القالب index_box ونضغط عليه تعديل

نبحث عن هذا الكود

[code]    <!-- BEGIN tablehead --><table class="forumline"
    width="100%" border="0" cellspacing="1" cellpadding="0">[/code]

ونضع بعد مباشر الكود التالي
[code]              <tr>
   
          <ul class="glossymenu"><li class="current"><a
    href=رابط قسم"><b> منتدي
    الدعم</b></a></li><li><a href="رابط القسم"
    title="عنوان القسم"><b>اسم
    القسم</b></a></li><li><a href="رابط القسم"
    title="منتدي الدعم" style=""><b>اسم
    القسم</b></a></li><li><a href="رابط القسم"
    title="اسم قسم" style=""><b> اسم
    القسم</b></a></li><li><a href="رابط
    قسم""><b>اسم
    القسم</b></a></li><li><a href="رابط القسم"
    style=""><b>اسم القسم
    </b></a></li><li><a href="رايبط القسم"
    style=""><b>اسم القسم</b></a></li></ul>
                </tr>
[/code]

كما في الصورة

[img]http://i45.servimg.com/u/f45/15/95/28/21/code10.png[/img]

ثم نذهب الي
لوحة الادارة / مظهر المنتدي/ الوان/ ورقة تصميم css
ونضع هذا الكود
[code]
   
    .glossymenu {
        background: url("http://hitskin.com/themes/16/95/80/i_back_title.png") repeat-x scroll 0 0 transparent;
        height: 25px;
        list-style: none outside none;
        margin: 0 auto;
        padding: 0 0 0 34px;
        position: relative;
        text-align: center;
        text-transform: uppercase;
    border-radius: 8px 8px 8px 8px;
   
    }
    .glossymenu li {
        float: left;
    }
    .glossymenu li a {
        color: #000000;
        cursor: pointer;
        display: block;
        float: left;
        font-family: Arial,Helvetica,sans-serif;
        font-size: 12px;
        font-weight: 700;
        height: 26px;
        line-height: 26px;
        padding: 0 0 0 16px;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
    }
    .glossymenu li a b {
        float: left;
        padding: 0 24px 0 8px;
        text-align: center;
        text-transform: uppercase;
    }
    .glossymenu li a:hover, .glossymenu li.current a {
        background-position: left center;
        color: #ff0000;
        text-align: center;
        text-transform: uppercase;
    }
    .glossymenu li a:hover b, .glossymenu li.current a b {
        background: url("http://i60.servimg.com/u/f60/15/40/37/88/0116.png") repeat scroll 0 0 transparent;
        border: 1px solid #874b4b;
        border-radius: 10px 10px 10px 10px;
        color: #ff0000;
    }
   
[/code]

اخوكم احمد المصري
في امان الله