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

صفحة 2 من اصل 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

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


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

تحياتــي


زائر
زائر


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

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

مُساهمة من طرف Ahmed Yami في الإثنين يونيو 27, 2016 9:05 am


السلام عليكم ورحمة الله
شكرًا جزيلا على اكلود المتمير لكن الكود لا يقبل التركيب على النسخة PHPBB2


Ahmed Yami
عضو جديد
عضو جديد

الجنس : ذكر

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

نقاط النشاط : 13

السٌّمعَة : 1

بلد العضو :


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

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

مُساهمة من طرف 1M ThE BesT في السبت أغسطس 27, 2016 6:03 pm


1M ThE BesT
بصمة خالدة

بصمة خالدة

الجنس : ذكر

الدلو

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

نقاط النشاط : 27839

السٌّمعَة : 309

بلد العضو :

العمر : 24




http://jalil.assassino

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

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

مُساهمة من طرف 1Black Swan في السبت أغسطس 27, 2016 9:02 pm


1Black Swan
فريق الدردشة

فريق الدردشة

الجنس : ذكر

الجدي

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

نقاط النشاط : 1511

السٌّمعَة : 34

بلد العضو :

العمر : 100




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

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

مُساهمة من طرف زائر في السبت أغسطس 27, 2016 10:12 pm


منور الموضوع


زائر
زائر


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

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

مُساهمة من طرف AmEr MaGroh في الأربعاء سبتمبر 14, 2016 11:40 pm


AmEr MaGroh
عضو نشيط
عضو نشيط

الجنس : ذكر

الدلو

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

نقاط النشاط : 435

السٌّمعَة : 10

بلد العضو :

العمر : 15


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

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

مُساهمة من طرف 1sLaM A7mEd في الثلاثاء نوفمبر 22, 2016 8:58 pm


1sLaM A7mEd
بصمة خالدة

بصمة خالدة

الجنس : ذكر

الاسد

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

نقاط النشاط : 11656

السٌّمعَة : 65

بلد العضو :

العمر : 19


http://www.anjezweb.com/

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

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

مُساهمة من طرف Abir Antik في الثلاثاء نوفمبر 22, 2016 9:20 pm


موضووع مميز بارك الله فيك




التوقيع




لا تحاول البحث..عن حلم خذلك..بل حاول أن تجعل..
من الإنكسار..حلم جديـد...لا تستسلم بعد كل إنكسار..

Abir Antik
عضو فعال
عضو فعال

الجنس : انثى

الثور

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

نقاط النشاط : 667

السٌّمعَة : 1

بلد العضو :

العمر : 15


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

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

مُساهمة من طرف Mr.LoLo في الإثنين ديسمبر 19, 2016 4:07 pm


تسلم يدينكك =)

الكود رووعةة مثلكك ,,




التوقيع


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

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




Mr.LoLo
عضو دهبي
عضو دهبي

الجنس : ذكر

الجدي

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

نقاط النشاط : 6393

السٌّمعَة : 55

بلد العضو :

العمر : 100




http://bank.ahlamontada.com/

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

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

مُساهمة من طرف JAR7 في السبت يناير 28, 2017 11:42 pm


#تقنية_تكويد
#تعلم_تكويد
#برمجه_احلى_منتدى
#طور_منتداك
يعطيك العافية على العطاء
 واصل تالقك




التوقيع




JAR7
مؤسس الابداع العربي

مؤسس الابداع العربي

الجنس : انثى

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

نقاط النشاط : 136372

السٌّمعَة : 2828

بلد العضو :




http://taqnyiat.ahlamontada.com/

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

صفحة 2 من اصل 2 الصفحة السابقة  1, 2

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

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

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

سجل معنا الان

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


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

سجل دخولك

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


سجل دخولك

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