![]() |
قوائم جانبية منسدلة بCSS و jQuery ولا أروع السلام عليكم ورحمة الله وبركاته، أقدم لكم اليوم قوائم رائعة لمدونات بلوجر وهي من تصميم موقع CSSmenuMaker.com وقمت بتعريبها وجمعها في كود واحد حتى يسهل إضافتها على مدونات بلوجر حتى للمبتدئين. وقد تم تصميم هذه القوائم ب CSS و jQuery بحيث نقوم بالنقر على عنوان بقوائم ثانوية فتظهر القوائم الثانوية المخفية منسدلة بشكل جميل. نموذج القوائم: http://www.traidnt.net/vb/images/img...14/07/1209.png بإمكانكم مشاهدة مثال للقوائم من هنا وللراغبين في إضافة هذه القوائم على مدونات بلوجر خاصتهم تابعوا معنا هذه الخطوات. - الخطوة 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: المرجو لكل من نشر الدرس على مدونة أخرى أو منتديات أخرى ذكر المصدر وأتمنى صادقا أن ينال هذا الدرس إعجابكم. |
الساعة الآن 07:02 AM |
Powered by vBulletin® Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Content Relevant URLs by vBSEO 3.5.2 TranZ By
Almuhajir