حالة الموضوع:
مغلق
  1. عمرو عبد العزيز

    عمرو عبد العزيز Developer

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

    Dr.MOT Support - Iq-Team

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

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

    Hacker Time Developer

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

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

    Microsoft V • I • P

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

    يسلموووو يابطل &:"
     
  5. SAMEH

    SAMEH V • I • P

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

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

    ايمن Developer

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

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

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