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

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

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

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

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

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

الكاتب ياسر | المصرى

رَدد دَائِمَا "سبْحَانَك مَا أَحْلَمَك،، وْبِحَالِي مَا أَعْلَمَك،، وَعَلَى تَفْرِيْج هَمِّي مَا أُقَدَّرْك،، أنْت ثِقَتِي وَرَجَائِي،، فَاجْعَل حُسْن ظَنّي فِيْك جَزَائِي " سُبْحَان الْلَّه وَبِحَمْدِه سُبْحَان الْلَّه الْعَظِيْم

الكاتب ياسر | المصرى

مقالات قد تهمك