كود css يخص نافبار أفقي رائع خاص للنسخة phpbb3

  افضل مساهمة1
السلام عليكم

الكود  سهل و رائع


قبل أن نبدأ يجب علينا أن نحتفظ بعض المساحة للنافبار

لوحة الإدارة    إدارة عامة    منتدى    تشكيل

إجعل عرض المنتدى 80%


كيفية تركيب الكود

لوحة الإدارة    مظهر المنتدى    ألوان    ورقة تصميم css
الكود:
[center]        /*Navbar*/
        .navbar a.mainmenu{
        position:relative;
        top:15px;
        margin:-10px 0px -10px 0px;
        text-shadow:1px 1px 2px #000;
        border-radius:5px;
        font-weight:bold;
        font-size:11px;
        display:block;
        color:#fff;
        }
        .navbar a.mainmenu:hover{
        box-shadow:0px 5px 6px rgba(0,0,0, 0.3) inset;
        background-color:rgba(0,0,0, 0.1);
        color:#ff8;
        }
        ul.navlinks {
        text-align:left;
        position:relative;
        border:none;
        }
        /*Navbar Base*/
        .navbar {
        box-shadow:5px 5px 10px rgba(0,0,0, 0.2) inset, -0.1px -5px 10px rgba(0,0,0, 0.2) inset;
        -webkit-border-radius:10px 0px 0px 10px;
        -moz-border-radius:10px 0px 0px 10px;
        -o-border-radius:10px 0px 0px 10px;
        background-color:rgba(0,0,0, 0.3);
        border-radius:10px 0px 0px 10px;
        position:fixed;
        height:auto;
        width:98px;
        right:0px;
        top:35px;
        }
        /*Nav Searcher*/
        p.nomargin > input#keywords.inputbox.search{
        position:relative;
        width:75px !important;
        right:-5px;
        margin-bottom:5px;
        }
        p.nomargin > input.button2{
        display:none;
        }
        div#search_menu.overview.row3 {
        left: -370px !important;
        top: 140px !important;
        }
        /*Footer*/
        a.icon-home{
        display:none;
        }
        #page-footer .navbar/*DO NOT MODIFY*/{
        background-color:transparent;
        position:inherit !important;
        box-shadow:none !important;
        display:inline !important;
        border:none;
        }
        span.corners-bottom, span.corners-bottom span, span.corners-top, span.corners-top span {display:none;}/*Corner Removal*/
        #wrap {float:left;}/*Space Reserve*/[/center]





مثال من موقع أجنبي




صورة توضيحية:





صورة توضيحية:




في رعاية الله
  افضل مساهمة2
جزاك الله خيرا على هدا المجهود الرائع
  افضل مساهمة3
السلام عليكم ورحمة الله وبركاته
ألف شكر لكَ على هذا الموضوع المميز و المعلومات القيمة 
إنـجاز أكثر رائــــــع 
لكن أرجو منكَ عدم التوقف عند هذا الحد 
مـنتظرين ابداعتــــــك 
دمتـ ودام تألقـك 
تحياتــي
لاتستطيع الرد على المواضيع في هذا المنتدى