العراق اونلاين
نرحب
بكل من يزور
منتدانا



 
الرئيسيةالبوابةاليوميةمكتبة الصورس .و .جبحـثالأعضاءالمجموعاتالتسجيلدخول╣☼╠00%mybblogoكيويروابط ماوس
منتدبات سحر العيون
۞منور المنتدى۞ إسم المستخدم: زائر آخر زيارة لك كانت: أخر عضو مسجل: ameeraljn مواضيعى : ردودى
الرئيسية القوانين المجموعات مجلة المنتدي المشاركات الجديدة البحث التسجيل تسجيل الخروج

شاطر | 
 

  التافبار المتحرك الرائع بتقنية الجاكورى

اذهب الى الأسفل 
كاتب الموضوعرسالة
سحر العيون
Admin
Admin
avatar

عدد المساهمات : 341
تاريخ التسجيل : 05/01/2013

مُساهمةموضوع: التافبار المتحرك الرائع بتقنية الجاكورى   الخميس ديسمبر 11, 2014 5:56 pm

لمشاهدة النافبار


http://im39.gulfup.com/fFbiK.jpg


كود هوتميل يوضع فى التشكيلات العامة
الكود:
<div id="content">
    <div id="home" class="text">
        <!-- Write your content here -->
    </div>
    <div id="about" class="text" style="display:none;">
        <!-- Write your content here -->
    </div>
    <!-- Other content items -->
</div>
<ul id="navigation">
<li class="current"><a href="http://www.topactis.com/f41-montada">ماوسات</a></li>
   
<li class="current"><a href="http://akwad.lolbb.com/">اكواد مميزة</a></li>
<li class="current"><a href="http://www.mms44.com/">معرض وسائط</a></li>
<li class="current"><a href="http://www.dubaieyes.net/gallery/">معرض صور</a></li>
<li class="current"><a href="http://www.topactis.com/f39-montada/">الآسمايلات</a></li>
<li class="current"><a href="http://www.resize2mail.com/index.php/">تصغير صور</a></li>
<li class="current"><a href="http://www.gulfup.com//">مركز تحميل</a></li>
<li class="current"><a href="xxxxxxxxxx//">الرئيسية</a></li>
</ul>



ضع رابط منتداك مكان xxxxxx فى الكود


كود يوضع فى ورقة css

الكود:
    #content{
        width:824px;
        height:600px;
        margin:-200px auto 0px auto;
        background:transparent url() no-repeat bottom left;
    }
    #content h1{
        color:#7F6137;
        text-shadow:1px 1px 1px #fff;
    }
    #content p{
        margin:20px;
        width:600px;
    }
    #content .text{
        padding:300px 0px 0px 100px;
    }
    ul#navigation {
        position: fixed;
        margin: 0px;
        padding: 0px;
        top: 0px;
        right: 200px;
        list-style: none;
        z-index: 999;
    }
    ul#navigation li {
        display:inline;
        float:left;
        width:100px;
        margin-left:1px;
    }
    ul#navigation li a {
        display: block;
        font-weight: bold;
        text-shadow: 1px 1px 1px #fff;
        float: left;
        width: 100px;
        height: 35px;
        color: #603d05;
        background: transparent url(http://tympanus.net/Tutorials/GrungyRandomSlideOut/item.png) no-repeat bottom right;
        text-decoration:none;
        text-align: center;
        padding-top: 80px;
        margin-top: -40px;
        cursor: pointer;
    }




كود يوضع فى ادارة اكواد JAVASCRIPT فى العناصر الاضافية بعد تفعيل نظام ادارة الكود


الكود:
$(function() {
    var d=300;
    $('#navigation a').each(function(){
        var $this = $(this);
        var r=Math.floor(Math.random()*41)-20;
        $this.css({
            '-moz-transform':'rotate('+r+'deg)',
            '-webkit-transform':'rotate('+r+'deg)',
            'transform':'rotate('+r+'deg)'
            });
        $('#content').css({
            '-moz-transform':'rotate('+r+'deg)',
            '-webkit-transform':'rotate('+r+'deg)',
            'transform':'rotate('+r+'deg)'
            });
        $this.stop().animate({
            'marginTop':'-70px'
        },d+=150);
    });
    $('#navigation > li').hover(
        function () {
            var $this = $(this);
            $('a',$this).stop().animate({
                'marginTop':'-40px'
            },200);
        },
        function () {
            var $this = $(this);
            $('a',$this).stop().animate({
                'marginTop':'-70px'
            },200);
        }
    ).click(function(){
        var $this = $(this);
        var name = this.className;
        $('#content').animate({marginTop:-600}, 300,function(){
            var $this = $(this);
            var r=Math.floor(Math.random()*41)-20;
            $this.css({
                '-moz-transform':'rotate('+r+'deg)',
                '-webkit-transform':'rotate('+r+'deg)',
                'transform':'rotate('+r+'deg)'
                });
            $('#content div').hide();
            $('#'+name).show();
            $this.animate({marginTop:-200}, 300);
        })
    });
});
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://iraqaonlaen.0wn0.com
 
التافبار المتحرك الرائع بتقنية الجاكورى
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

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