اختر لونك المفضل




العودة  Egyword - كلمة مصرية

أهلا وسهلا بك زائرنا الكريم، إذا كانت هذه زيارتك الأولى للشبكة، فيرجى التكرم بزيارة صفحة التعليمـــات، بالضغط هنا. كما يشرفنا أن تقومبالتسجيل بالضغط هنا إذا رغبت بالمشاركة في المنتدى، أما إذا رغبت بقراءة المواضيع والإطلاع فتفضل بزيارة القسم الذي ترغب أدناه.






Egyword :: خدمات المواقع والمنتديات :: قسم تطوير منتديات Ahlamontada :: قسم أكواد التومبلات Templates

  السبت 4 يونيو 2016 - 18:21

  • عدد المساهمات : 820
  • تاريخ التسجيل : 28/05/2016


افتراضي موضوع: حصريا كود وضع قائمة علوية بتقنية 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>

[b]طريقة الوضع:
لوحة الادارة/مظهر المنتدى/
الصفحة الرئيسية/تشكيلات عامة
       
واذا ارت وضعه اسفل شريط الاشعارات يجب التعديل على التومبلايت
نتوجه الى ؟
هذا القالب:
overall_header
ونبحث عن <!-- BEGIN switch_fb_login -->

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

  
[/b]



توقيع : MR.MESHO







  
hotel deals in sharm el sheikh

الــرد الســـريـع
..

هل تريد التعليق؟
انضم إلى ( Egyword - كلمة مصرية ) للحصول على حساب مجاني أو قم بتسجيل الدخول إذاكنت عضوًا بالفعل






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

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة




Powered by vBulletin® Copyright ©2000 - 2015, Jelsoft Enterprises Ltd