رئيسية المعهد
رئيسية المعهد  تواصل معنا  حقوق الملكية الفكرية  اربط مدونتك بنا  محول أكواد أدسنس

 

معرض قوالب معهد خبراء بلوجر - دليل مدونات بلوجر - موقع نشر بلوجر - اضافات بلوجر




العودة   معهد خبراء بلوجر > الدعم الفني > إضافات وأدوات بلوجر


إضافة رد
نسخ الرابط
نسخ للمنتديات
 
أدوات الموضوع انواع عرض الموضوع
قديم 07-31-2012, 02:41 PM   #1
a7meda1a
مدون جديد
 
الصورة الرمزية a7meda1a
 
تاريخ التسجيل: Jul 2012
الدولة: مصر
المشاركات: 58
Thumbs up قائمة بتقنية css 3 ذات طابع احترافي

أنا : a7meda1a






كل اللي هتعمله هتضفها في كود
HTML/JavaScript


كود بلغة HTML:
<style>

/*------ CSS3 Drop Down Menu By MBT (www.mybloggertricks.com)---------*/

#mbt-menu, #mbt-menu ul {

margin: 0;

padding: 0;

list-style: none;

}

#mbt-menu {

width: 960px;

margin: 60px auto;

border: 1px solid #222;

background-color: #111;

background-image: -moz-linear-gradient(#444, #111);

background-image: -webkit-gradient(linear, right top, right 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;

}

#mbt-menu:before,

#mbt-menu:after {

content: "";

display: table;

}

#mbt-menu:after {

clear: both;

}

#mbt-menu {

zoom:1;

}

#mbt-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;

}

#mbt-menu a {

float: right;

padding: 12px 30px;

color: #999;

text-transform: uppercase;

font: bold 13px Arial, Helvetica;

text-decoration: none;

text-shadow: 0 1px 0 #000;

}

#mbt-menu li:hover > a {

color: #fafafa;

}

*html #mbt-menu li a:hover { /* IE6 only */

color: #fafafa;

}

#mbt-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;

}

#mbt-menu li:hover > ul {

opacity: 1;

visibility: visible;

margin: 0;

}

#mbt-menu ul ul {

top: 0;

right: 150px;

margin:0 20px 0 0;

_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: #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);

}

#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;

right: 40px;

top: -6px;

border-right: 6px solid transparent;

border-left: 6px solid transparent;

border-bottom: 6px solid #444;

}

#mbt-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;

}

#mbt-menu ul li:first-child a:hover:after {

border-bottom-color: #04acec;

}

#mbt-menu ul ul li:first-child a:hover:after {

border-left-color: #0299d3;

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="#">تعديل</a></li>
</ul>
</li>
<li><a href="#">تعديل</a></li>
<li><a href="#">عن المدونة</a></li>
<li><a href="#">راسلنا</a></li>
</ul>
هتحط مكان # اللينك بتاعك وغير العنوان
اضافه رائعه جدا يارب تعجبكم

الدعم العربي


التعديل الأخير تم بواسطة a7meda1a ; 07-31-2012 الساعة 04:40 PM
a7meda1a غير متواجد حالياً   رد مع اقتباس

مركز رفع موسوعة العربية
قديم 07-31-2012, 03:07 PM   #2
admin
مدير عام
 
الصورة الرمزية admin
 
تاريخ التسجيل: Apr 2012
الدولة: جده
المشاركات: 2,846
افتراضي رد: قائمة بتقنية css 3 ذات طابع احترافي

أنا : admin




إضافة رائعة أخي
واصل ...
تم التقييم

الدعم العربي

admin غير متواجد حالياً   رد مع اقتباس
إضافة رد

مواقع النشر (المفضلة)


الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)
 
أدوات الموضوع
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة

الانتقال السريع

المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
أفضل قائمة منسدلة على بلوجر (قائمة Mashable معربة) admin إضافات وأدوات بلوجر 8 06-12-2013 03:37 PM
أضف أزرار جميلة لمدونتك بتقنية الcss Jaabiriovic إضافات وأدوات بلوجر 2 02-13-2013 12:38 PM
كيف أنشئ قائمة!! Perfect طلبات الدعم الفني 1 11-08-2012 08:11 PM
إضافة قائمة الفايسبوك الجانبية بتقنية Jquery overboy إضافات وأدوات بلوجر 2 08-04-2012 06:55 PM





لتصفح أفضل وللاستفادة القصوى من خصائص المعهد ننصحكم باستعمال :

Powered by vBulletin® Copyright ©2000 - 2024 Dov By EGYNT.Co
new notification by 9adq_ala7sas
Developed By Marco Mamdouh
معهد خبراء بلوجر - 2012 Google
أعلن على المعهد : اتصل بنا - منتدي كنوز - الدعم العربي - قوالب بلوجر - او او انيمي
رئيسية المعهد
الساعة الآن 02:29 PM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء
فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته
التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك
(ويتحمل كاتبها مسؤولية النشر)