|
إنضمامك إلي منتديات استراحات زايد يحقق لك معرفة كل ماهو جديد في عالم الانترنت ...
انضم الينا
#1
| ||
| ||
السلام عليكم ورحمة الله وبركاته، أقدم لكم اليوم قوائم رائعة لمدونات بلوجر وهي من تصميم موقع CSSmenuMaker.com وقمت بتعريبها وجمعها في كود واحد حتى يسهل إضافتها على مدونات بلوجر حتى للمبتدئين. وقد تم تصميم هذه القوائم ب CSS و jQuery بحيث نقوم بالنقر على عنوان بقوائم ثانوية فتظهر القوائم الثانوية المخفية منسدلة بشكل جميل. نموذج القوائم: بإمكانكم مشاهدة مثال للقوائم من هنا وللراغبين في إضافة هذه القوائم على مدونات بلوجر خاصتهم تابعوا معنا هذه الخطوات. - الخطوة 1: من واجهة المتدونة تختارون التخطيط ثم إضافة أداة، وبعد ذلك تختارون HTML/Javascript: - الخطوة 2: داخل إطار الأداة ستقومون بلصق الكود التالي: رمز Code: @import url(http://fonts.googleapis.com/css?fami...:400,600,300); #cssmenu, #cssmenu ul, #cssmenu li, #cssmenu a { margin: 0; padding: 0; border: 0; list-style: none; font-weight: normal; text-decoration: none; line-height: 1; font-family: 'Open Sans', sans-serif; font-size: 14px; position: relative; } #cssmenu a { line-height: 1.3; } #cssmenu { width: 250px; } #cssmenu > ul > li > a { padding-right: 40px; font-size: 25px; font-weight: bold; display: block; background: #bd0e36; color: #ffffff; border-bottom: 1px solid #5e071b; text-transform: uppercase; position: relative; } #cssmenu > ul > li > a > span { background: #ed1144; padding: 10px; display: block; font-size: 13px; font-weight: 300; } #cssmenu > ul > li > a:hover { text-decoration: none; } #cssmenu > ul > li.active { border-bottom: none; } #cssmenu > ul > li.active > a { color: #fff; } #cssmenu > ul > li.active > a span { background: #bd0e36; } #cssmenu span.cnt { position: absolute; top: 8px; right: 15px; padding: 0; margin: 0; background: none; } #cssmenu ul ul { display: none; } #cssmenu ul ul li { border: 1px solid #e0e0e0; border-top: 0; } #cssmenu ul ul a { padding: 10px; display: block; color: #ed1144; font-size: 13px; } #cssmenu ul ul a:hover { color: #bd0e36; } #cssmenu ul ul li.odd { background: #f4f4f4; } #cssmenu ul ul li.even { background: #fff; } - الخطوة 3: قوموا بحفظ التغييرات بعد تغيير القوائم بحسب حاجتكم. وستلاحظون ظهور قوائم جانبية جميلة ورائعة ب ب CSS و jQuery لمدونة بلوجر الخاصة بكم. الدرس منقول عن مدونة فلفلاي Folfoly :strongly: المرجو لكل من نشر الدرس على مدونة أخرى أو منتديات أخرى ذكر المصدر وأتمنى صادقا أن ينال هذا الدرس إعجابكم. __DEFINE_LIKE_SHARE__ |
مواقع النشر (المفضلة) |
| |
المواضيع المتشابهه | ||||
الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
[ jquery ] تعلم JQUERY بالعربية و في 2 ساعات الان و حصريا على ترايدنت Traidnt | محروم.كوم | منتدى أخبار المواقع والمنتديات العربية والأجنبية | 0 | 05-25-2014 03:10 PM |
[ jquery ] اظهار كلمة السر واخفائها بواسطه checkbox jquery | محروم.كوم | منتدى أخبار المواقع والمنتديات العربية والأجنبية | 0 | 03-05-2014 02:30 PM |
[ فيديو ] عمل قائمة منسدلة JQuery + CSS | محروم.كوم | منتدى أخبار المواقع والمنتديات العربية والأجنبية | 0 | 03-01-2014 05:00 AM |
[ jquery ] إضافة مربع نص بشكل حيوي باستخدام Jquery | محروم.كوم | منتدى أخبار المواقع والمنتديات العربية والأجنبية | 0 | 08-30-2013 08:10 PM |
[طلب] شرح إنشاء قوائم منسدلة ب css | محروم.كوم | منتدى أخبار المواقع والمنتديات العربية والأجنبية | 0 | 10-09-2011 07:00 PM |