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

هناك أنواع مختلفة من القوائم  (القائمة الافقية ، القائمة منسدلة، القائمة العائمة المنسدلة ......الخ) هي متاحة للاستخدام في المدونات  ولكن في هذه التدوينة سوف نناقش نوع من اهم القوائم والمعروفة باسم قائمة الأكورديون. و هي القائمة المدمجة والتي هي قادرة على تخزين كمية كبيرة من الروابط . ويستند الشكل العام للقائمة الأكورديون بنقرة واحدة لتصبح منسدلة 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
قم بتغيير # برابط القسم الذي تريده مع تغيير الاسم بجانبه

بالتوفيق

6/12/2014

مواضيع ذات صلة

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

4 / 5

بواسطة مدون محترف

مدون محترف 6/12/2014 5 تعليقات