KHALED ALMILBE




مدون ومطور قوالب بلوجر
My E-mail : ###
My Phone No. : #%^$#
My Website : www.k2d.us

اترك رسالتك

الاسم (إختيارى)

عنوان بريدك الإلكترونى (مطلوب)

محتوى الرسالة (مطلوب)

تابعنا على :

f tw +G yt vk

لدعمنا قم بمتابعة المدونة ليصلك كل جديدنا

اضغط هنا

5/23/2015

ليست هناك تعليقات
2015-05-23T00:24:00+03:00

اضافة قائمة جانبية بتقنية CSS


اضافة قائمة جانبية بتقنية CSS

طريقة الاضافة تخطيط اضافة اداة - HTML/JavaScript

واضف الكود التالي  مع تغيير المدون اسفل التدوينة
<div id='cssmenu'><ul><li><a href='/'><span>الأولى</span></a></li><li><a href='#'><span>بلوجر</span></a><ul><li><a href='#'><span>دروس بلوجر</span></a></li><li><a href='#'><span>أدوات بلوجر</span></a></li><li><a href='#'><span>قوالب بلوجر</span></a></li></ul></li><li><a href='#'><span>فوتوشوب</span></a><ul><li><a href='#'><span>تحميل</span></a></li><li><a href='#'><span>من نكون؟</span></a></li></ul></li><li><a href='#'><span>للإتصال بنا</span></a></li></ul></div>

<style> @import url(http://fonts.googleapis.com/css?family=Open+Sans: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;}</style><script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script><script type='text/javascript'>$(document).ready(function(){
$('#cssmenu > ul > li ul').each(function(index, e){var count = $(e).find('li').length;var content = '<span class="cnt">' + count + '</span>';$(e).closest('li').children('a').append(content);});$('#cssmenu ul ul li:odd').addClass('odd');$('#cssmenu ul ul li:even').addClass('even');$('#cssmenu > ul > li > a').click(function() {$('#cssmenu li').removeClass('active');$(this).closest('li').addClass('active'); var checkElement = $(this).next();if((checkElement.is('ul')) && (checkElement.is(':visible'))) {$(this).closest('li').removeClass('active');checkElement.slideUp('normal');}if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {$('#cssmenu ul ul:visible').slideUp('normal');checkElement.slideDown('normal');}if($(this).closest('li').find('ul').children().length == 0) {return true;} else {return false; });
});</script>



<li><a href='#'><span>دروس بلوجر</span></a></li>

الأزرق : اسم القسم

الاحمر : الرابط المراد الانتقال اليه

تريد اضافة المزيد من القوائم
اضف بينهما
<li><a href='#'><span>أدوات بلوجر</span></a></li>
 مثال على الصورة

خطأ فى التحميل ! , ربما تكون المدونة غير عامة أو متاحة لمؤلفو المدونة فقط أو قد تكون خلاصة المدونة معطلة , من فضلك قم بجعل المدونة عامة و السماح بخلاصة المدونة كاملة لتفعيل هذه الإضافة , مزيد من المعلومات
عرض تعليقات : أو

ليست هناك تعليقات:

إرسال تعليق

المتابعون

حلولي *fb:https://www.facebook.com/hlo1y *tw:https://twitter.com/hlo1y *yt:https://www.youtube.com/user/v518v *gp:https://plus.google.com/+v518v *signature_img: https://2.bp.blogspot.com/-BB5G-R4BmMs/WYk0ptd5qGI/AAAAAAAAIuA/JYOxvfMzE9YdC1xMH9dytmkcAaWZt49XgCLcBGAs/s1600/sinature.png *txt: لـدي القليل مـن الخبره ، فـي مجال الـتدويـن اضع بالمدونة ما يـفـيـد الزائر والـمـدون ، تــابـعـنـا قـد نـفـيـدك يـومـاً peter hany *fb:https://www.facebook.com/peter.hany3 *tw: *yt: *gp: *signature_img:https://3.bp.blogspot.com/-_hF3OQo4bRA/WJ0VlzGC0qI/AAAAAAAAEUU/cddR54285KUQ1VigxKy-x8TUVwhsVEWUQCLcB/s1600/sinature.png *txt:اسمى بيتر هانى ميلاد , مصمم ومطور ويب , 20 سنة , مصرى الجنسية , أعيش فى محافظة المنوفية , طالب فى كلية الهندسة المدنية , أهتم بكل جديد فى مجال بلوجر وفى تطوير الويب , لدى خبرة فى إستعمال برامج الجرافيك , أحب تصميم القوالب البسيطة والتى تعطى إنطباع أنها ليست تحت فئة قوالب بلوجر ذات الإمكانيات المحدودة.