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

اذهب الى الأسفل

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

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


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

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


 
حصريا كود وضع قائمة علوية بتقنية css
صورة للمعاينه
حصريا كود وضع قائمة علوية بتقنية css 317jgxj
 https://2img.net/h/oi60.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 -->

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




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

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

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



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

ذكر
عدد المساهمات : 9059
معدل النشاط : 14169
السُمعة : 135

https://3arb-way.yoo7.com

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

الرجوع الى أعلى الصفحة

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

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