قائمة فى قمة الإحترافية بالوان رائعه 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>

 

 

أتمنى إنى أكود قد أفدتكم

منشورة في: اضافات بلوجر, سي اس اس