منتديات احفاد الرسول
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.

منتديات احفاد الرسول

بسم الله الرحمن الرحيم قُلْ هُوَ اللَّهُ أَحَدٌ اللَّهُ الصَّمَدُ لَمْ يَلِدْ وَلَمْ يُولَدْ وَلَمْ يَكُن لَّهُ كُفُوًا أَحَدٌ
 
الرئيسيةأحدث الصورالتسجيلدخولتفسير القران الكريم قراءة القران الكريماذاعات القران الكريمكتبقنواتقصص رائعة منتديات الياس عيساوي بث قناة الجزيرةاوقات الصلاةاستماع للقراءن الكريم
دليل سلطان للمواقع الإسلامية

 

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

اذهب الى الأسفل 
كاتب الموضوعرسالة
eliasissaoui
Admin
eliasissaoui


ذكر عدد المساهمات : 16999
تاريخ التسجيل : 04/07/2013
الموقع : https://www.youtube.com/watch?v=QriWAmC6_40

قائمة منسدلة بتقنية jquery مميزة Empty
مُساهمةموضوع: قائمة منسدلة بتقنية jquery مميزة   قائمة منسدلة بتقنية jquery مميزة I_icon_minitimeالأربعاء فبراير 12, 2014 1:36 am

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

قائمة منسدلة بتقنية jquery مميزة 11-02-2014+22-11-15
بعد الضغط على القائمة

قائمة منسدلة بتقنية jquery مميزة Navigate
قبل الضغط على القائمة

القائمة رائعة وكما قلت في البداية يمكنك إستعمالها لأغراض كثيرة وأيضا يمكنك وضعها في أي مكان تريد
حان الآن وقت شرح تركيب الإضافة  في مدونتك
أولا إبحث عن الوسم 
الكود:
]]></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 مميزة SRfMZDWwMcE?utm_source=feedburner&utm_medium=email

الرجوع الى أعلى الصفحة اذهب الى الأسفل
https://info-noor-islam.ahlamontada.com
 
قائمة منسدلة بتقنية jquery مميزة
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
 مواضيع مماثلة
-
» أعرض قناة اليوتيوب كاملة على موقعك بتقنية jQuery
» قائمة علوية مميزة لمدونتك CSS3 dropdown menu
» درس الفيزياء: مميزة المولد – مميزة المستقبل – نقطة الإشتغال – جذع مشترك علمي – تكنولوجي
» كيف تصمم قوائم منسدلة لموقعك
» حل نظمة بثلاث مجاهيل بتقنية المصفوفات Matrices

صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
منتديات احفاد الرسول :: منتدى التعليم لكافة المراحل الدراسية :: التعليم الثانوي-
انتقل الى:  
تعليقات فيسبوك

تابعنا على فيسبوك
قائمة منسدلة بتقنية jquery مميزة Flags_1
online
تويتر طائر


هذه الرسالة تفيد أنك غير مسجل .

و يسعدنا كثيرا انضمامك لنا ...

للتسجيل اضغط هـنـا