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

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

معاينة  من : هـنـا

طريقة التركيب 

• لوحة التحكم
• القالب
• تحرير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 -->

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

Share This

clear