»نشرت فى : الجمعة، 31 يناير، 2014»بواسطة : »ليست هناك تعليقات

قائمة فى قمة الإحترافية بالوان رائعه css

 قائمة فى قمة الإحترافية بالوان رائعه css


أهلا بكم إخوانى اليوم هو كود لإضافة قائمة روعة واحترافية لمدونتك طريقة التركيب
سهلة جدا القائمة الوانها داكنة تصميمها فى غاية البساطة 

والأن مع الشرح

أو خطوة هى - إذهب إلى لوحة التحكم الرئيسية - قم تحرير html
إبحث عن هذا الوسم
<style>

وضع أسفلة هذا الكود


#cssmenu{ height:37px; display:block; padding:0; margin: 0; 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:right; 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:#333333; background:-moz-linear-gradient(top, #333333 0%, #222222 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#222222)); background:-webkit-linear-gradient(top, #333333 0%,#222222 100%); background:-o-linear-gradient(top, #333333 0%,#222222 100%); background:-ms-linear-gradient(top, #333333 0%,#222222 100%); background:linear-gradient(top, #333333 0%,#222222 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#222222',GradientType=0 ); }
#cssmenu{border-color:#000;}
#cssmenu > ul > li > a{border-right:1px solid #000; color:#fff;}
#cssmenu > ul > li > a:after{border-color:#444;}
#cssmenu > ul > li > a:hover{background:#111;}


الخطوة الثانية والأخيرة إختار اضافة اداة جافاسكريبت ويمكن وضعها فى أى مكان بمدونتك
وضع الكود التالى
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>الرئيسية</span></a></li>
<li class='has-sub'><a href='#'><span>واحة الأحيوات</span></a>
<ul>
<li><a href='#'><span>قوالب بلوجر</span></a></li>
<li class='last'><a href='#'><span>اضافات بلوجر</span></a></li>
</ul>
</li>
<li><a href='#'><span>عن المدون</span></a></li>
<li class='last'><a href='#'><span>فوتوشوب</span></a></li>
</ul>

التغييرات
  1. مكان اللون     قم بوضع الرابط الخاص بك
  2. مكان اللون     قم بتغيير إسم القوائم كما يناسبك
يمكنك أيضا زيادة هذا العدد وهو تكرار هذا الكود عند الحاجة
<li class='last'><a href='#'><span>فوتوشوب</span></a></li>
قم بنسخة وضع قبل هذا الوسم </ul>
أتمنى إنى أكود قد أفدتكم

منقول 

    اضف تعليقاً عبر:

  • blogger
  • disqus

الابتسامات

0102030405060708091011121314151617181920212223242526272829303132333435363738394041424344

كافة الحقوق محفوظة لمدونة واحــة الأحيـــــــــــــــــــــوات 2016