كود قائمة علوية مع ازرار بتقنيه 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> 
 

 


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

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

يعطيك ربي الفعافية

سسسلمتأيآديكك ي الغغلا

آلله لآيحرمنا منكك ومن مواضيعكك

تحياتي لك ولشخصكك المميز

ودي لك

التوقيع

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

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

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

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

التوقيع

 لمراسلة الادارة بأمور خاصة لايشاهدها غير الادارة فقط
 من هنا لطلب الالتحاق بفريق منتدانا الحبيب

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

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

التوقيع

  ahmedkhalifa  

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

منور الموضوع

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

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

التوقيع

لمراسلة الادارة بأمور خاصة لايشاهدها غير الادارة فقط

من هنا لطلب الالتحاق بفريق منتدانا الحبيب

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

سلمت أناملك/ي الذهبية عالطرح الرائع 

الذي أنار صفحات منتدى الابداع العربي

بكل ماهو جديد لكِ مني أرق وأجمل التحايا 

على هذا التألق والأبداع 

والذي هو حليفك/ي دوما" أن شاء الله

التوقيع

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

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

التوقيع

سبحان الله وبحمده ..

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

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

 لمراسلة الادارة بأمور خاصة لايشاهدها غير الادارة فقط
 من هنا لطلب الالتحاق بفريق منتدانا الحبيب

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

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

تحياتــي