منتديات تقنيات
يسعدنا تسجيلكم بالمنتدى اهلا بكم
لقد نسيت كلمة السر
منتديات تقنيات
1 / 4
تقنيات حصرية
2 / 4
اطلب استايلك مجانا
3 / 4
استايلات تومبلايت جديدة
4 / 4
دروس اشهار الموقع



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



استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

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

مُساهمة  في 08/01/17, 11:19 pm

السلام عليكم

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


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

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

إجعل عرض المنتدى 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]





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




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





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




في رعاية الله

issam
عضو نشيط


الجنس : ذكر
عدد المساهمات : 20
التقييم : 10
تاريخ التسجيل : 21/12/2016

معاينة صفحة البيانات الشخصي للعضو http://four.top-me.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

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

مُساهمة  في 14/01/17, 08:20 pm

جزاك الله خيرا على هدا المجهود الرائع



Delta
عضو نشيط


الجنس : ذكر
عدد المساهمات : 180
التقييم : 12
تاريخ التسجيل : 05/03/2016

معاينة صفحة البيانات الشخصي للعضو

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة

- مواضيع مماثلة

إنشاء حساب أو تسجيل الدخول لتستطيع الرد

تحتاج إلى أن يكون عضوا لتستطيع الرد.

انشئ حساب

يمكنك الانضمام لمنتديات تقنيات فعملية التسجيل سهله !


انشاء حساب جديد

تسجيل الدخول

اذا كنت مسجل معنا فيمكنك الدخول بالضغط هنا


تسجيل الدخول

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى