السلام عليكم
في هدا الموضوع سنتطرق الى طريقة اضافة قائمة للمدونات بلوجر دو شكل جمالى مع تاثيرات رائعة
القائمة عبارة عن كود بلغة css3 تديفة في اي مكان في المدونة كاضافتك لاي اضافة عاديا عن طريق :
المدونة >> تخطيط >> اضافة اداة >> javascript/html >>
واضف الكود التالي :
<style>
/*------ CSS3 Drop Down Menu By MMK (www.ar-cookies.blogspot.com)---------*/
#MMK-menu, #MMK-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#MMK-menu {
width: 460px;
margin: 60px auto;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#MMK-menu:before,
#MMK-menu:after {
content: "";
display: table;
}
#MMK-menu:after {
clear: both;
}
#MMK-menu {
zoom:1;
}
#MMK-menu li {
float: right;
border-left: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#MMK-menu a {
float: right;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px tahoma, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#MMK-menu li:hover > a {
color: #fafafa;
}
*html #MMK-menu li a:hover { /* IE6 only */
color: #fafafa;
}
#MMK-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
right: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,right bottom,right 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-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#MMK-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#MMK-menu ul ul {
top: 0;
right: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#MMK-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#MMK-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#MMK-menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#MMK-menu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, right top, right bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
}
#MMK-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#MMK-menu ul li:first-child > a:after {
content: '';
position: absolute;
right: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#MMK-menu ul ul li:first-child a:after {
right: -6px;
top: 50%;
margin-top: -6px;
border-right: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-left: 6px solid #3b3b3b;
}
#MMK-menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#MMK-menu ul ul li:first-child a:hover:after {
border-left-color: #0299d3;
border-bottom-color: transparent;
}
#MMK-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
</style>
<ul id="MMK-menu">
<li><a href="/">المدونة</a></li>
<li>
<a href="#">الاقسام</a>
<ul>
<li><a href="#">للتعديــل</a></li>
<li><a href="#">للتعديــل</a></li>
<li><a href="#">للتعديــل</a></li>
<li><a href="#">للتعديــل</a></li>
</ul>
</li>
<li><a href="#">عــنــا</a></li>
<li><a href="#">للتواصل</a></li>
</ul>
يمكنك تغيير :
طول القائمة
وغير# بالرابط المراد الدهاب اليه مع الكتابة
بالتوفيق
0 التعليقات:
إرسال تعليق