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

    الأنتساب:
    ‏8 نوفمبر 2011
    المشاركات:
    7
    الإعجابات المتلقاة:
    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 إدارة الموقع

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

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

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

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

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

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

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

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

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

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

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