إضافة قائمة الأكورديون المنسدلة في بلوجر

إضافة قائمة الأكورديون المنسدلة في بلوجر

هناك أنواع مختلفة من القوائم  (القائمة الافقية ، القائمة منسدلة، القائمة العائمة المنسدلة ......الخ) هي متاحة للاستخدام في المدونات  ولكن في هذه التدوينة سوف نناقش نوع من اهم القوائم والمعروفة باسم قائمة الأكورديون. و هي القائمة المدمجة والتي هي قادرة على تخزين كمية كبيرة من الروابط. ويستند الشكل العام للقائمة الأكورديون بنقرة واحدة لتصبح منسدلة menu.In في هذه التدوينة سوف نتحدث حول إضافة قائمة الأكورديون الرائعة إلى المدونة الخاصة بك . يتم إنشاء هذه القائمة بمساعدة اكواد CSS و HTML. فمن السهل جدا لدمج هذه القائمة إلى المدونة

معاينة

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

1. انتقل إلى المدونة
2. تخطيط >> إضافة أداة
3. حدد إضافة اداة HTML/JavaScript و إضافة هذا الكود بها

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" >$(document).ready(function(){
        $('li.title a').click(function(e){
            var dropDown = $(this).parent().next();
            $('.downlistie').not(dropDown).slideUp('slow');
            dropDown.slideToggle('slow');
            e.preventDefault();
        })
    });</script>
    <style>
    ul.container{
        width:275px;
        padding:5px;
    }
    li.accoi-menu{
    list-style:none;
        padding:1px;
        width:100%;}

    li.title
    {
    border-radius:5px;
    background:#333333;
    list-style:none;
    padding:5px;
    }
    li.title a{
    color:#ffffff;
        display:block;
     padding:5px;
        font:14px georgia, verdana;
        overflow:hidden;
            position:relative;
        width:100%;
         text-decoration:none;
    }
    .downlistie{
    list-style:none;
        display:none;
        padding-top:5px;
        width:100%;
    }
    .downlistie li{
       list-style:none;
    border-right:1px solid #dcdcdc;
    border-left:1px solid #dcdcdc;
    border-bottom:1px solid #dcdcdc;
    border-radius:5px;
        margin:5px ;
        padding:4px 10px;    
    }

    .downlistie li:hover {
    background:orange;
    }
    .downlistie li a{
    {
    font:14px georgia, verdana;
    text-decoration:none;
    color:#333333;
    }
    .downlistie li a:hover {
    text-decoration:none;
    color:#333333;
    }
    </style>
    <ul class="container">
              <li class="accoi-menu">
                  <ul>
                    <li class="title"><a href="#" >قائمة منسدلة</a></li>            
                    <li class="downlistie">
                        <ul>
        <li><a  href="#" >تعديل</a></li>
        <li><a  href="#">تعديل</a></li>
        <li><a href="#">تعديل</a></li>
                        </ul></li></ul></li>

      
        <li class="accoi-menu">
            
                  <ul>
                    <li class="title"><a href="#" >Wordpress</a></li>

                    <li class="downlistie">
                        <ul>
        <li><a href="#" >Themes</a></li>
        <li><a href="#">Plugins</a></li>
        <li><a href="#">Guides</a></li>                
                     </ul></li></ul></li>  

     <li class="accoi-menu">
                  <ul>
                    <li class="title"><a href="#" >Freebies</a></li>
                    <li class="downlistie">
                        <ul>
        <li><a href="#" >Blogger templates</a></li>
        <li><a href="#">Wordpress Themes</a></li>
        <li><a href="#">Plugins</a></li>
        <li><a href="#">Scripts</a></li>
             </ul></li></ul></li>

     <li class="accoi-menu">
                  <ul>
                    <li class="title"><a href="#" >Services</a></li>
                    <li class="downlistie">
                        <ul>
        <li><a href="#" >Website Design</a></li>
        <li><a href="#">Blogger</a></li>
        <li><a href="#">Wordpress</a></li>
        <li><a href="#">Custom Templates</a></li>                  
                     </ul></li></ul></li>


     <li class="accoi-menu">
              <ul>
                    <li class="title"><a href="#" >About us</a></li>
                      <li class="downlistie">
                        <ul>
        <li><a href="#" >About us</a></li>
        <li><a href="#">Contact us</a></li>
         <li><a href="#">Disclaimer</a></li>
        <li><a href="#">Privacy policy</a></li>
                  </ul></li></ul></li>

        </ul>

اهم الاعدادات

لتغيير لون خلفية القائمة قم بتغيير #333333  باستخدام اكواد الالوان
لتغيير اللون الاصفر عند مرور الماوس قم بتغيير كلمة orange
قم بتغيير # برابط القسم الذي تريده مع تغيير الاسم بجانبه

بالتوفيق