|
|
|
|
أدوات الموضوع | انواع عرض الموضوع |
07-31-2012, 02:41 PM | #1 |
مدون جديد
تاريخ التسجيل: Jul 2012
الدولة: مصر
المشاركات: 58
|
قائمة بتقنية css 3 ذات طابع احترافي
كل اللي هتعمله هتضفها في كود 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 |
07-31-2012, 03:07 PM | #2 |
مدير عام
تاريخ التسجيل: Apr 2012
الدولة: جده
المشاركات: 2,846
|
رد: قائمة بتقنية css 3 ذات طابع احترافي
__________________
|
مواقع النشر (المفضلة) |
الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1) | |
أدوات الموضوع | |
انواع عرض الموضوع | |
|
|
المواضيع المتشابهه | ||||
الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
أفضل قائمة منسدلة على بلوجر (قائمة 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 |
الساعة الآن 02:29 PM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو
تعاوني بين الأعضاء فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر) |