EnglishFrenchGermanSpainItalianDutchRussianPortugueseArabic

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

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

قائمة منسدلة بتقنية 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="http://4.bp.blogspot.com/-GGjGk0ZWPvE/UvqfGxbrerI/AAAAAAAAEMo/0qW0sCOF4hw/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>
لان تكرار هذا الكود يؤثر على العديد من الإضافات
ثم يمكنك تغيير هذه الصورة

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

بصورة أخرى من تصميمك
هذا كل شيئ أتمنى ان تعجبكم الإضافة 
بالتوفيق للجميع ودمتم في رعاية الله وحفظه

ليست هناك تعليقات:

إرسال تعليق

التالي السابق الرئيسية