اضافة قائمة أحترافية شبية بقائمة مدونة جلال البدعاني

mohamed-alaa

الخميس، 15 مايو 2014

اقرأ ايضا

نعود أليكم بأضافة قائمة أحترافية

وهي شبيه في قائمة مدونة جلال البدعاني

تستطيع اضافتها ولكن ليس الى قالبك

لتجنب الأخطاء ولضمان عمل الأضافة

الشرح

أذهب الى لوحة التحكم

ومن ثم أختر أداة / HTML/JavaScript

وأضف الكود التالي

#menu li{
float: left;
padding: 0 0 10px 0;
position: relative;
}

#menu a{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}

#menu li:hover > a{
color: #fafafa;
}

*html #menu li a:hover{ /* IE6 */
color: #fafafa;
}

#menu li:hover > ul{
display: block;
}

/* Sub-menu */

#menu ul{
list-style: none;
margin: 0;
padding: 0; 
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999; 
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111); 
background: -o-linear-gradient(#444, #111); 
background: -ms-linear-gradient(#444, #111); 
background: linear-gradient(#444, #111); 
-moz-border-radius: 5px;
border-radius: 5px;
}

#menu ul li{
float: none;
margin: 0;
padding: 0;
display: block; 
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child{ 
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none; 
}

#menu ul a{ 
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}

*html #menu ul a{ /* IE6 */ 
height: 10px;
width: 150px;
}

*:first-child+html #menu ul a{ /* IE7 */ 
height: 10px;
width: 150px;
}

#menu ul a:hover{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba); 
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}

#menu ul li:first-child a{
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}

#menu ul li:first-child a:after{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after{
border-bottom-color: #04acec; 
}

#menu ul li:last-child a{
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}

/* Clear floated elements */
#menu:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

</style>

<br />
<ul id="menu">
<li><a href="https://www.blogger.com/%D8%A7%D9%84%D8%B1%D8%A7%D8%A8%D8%B7">مدونة سعودي حريف</a></li>
<li>
<a href="https://www.blogger.com/blogger.g?blogID=8467169151263341066#">فارغ</a>
<ul>
<li><a href="https://www.blogger.com/%D8%A7%D9%84%D8%B1%D8%A7%D8%A8%D8%B7">فارغ</a></li>
<li><a href="https://www.blogger.com/%D8%A7%D9%84%D8%B1%D8%A7%D8%A8%D8%B7">مثال فارغ</a></li>
<li><a href="https://www.blogger.com/%D8%A7%D9%84%D8%B1%D8%A7%D8%A8%D8%B7">فارغ</a></li>
<li><a href="https://www.blogger.com/%D8%A7%D9%84%D8%B1%D8%A7%D8%A8%D8%B7">فارغ</a></li>
</ul>
</li>
<li><a href="https://www.blogger.com/%D8%A7%D9%84%D8%B1%D8%A7%D8%A8%D8%B7">فارغ</a></li>
<li><a href="https://www.blogger.com/%D8%A7%D9%84%D8%B1%D8%A7%D8%A8%D8%B7">فارغ</a></li>
<li><a href="https://www.blogger.com/%D8%A7%D9%84%D8%B1%D8%A7%D8%A8%D8%B7">فارغ</a></li>
</ul>
</div>
>

ولاتنسى بأن تقوم بتغيير مايلزم لمدونتك

وهذا كل شئ أتمنى أن تكون الأضافة قد نالت رضاكم

نهاية الموضوع

الخميس، 15 مايو 2014