منتدى الدعم العربي لمنتديات أحلى منتدى
مرحبا بك في منتدى دعم منتديات AhlaMontada

لتتمكن من الإستمتاع بكافة ما يوفره لك هذا المنتدى من خصائص, يجب عليك أن تسجل الدخول الى حسابك في المنتدى. إن لم يكن لديك حساب بعد, نتشرف بدعوتك لإنشائه.

انشاء منتدى مجاني شبيه بهذا المنتدى
أحلى الشبكات الإجتماعية

انشاء منتدى مجاني



 انشاء منتدى مجاني

أقسام الدعم

دعم الخدمات العامة:
مشاكل كلمة السر
مشاكل فتح المنتدى
مشاكل لوحة الإدارة
مشاكل تنسيق المظهر
المشاكل الأخرى

----------------------

دعم الخدمات التكميلية :
مشاكل النطاقات
مشاكل التومبلايت

----------------------

مراسلة الإدارة :

طلب كلمة السر
إرسال أكواد أو شروحات
أتصل بنا
كيفية طلب كلمة سر جديدة
> طريقة طلب كلمة سر

تنبيه: لا تضع أبداً ايميل الإنشاء في مساهماتك و لا تعطيه لأحد!
المواضيع الأخيرة
» حذفت موقعي ثم استعدته، ولكن كلمة السر لا تدخل
اليوم في 10:17 من طرف عبد القيوم مسلم

»  طلب الكود
اليوم في 2:11 من طرف كمال92

» طلب سلايد بسيط*
اليوم في 0:45 من طرف 0marp0p23

» مشكلة
أمس في 23:37 من طرف 0marp0p23

» جعل المنتدى بطيء!!
أمس في 22:27 من طرف عبد المجيد الذكي

» اعلاني مخالف
أمس في 22:21 من طرف ahd allah

» مشكله في الرتب
أمس في 18:09 من طرف zaydoon

» ايكونه محذوفه اسفل التعليق ..
أمس في 14:59 من طرف zaydoon

» ربط المنتدى بالمدونة
أمس في 11:16 من طرف ahd allah

أفضل الأعضاء الموسومين
@الزعيم
 
@@
 
@stones
 
@Mohamed Nsr
 
@JAR7
 

عمل منتدى

حصريا كود وضع قائمة علوية بتقنية css

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

حصريا كود وضع قائمة علوية بتقنية css

مُساهمة من طرف وهبة الساحر في الأحد 13 سبتمبر 2015 - 12:37


حصريا كود وضع قائمة علوية بتقنية css

حصريا كود وضع قائمة علوية بتقنية css


 
حصريا كود وضع قائمة علوية بتقنية css
صورة للمعاينه

 http://i60.tinypic.com/317jgxj.png

الكود ؟
     

الرمز:
 <div class="menu">
    <ul>
    <li><span></span><a href="#">Home1</a></li>
    <li><span></span><a href="#">Home2</a></li>
    <li><span></span><a href="#">Home3</a></li>
     <li><span></span><a href="#">Home4</a></li>
    <li><span></span><a href="#">Home5</a></li>
    </ul>
</div>
        <style type="text/css">
      
.menu {
    text-align: center;
    border-bottom: 1px solid white;
}
.menu ul{
    background:#d62300;
    height:50px;
    width:97%;
    padding-top:20px;
    padding-left:3%;
}
.menu ul li{
    display:inline-block;
    position:relative;
    width:100px;
    height:30px;
    text-align:center;
}
.menu ul li a{
    position:absolute;
    z-index:100;
    left:0px;
    width:100%;
    height:25px;
    padding-top:5px;
    color:#eee;
    font-family:"TeXGyreReg",sans-serif;
    font-weight:normal;
    text-shadow:-1px -1px 0px rgba(0,0,0,0.2),1px 1px 0px rgba(255,255,255,0.2);
    font-size:1.1em;
    text-decoration:none;
    font-size:0.9em;
}
.menu ul li span{
    position:absolute;
    visibility:hidden;
    z-index:95;
    display:block;
    width:100px;
    height:30px;
    background:rgba(0,0,0,0.4);
    left:0px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -ms-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

.menu ul li span{
    left:-1600px;
    -webkit-transition:left 0.2s ease,visibility 0s ease 0.2s;
    -o-transition:left 0.2s ease,visibility 0s ease 0.2s;
    -moz-transition:left 0.2s ease,visibility 0s ease 0.2s;
    -ms-transition:left 0.2s ease,visibility 0s ease 0.2s;
    transition:left 0.2s ease,visibility 0s ease 0.2s;
}

.menu ul li:hover span{
    left:0px;
    visibility:visible;
    -webkit-transition:left 0.2s ease 0.3s,visibility 0s ease;
    -o-transition:left 0.2s ease 0.3s,visibility 0s ease;
    -moz-transition:left 0.2s ease 0.3s,visibility 0s ease;
    -ms-transition:left 0.2s ease 0.3s,visibility 0s ease;
    transition:left 0.2s ease 0.3s,visibility 0s ease;
}
        </style>
        

يمكنك ان تذيد من العناصر المتواجدة بالقائمة عن طريق تكرر هذا الرمز فى الكود      


الرمز:
<li><span></span><a href="#">Home3</a></li>
طريقة الوضع:
لوحة الادارة/مظهر المنتدى/
الصفحة الرئيسية/تشكيلات عامة
       
واذا ارت وضعه اسفل شريط الاشعارات يجب التعديل على التومبلايت
نتوجه الى ؟
هذا القالب:
overall_header
ونبحث عن <!-- BEGIN switch_fb_login -->

وتضيف الكود اعلاه مباشرتا       




تم الشرح بواسطتى
وهبة الساحر
المتطوع المساعد

ارجوا ان اكون قد افدتكم
انتهي الموضوع




عدل سابقا من قبل وهبة الساحر في الأحد 13 سبتمبر 2015 - 13:15 عدل 1 مرات

وهبة الساحر
 
 

ذكر
عدد المساهمات : 9499
معدل النشاط : 11381

http://3arb-way.a7larab.net/

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

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


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