حلولي https://www.facebook.com/hlo1y https://twitter.com/hlo1y https://www.youtube.com/user/v518v https://plus.google.com/+v518v

تابعنا على :

f tw +G yt vk

KHALED ALMILBE




مدون ومطور قوالب بلوجر
My E-mail : ###
My Phone No. : #%^$#
My Website : www.k2d.us
مساحة إعلانية متجاوبة

اضافة قائمة جانبية بتقنية 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>
 مثال على الصورة

مشاركة الموضوع

انسخ كود الشكل الذى تريده وضعه فى تعليق
اذا كنت لا تملك حساب على بلوجر قم بإختيار التعليق باسم " مجهول "
تعليقات بلوجر
تعليقات الفيس بوك

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

إرسال تعليق

مساحة إعلانية متجاوبة

مواضيع مميزة

إحصائيات المدونة

  • عدد المواضيع :

  • عدد التعليقات :

  • عدد المشاهدات :

المتابعون

اشترك ليصلك كل جديد

  • الإشعارات
  • من نحن

  • اتصل بنا

  • ×

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

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

ادخل الرسالة (مطلوب)