1. أهلا وسهلاً بكم في :: IQ-TeaM FORUM :: .
    إذا كانت هذه الزيارة الأولى أو لديك الرغبة بالانضمام لأعضاء شبكة عراق تيم فيجب الاطلاع على خصوصية الشبكه فربما بقائك زائر افضل لك من الانضمام بحيث أن قوانين شبكة عراق تيم لا تتناسب مع اهتماماتك .
    • للأطلاع على الخصوصية وسياسة الاستخدام - التفاصيل
    • بعد الاطلاع على سياسة الموقع وقوانين شبكة عراق تيم يمكنك التسجيل معنا - تسجيل عضو جديد
    إستبعاد الملاحظة
  2. الملاحظات
    عزيزي زائر تم اطلاق الموقع الرسمي لبرنامج الاختراق Spy-Note
    إستبعاد الملاحظة
حالة الموضوع:
مغلق
  1. عمرو عبد العزيز
    rank
    Developer

    عضو منذ:
    ‏8 نوفمبر 2011
    عدد المشاركات:
    5
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    5
    الإقامة:
    WebDesigner
    السلام عليكم ورحمة الله وبركاته

    اليوم درسنا حصري لمنتديات عراق تيم

    Animated Navigation
    CSS+Jquery


    عمل تحريك لقائمه بإستخدام الجكوارى

    [​IMG]
    Demo
    -----------------
    تحميل ملفات الدرس الجكوارى والصوره والاندكس كامل الملفات
    Download
    --------------------------------------------
    Tutorail on Youtube
    الدرس الاول : Link
    الدرس الثانى : Link
    ------------------

    لو فى موسيقى فأعذرونى صوت التلفاز والشارع &:" المايك بتاعى بيلقط موت )3:"
    -----------------------------------------------
    الدرس كتابى
    HTML
    كود PHP:

                                   
    <div id="navigation">
            <
    ul id="nav">
            <
    li><a href="#">Home</a></li>
            <
    li><a href="#">Services</a></li>
            <
    li><a href="#">Portfolio</a></li>
            <
    li><a href="#">Blog</a></li>
            <
    li><a href="#">About</a></li>
            <
    li><a href="#">Contact</a></li>
            </
    ul>
     </
    div><!-- [ #navigation ] -->  
    -----------------
    CSS
    #
    كود PHP:

                               navigation 
    height:40pxwidth:555pxmargin:automargin-top:25px; }
        
    ul#nav { margin:0; padding:0; list-style-type:none; font-size:0.8em; }
        
    ul#nav li { margin:0; padding:0; overflow:hidden; float:left; height:40px; }
        
    ul#nav a, ul#nav span { padding:0 20px; float:left; text-decoration:none; color:#fff; background:url(a_bg.gif) repeat-x; text-transform:uppercase; clear:both; height:40px; line-height:40px; }
        
    ul#nav a { color: #555; background-position: left bottom; }
        
    ul#nav span { background-position: left top; }  
    ---------------------
    JQuery in Head tag
    <
    كود PHP:

    script type
    ="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
        $("#nav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag
        $("#nav li").each(function() { //For each list item...
          var linkText = $(this).find("a").html(); //Find the text inside of the <a> tag
          $(this).find("span").show().html(linkText); //Add the text in the <span> tag
        }); 
        $("#nav li").hover(function() {    //On hover...
            $(this).find("span").stop().animate({
                marginTop: "-40" //Find the <span> tag and move it up 40 pixels
            }, 250);
        } , function() { //On hover out...
            $(this).find("span").stop().animate({
                marginTop: "0"  //Move the <span> back to its original state (0px)
            }, 250);
        });
    });
    </script>  
    أتمنى الدرس يعجبكم
    تم عمل الدرس بواسطتى عمرو عبد العزيز
     
    جاري تحميل الصفحة...
  2. Dr.MOT Support Iq-Team
    إدارة الموقع

    عضو منذ:
    ‏2 سبتمبر 2011
    عدد المشاركات:
    702
    الإعجابات المتلقاة:
    5,541
    نقاط الجائزة:
    226
    الجنس:
    ذكر
    الوظيفة:
    طالب
    الإقامة:
    IraQ
    نظام التشغيل:
    windows 8.1
    اللغة البرمجية:
    CSS
    Facebook:
    YouTube:
    رد: حصريآ تصميم قائمه مع تأثير جكوارى مذهل CSS+Jquery

    وعليكم السلام ورحمة الله وبركاته
    الله يعطيك العافيه يابطل
    جاري المشاهده والعوده بأذن الله
    )5:")5:")5:"
     
  3. Hacker Time
    rank
    Developer

    عضو منذ:
    ‏11 سبتمبر 2011
    عدد المشاركات:
    42
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    20
    الإقامة:
    اللهم إني أسلك الرحمة
    رد: حصريآ تصميم قائمه مع تأثير جكوارى مذهل CSS+Jquery

    آقسم انت كفو !:"
     
  4. Microsoft
    V • I • P

    عضو منذ:
    ‏26 أكتوبر 2011
    عدد المشاركات:
    164
    الإعجابات المتلقاة:
    2
    نقاط الجائزة:
    50
    الإقامة:
    home
    اللغة البرمجية:
    Ruby
    رد: حصريآ تصميم قائمه مع تأثير جكوارى مذهل CSS+Jquery

    يسلموووو يابطل &:"
     
  5. SAMEH
    rankrank
    V • I • P

    عضو منذ:
    ‏24 سبتمبر 2011
    عدد المشاركات:
    53
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    20
    الإقامة:
    ♥IǾ-T34M♥
    رد: حصريآ تصميم قائمه مع تأثير جكوارى مذهل CSS+Jquery

    تسلم يمينك يابطل ^:"
     
  6. ايمن
    rank
    Developer

    عضو منذ:
    ‏5 نوفمبر 2011
    عدد المشاركات:
    19
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    5
    رد: حصريآ تصميم قائمه مع تأثير جكوارى مذهل CSS+Jquery

    السلام عليكم ورحمه الله وبركاته
    مشكور علي المجهود الكبير دا ياغالي
    *:"
     
حالة الموضوع:
مغلق

مشاركة هذه الصفحة

جاري تحميل الصفحة...