السلام عليكم ورحمة الله وبركاته
سوف نتطرق إلى طريقة إضافة قائمة عامودية منسدلة بألوان مختلفة ، بناء على طلب الأخواة والأخوات .
- طريقة التركيب :
1- أدخل إلى مدونتك | ثم أختر تحرير قالب .
2- إبحث عن الوسم : <head>
3- ضع الكود التالي فوقه :
4- إحفظ القالب .<script src='http://code.jquery.com/jquery-1.10.2.min.js' type='text/javascript'/>
5- إذهب إلى تخطيط ثم أختر إضافة أداة : HTML/JavaScript
6- اللصق الكود التالي في صندوق الأداة ثم إحفظ .
<div id="accordion"><ul><li><h3>قائمة 1</h3>
<ul><li><a href="ضع هنا رابط مدونتك">تعديل 1</a></li>
<li><a href="ضع هنا رابط مدونتك">تعديل 2</a></li>
<li><a href="ضع هنا رابط مدونتك">تعديل 3</a></li></ul></li>
<li><h3>قائمة 2</h3>
<ul><li><a href="ضع هنا رابط مدونتك">تعديل 4</a></li>
<li><a href="ضع هنا رابط مدونتك">تعديل 5</a></li>
<li><a href="ضع هنا رابط مدونتك">تعديل 6</a></li></ul></li>
<li><h3>Main Heading 3</h3>
<ul><li><a href="ضع هنا رابط مدونتك">تعديل 7</a></li>
<li><a href="ضع هنا رابط مدونتك">تعديل 8</a></li>
<li><a href="ضع هنا رابط مدونتك">تعديل 9</a></li></ul></li>
<li><h3>Main Heading 4</h3>
<ul><li><a href="ضع هنا رابط مدونتك">تعديل 10</a></li>
<li><a href="ضع هنا رابط مدونتك">تعديل 11</a></li>
<li><a href="ضع هنا رابط مدونتك">تعديل 12</a></li></ul></li></ul></div>
<style type="text/css">#accordion {margin: 0;padding:0; border-top: 1px solid #fff; border-right: 1px solid #fff; border-left: 1px solid #fff; width: 250px;} #accordion h3 {font: 15px Arial; padding: 9px; color:#fff; cursor: pointer; background:#FF0080 ; border-bottom:1px solid #fff;} #accordion li {list-style-type: none; padding:0; margin:0; background-color:#f4f4f4;} #accordion ul ul li a {border-bottom:1px solid #ddd; border-right:1px solid #ddd; border-left:1px solid #ddd; color: #3b3b3b; text-decoration: none; font: 12px Verdana; display: block; padding:8px 8px 8px 0;} #accordion ul ul li a:hover {padding-right:15px; background-image:url(http://4.bp.blogspot.com/-jxfJ5gu2Awo/VEnYYEWxE2I/AAAAAAAAHZ8/B_mVrXyBmN4/s1600/pink.png); background-position:right; background-repeat:no-repeat;} #accordion ul ul {display: none;} #accordion li.active ul {display: block;} #accordion ul{list-style:none; margin:0; padding:0;}</style>
<script>$(document).ready(function() { $("#accordion h3").click(function(){$("#accordion ul ul").slideUp(); if(!$(this).next().is(":visible")) {$(this).next().slideDown();}})})</script>
- لتغير خلفية القائمة غير كود اللون التالي : #FF0080
0 Comments:
إرسال تعليق