حلولي 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

اضافة قائمة منسدلة بشكل جميل

حلولي

مشرف

المزيد

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

تم النشر فى قسم

تم النشر منذ

تحميل ...
اضافة قائمة منسدلة بشكل جميل

اضافة قائمة منسدلة بشكل جميل

معاينة  من : هـنـا
طريقة التركيب 
  • لوحة التحكم
  • القالب
  • تحريرHTML
  • ابحث عن ]]></b:skin>
  • اضف الكود التالي فوقة 
.cd-accordion-menu {  width: 90%;  max-width: 600px;  background: #4d5158;  margin: 4em auto;}.cd-accordion-menu ul {  /* by default hide all sub menus */  display: none;}.cd-accordion-menu li {  -webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none;}.cd-accordion-menu input[type=checkbox] {  /* hide native checkbox */  position: absolute;  opacity: 0;}.cd-accordion-menu label, .cd-accordion-menu a {  position: relative;  display: block;  padding: 18px 18px 18px 64px;  background: #4d5158;  box-shadow: inset 0 -1px #555960;  color: #ffffff;  font-size: 1.6rem;}.no-touch .cd-accordion-menu label:hover, .no-touch .cd-accordion-menu a:hover {  background: #52565d;}.cd-accordion-menu label::before, .cd-accordion-menu label::after, .cd-accordion-menu a::after {  /* icons */  content: '';  display: inline-block;  width: 16px;  height: 16px;  position: absolute;  top: 50%;  -webkit-transform: translateY(-50%);  -moz-transform: translateY(-50%);  -ms-transform: translateY(-50%);  -o-transform: translateY(-50%);  transform: translateY(-50%);}.cd-accordion-menu label {  cursor: pointer;}.cd-accordion-menu label::before, .cd-accordion-menu label::after {  background-image: url(http://mybloggerlab.com/Images/cd-icons.svg);  background-repeat: no-repeat;}.cd-accordion-menu label::before {  /* arrow icon */  left: 18px;  background-position: 0 0;  -webkit-transform: translateY(-50%) rotate(-90deg);  -moz-transform: translateY(-50%) rotate(-90deg);  -ms-transform: translateY(-50%) rotate(-90deg);  -o-transform: translateY(-50%) rotate(-90deg);  transform: translateY(-50%) rotate(-90deg);}.cd-accordion-menu label::after {  /* folder icons */  left: 41px;  background-position: -16px 0;}.cd-accordion-menu a::after {  /* image icon */  left: 36px;  background: url(http://mybloggerlab.com/Images/cd-icons.svg) no-repeat -48px 0;}.cd-accordion-menu input[type=checkbox]:checked + label::before {  /* rotate arrow */  -webkit-transform: translateY(-50%);  -moz-transform: translateY(-50%);  -ms-transform: translateY(-50%);  -o-transform: translateY(-50%);  transform: translateY(-50%);}.cd-accordion-menu input[type=checkbox]:checked + label::after {  /* show open folder icon if item is checked */  background-position: -32px 0;}.cd-accordion-menu input[type=checkbox]:checked + label + ul,.cd-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul {  /* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/  /* show children when item is checked */  display: block;}.cd-accordion-menu ul label,.cd-accordion-menu ul a {  background: #35383d;  box-shadow: inset 0 -1px #41444a;  padding-left: 82px;}.no-touch .cd-accordion-menu ul label:hover, .no-touch.cd-accordion-menu ul a:hover {  background: #3c3f45;}.cd-accordion-menu > li:last-of-type > label,.cd-accordion-menu > li:last-of-type > a,.cd-accordion-menu > li > ul > li:last-of-type label,.cd-accordion-menu > li > ul > li:last-of-type a {  box-shadow: none;}.cd-accordion-menu ul label::before {  left: 36px;}.cd-accordion-menu ul label::after,.cd-accordion-menu ul a::after {  left: 59px;}.cd-accordion-menu ul ul label,.cd-accordion-menu ul ul a {  padding-left: 100px;}.cd-accordion-menu ul ul label::before {  left: 54px;}.cd-accordion-menu ul ul label::after,.cd-accordion-menu ul ul a::after {  left: 77px;}.cd-accordion-menu ul ul ul label,.cd-accordion-menu ul ul ul a {  padding-left: 118px;}.cd-accordion-menu ul ul ul label::before {  left: 72px;}.cd-accordion-menu ul ul ul label::after,.cd-accordion-menu ul ul ul a::after {  left: 95px;}.cd-accordion-menu.animated label::before {  /* this class is used if you're using jquery to animate the accordion */  -webkit-transition: -webkit-transform 0.3s;  -moz-transition: -moz-transform 0.3s;  transition: transform 0.3s;}
  • ثم اذهب للتخطيط 
  • اضافة اداة
  • HTML/JavaScript
  • اضف الكود التالي
  • غير مايلزم
<ul class="cd-accordion-menu"><li class="has-children"><input type="checkbox" name="group-1" id="group-1" checked /><label for="group-1">اقسام</label>
 <ul> <li class="has-children"> <input type="checkbox" name="sub-group-1" id="sub-group-1" /><label for="sub-group-1">اقسام</label>
<ul><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></ul></li>
<li><a href="#">قسم</a></li><li><a href="#">قسم</a></li></ul> <!-- cd-accordion-menu -->

ان افدتك اترك تعليق بالاسفل اي استفسار لاتتردد بالكتابة اسفل

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

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

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

إرسال تعليق

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

مواضيع مميزة

التعليقات

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

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

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

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

المتابعون

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

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

  • اتصل بنا

  • ×

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

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

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