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

صفحة 1 من اصل 2 1, 2  الصفحة التالية

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

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

مُساهمة من طرف زائر في الخميس سبتمبر 03, 2015 9:54 am


السلام عليكم ورحمة الله وبركاته

اليوم اقدم لكم نافبار جميل او قائمة علوية بازرار منسدله بتقنية css

الكود يضاف overall_header

حيث تبحث عن  <!-- BEGIN switch_fb_login -->

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

صورة للكود التومبيلات




http://i59.tinypic.com/15d44so.jpg

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

الكود:
<div id='cssmenu'>
<ul>
  <li><a href='#'><span>أضف عنوانا</span></a></li>
  <li><a href='#' target='_blank'><span>أضف عنوانا</span></a></li>
  <li><a href='#' target='_blank'><span>أضف عنوانا</span></a></li>
  <li><a href='#' target='_blank'><span>أضف عنوانا</span></a></li>
  <li><a href='#' target='_blank'><span>اتصل بنا</span></a></li>
  <li class='#'><a href='#'><span>أقسام الموقع</span></a>
      <ul>
        <li><a href='#' target='_blank'><span>القسم 1</span></a></li>
        <li class='last'><a href='#' target='_blank'><span>القسم 2</span></a></li>
      </ul>
  </li>
  <li><a href='/' target='_blank'><span>المنتدى</span></a></li>
  <li class='last'><a href='#'><span>الموقع</span></a></li>
</ul>
</div>
<style type="text/css">
#cssmenu{ height:37px; display:block; padding:0; margin:20px auto;  border:1px solid; border-radius:5px; } 
#cssmenu > ul {list-style:inside none; padding:0; margin:0;} 
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;} 
#cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); } 
#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;} 
#cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; } 
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;} 
#cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; } 
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;} 
#cssmenu ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; } 
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;} 
#cssmenu ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;} 
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; } 
#cssmenu ul li > ul{width:200px;} 
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;} 
#cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); } 

#cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#3e698c; background:-moz-linear-gradient(top,  #3e698c 0%, #30576e 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#3e698c), color-stop(100%,#30576e)); background:-webkit-linear-gradient(top,  #3e698c 0%,#30576e 100%); background:-o-linear-gradient(top, #3e698c 0%,#30576e 100%); background:-ms-linear-gradient(top, #3e698c 0%,#30576e 100%); background:linear-gradient(top,  #3e698c 0%,#30576e 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e698c', endColorstr='#30576e',GradientType=0 ); } 
#cssmenu{border-color:#1b313d;} 
#cssmenu > ul > li > a{border-right:1px solid #1b313d; color:#fff;} 
#cssmenu > ul > li > a:after{border-color:#6696bd;} 
#cssmenu > ul > li > a:hover{background:#436f93;} 

</style> 
 

 

في رعاية الله ,,,


زائر
زائر


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

رد: كود قائمة علوية مع ازرار بتقنيه css

مُساهمة من طرف صرخة ألم في الخميس سبتمبر 03, 2015 10:54 am


يعطيك ربي الفعافية
سسسلمتأيآديكك ي الغغلا
آلله لآيحرمنا منكك ومن مواضيعكك
تحياتي لك ولشخصكك المميز
ودي لك




التوقيع


avatar
صرخة ألم
عضو نشيط
عضو نشيط

الجنس : ذكر

السرطان

عدد المساهمات : 281

نقاط النشاط : 461

السٌّمعَة : 12

العمر : 25


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

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

رد: كود قائمة علوية مع ازرار بتقنيه css

مُساهمة من طرف زائر في الخميس سبتمبر 03, 2015 10:57 am


منوووووووووووووووور


زائر
زائر


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

رد: كود قائمة علوية مع ازرار بتقنيه css

مُساهمة من طرف Abshahad في الأحد فبراير 07, 2016 6:37 am


يعطيك العآفيه يا الغلا
طرح بقمة الذوووق والرووعهـ
تسلم يدك ع الطرح المميز لاعدمنـآك ,...
بانتظارجديدك بكل شوق ودي وشذى وردي





avatar
Abshahad
بصمة خالدة

بصمة خالدة

الجنس : ذكر

الاسد

عدد المساهمات : 23056

نقاط النشاط : 26533

السٌّمعَة : 89

بلد العضو :

العمر : 36


معاينة صفحة البيانات الشخصي للعضو https://www.ibda3araby.com/

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

رد: كود قائمة علوية مع ازرار بتقنيه css

مُساهمة من طرف ahmedkhalifa في الأحد فبراير 07, 2016 8:36 am


يعطيك العافيه
كنت محتاجه الاضافه مركز الرفع
شككرراا




التوقيع


وردة حمراء  وردة حمراء ahmedkhalifa وردة حمراء  وردة حمراء










painting painting painting painting painting جارى جارى جارى gfifeee
avatar
ahmedkhalifa
عضو نشيط
عضو نشيط

الجنس : ذكر

عدد المساهمات : 134

نقاط النشاط : 257

السٌّمعَة : 13

بلد العضو :


معاينة صفحة البيانات الشخصي للعضو http://totwerkm.ibda3.info/

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

رد: كود قائمة علوية مع ازرار بتقنيه css

مُساهمة من طرف زائر في الأحد فبراير 07, 2016 2:48 pm


منور الموضوع


زائر
زائر


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

رد: كود قائمة علوية مع ازرار بتقنيه css

مُساهمة من طرف ѕαα∂ ∂єѕιgη في الأحد فبراير 07, 2016 5:49 pm

avatar
ѕαα∂ ∂єѕιgη
بصمة خالدة

بصمة خالدة

الجنس : ذكر

الدلو

عدد المساهمات : 37101

نقاط النشاط : 41647

السٌّمعَة : 280

بلد العضو :

العمر : 18


معاينة صفحة البيانات الشخصي للعضو http://WwW.t-AlTwEr.CoM

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

رد: كود قائمة علوية مع ازرار بتقنيه css

مُساهمة من طرف THE ROCK في الأحد فبراير 07, 2016 5:51 pm


سلمت أناملك/ي الذهبية عالطرح الرائع 
الذي أنار صفحات منتدى الابداع العربي
بكل ماهو جديد لكِ مني أرق وأجمل التحايا 
على هذا التألق والأبداع 
والذي هو حليفك/ي دوما" أن شاء الله




التوقيع



avatar
THE ROCK
عضو فعال
عضو فعال

الجنس : ذكر

عدد المساهمات : 668

نقاط النشاط : 988

السٌّمعَة : 24

بلد العضو :


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

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

رد: كود قائمة علوية مع ازرار بتقنيه css

مُساهمة من طرف Robbie Rotten في الأحد فبراير 07, 2016 6:13 pm


كوددد جميل
شكككرآ   ~




التوقيع


سبحان الله وبحمده ..
          سبحان الله العظيم ...

اللهم صلِّ وسلم على محمد.. وعلى آله وصحبه أجمعين



avatar
Robbie Rotten
بصمة خالدة

بصمة خالدة

الجنس : ذكر

الجدي

عدد المساهمات : 5980

نقاط النشاط : 6786

السٌّمعَة : 59

بلد العضو :

العمر : 100




معاينة صفحة البيانات الشخصي للعضو http://bank.ahlamontada.com/

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

رد: كود قائمة علوية مع ازرار بتقنيه css

مُساهمة من طرف زائر في الثلاثاء مايو 17, 2016 8:11 pm


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

تحياتــي


زائر
زائر


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

صفحة 1 من اصل 2 1, 2  الصفحة التالية

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

سجل دخولك لتستطيع الرد بالموضوع

لابد تكون لديك عضوية لتستطيع الرد سجل الان

سجل معنا الان

انضم الينا بمنتدي الابداع العربي فعملية التسجيل سهله جدا ؟


تسجيل عضوية جديدة

سجل دخولك

لديك عضوية هنا ؟ سجل دخولك من هنا .


سجل دخولك

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






Feedage Grade B rated