قائمة منسدلة بتقنية jquery مميزة

إخواني الكرام كيف حالكم. في هذا الموضوع سأقدم لكم قائمة منسدلة بتقنية jquery مميزة وجميلة

يمكنك إستعمالها لعرض أقسام المدونة أو صفحات المدونة أو روابط دعائية حسب رغبتك

صورة من القائمة

بعد الضغط على القائمة

قبل الضغط على القائمة

القائمة رائعة وكما قلت في البداية يمكنك إستعمالها لأغراض كثيرة وأيضا يمكنك وضعها في أي مكان تريد

حان الآن وقت شرح تركيب الإضافة  في مدونتك

أولا إبحث عن الوسم ]]></b:skin>

ثم فوقه ضع هذا الكود

.menu_ndhas {
  display:block;
  border:1px solid #998675;
  margin:0;
  padding:0;
}
.menu_awak {
  width:184px;
  border-right:1px solid #998675;
  border-bottom:1px solid #998675;
  border-left:1px solid #998675;
  margin:0;
  padding:0;
  display:none;
}
.menu_awak li {background-color:#493e3b}
.menu_awak li.alt {background-color:#362f2d}
.menu_awak li a {
  display:block;
  color:white;
  text-decoration:none;
  padding:10px;
}
.menu_awak li a:hover {
  padding:15px 10px;
  font-weight:bold;
}

ثم بعد ذالك إبحث عن الوسم </head>

ثم فوقه ضع هذا الكود

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function () {
    $("ul.menu_awak li:even").addClass("alt");
    $('.menu_ndhas').click(function() {
        $('ul.menu_awak').slideToggle();
    });
    $('ul.menu_awak li a').mouseover(function() {
        $(this).animate({
            fontSize: "14px",
            paddingLeft: "20px"
        }, 50);
    });
    $('ul.menu_awak li a').mouseout(function() {
        $(this).animate({
            fontSize: "12px",
            paddingLeft: "10px"
        }, 50);
    });
});
</script>

واخيرا إنسخ الكود التالي

<img class="menu_ndhas" width="184" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeEiNHUo1ydfHHJOxoD658U0skxQWS7WOUw6X6gN1yvqRiRmwHEULB0jtaoCeSYfNMCcAqgyG1I6FmsWf_6SgMCdl7QDejBAJcmoNwL7JJuzJU05c_WjEhnba-_5HUNNmKJwUmFiHhjbo/s1600/navigate.png"/>
<ul class="menu_awak">
  <li><a href="#">عين العرب</a></li>
  <li><a href="#">عين العرب</a></li>
  <li><a href="#">عين العرب</a></li>
  <li><a href="#">عين العرب</a></li>
  <li><a href="#">عين العرب</a></li>
</ul>

ثم ضعه في إضافة جديدة وتكون قد إنتهيت

أو يمكنك وضعها داخل القالب في المكان الذي تراه مناسبا

ملاحظة: إدا رأيت أن الإضافة لم تعمل معك قم بحذف هذا الكود

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

من الكود الذي وضعته فوق وسم  </head>

لان تكرار هذا الكود يؤثر على العديد من الإضافات

ثم يمكنك تغيير هذه الصورة

 

بصورة أخرى من تصميمك

هذا كل شيئ أتمنى ان تعجبكم الإضافة 

بالتوفيق للجميع ودمتم في رعاية الله وحفظه