لقد قمت في السابق بتقديم قائمة منسدلة بأشكال متعددة و ألوان رائعة...اليوم أقدم لكم قائمة منسدلة جديدة جميلة جدا...
1- من لوحة التحكم >>> تخطيط >>> اضافة اداة html/javascript
2- انسخ الكود التالي داخل الاداة : (يمكنك نقل الاداة الى المكان الذي تريد)
* اللون الاحمر : عناوين الاقسام العمودية .
* اللون الازرق : روابط الاقسام كل قسم له رابطه الخاص .
*اللون البرتقالي (650) طول القائمة حتى تتوافق مع مدونتك
تركيب قائمة منسدلة :
2- انسخ الكود التالي داخل الاداة : (يمكنك نقل الاداة الى المكان الذي تريد)
<style>
/*------ CSS3 Drop Down Menu By JEHHAD (www.rydnet.blogspot.com)---------*/
#mbt-menu, #mbt-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#mbt-menu {
width: 560px;
margin: 60px auto;
border: 1px solid #000;
background-color: #333;
background-image: -moz-linear-gradient(#800000, #333);
background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#800000));
background-image: -webkit-linear-gradient(#333, #800000);
background-image: -o-linear-gradient(#800000, #999);
background-image: -ms-linear-gradient(#333, #800000);
background-image: linear-gradient(#800000, #333);
-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;
}
#mbt-menu:before,
#mbt-menu:after {
content: "";
display: table;
}
#mbt-menu:after {
clear: both;
}
#mbt-menu {
zoom:1;
}
#mbt-menu li {
float: right;
border-right: 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;
}
#mbt-menu a {
float: right;
padding: 12px 30px;
color: #FFFF00;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#mbt-menu li:hover > a {
color: #fff;
}
*html #mbt-menu li a:hover { /* IE6 only */
color: #000;
}
#mbt-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#800000, #999);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#333, #800000);
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;
}
#mbt-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#mbt-menu ul ul {
top: 0;
left: 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);
}
#mbt-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;
}
#mbt-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#mbt-menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#mbt-menu ul a:hover {
background-color: #fff;
background-image: -moz-linear-gradient(#800000, #000);
background-image: -webkit-gradient(linear, left top, left 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);
}
#mbt-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;
}
#mbt-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#mbt-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#mbt-menu ul li:first-child a:hover:after {
border-bottom-color: #fff;
}
#mbt-menu ul ul li:first-child a:hover:after {
border-right-color: #fff;
border-bottom-color: transparent;
}
#mbt-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="mbt-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="#">خدمات RYDNET المجانية</a></li>
</ul>
</li>
<li><a href="#">دورة بلوجر</a></li>
<li><a href="#">عن الموقع</a></li>
<li><a href="#">اتصل بنا</a></li>
</ul>
طريقة تعديل القائمة المنسدلة :
* اللون الاخضر : عناوين الاقسام الافقية .* اللون الاحمر : عناوين الاقسام العمودية .
* اللون الازرق : روابط الاقسام كل قسم له رابطه الخاص .
*اللون البرتقالي (650) طول القائمة حتى تتوافق مع مدونتك
انتهينا من الاضافة........
مع تحيات حمزة رمزي.........
|
|
|
|
 قائمة منسدلة-5 - جديد ! |
|
[اذا اعجبك الموضوع هذه روابط النشر]
URL Of Post:
Paste This HTML Code On Your Page:
.jpg)
التعليقات : 2
عمل ممتاز ساقوم بتجريبها
رووووووووووووووووووووعة
أخي الكريم، رجاء قبل وضع أي كود في تعليقك، حوله بهذه الأداة ثم ضع الكود المولد لتجنب اختفاء بعض الوسوم.
الروابط الدعائية ستحذف لكونها تشوش على المتتبعين و تضر بمصداقية التعليقات.