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

    الأنتساب:
    ‏7 مارس 2012
    المشاركات:
    21
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    5
    نظام التشغيل:
    Linux
    بسم االله الرحمن الرحيم
    [​IMG]
    الناتج
    -----------------------------------------
    المعاينة المباشرة
    من هنا

    [​IMG][​IMG]

    ---------------------------------------------------
    مميزات القائمة :-

    1. خفيفة في التصفح
    2. تظهر في جميع المتصفحات بنفس الشكل
    3. سهولة التعديل عليها
    4. جمالية الشكل والكثير من المميزات
    --------------------------------------------------
    طريقة التركيب :-​

      1. تحميل الملف من هنا
      2. رفع ملف images الي ملف المنتدي (vb)
      3. رفع ملف js الي ملف المنتدي (vb)
      4. اضافة الاكواد الاتية :
    اضافة الكود التالي في نهاية قالب الهيدر

    كود PHP:
            <ul id="navigation">
                <
    li class="home"><a href="#" title="Home"></a></li>
                <
    li class="about"><a href="#" title="About"></a></li>
                <
    li class="search"><a href="#" title="Search"></a></li>
                <
    li class="photos"><a href="#" title="Photos"></a></li>
                <
    li class="rssfeed"><a href="#" title="Rss Feed"></a></li>
                <
    li class="podcasts"><a href="#" title="Podcasts"></a></li>
                <
    li class="contact"><a href="#" title="Contact"></a></li>
            </
    ul>

    طبعا هنغير الهاش (#) علي حسب روابط منتداك

    ---------------------------------------------------------------

    اضافة الكود التالي في Additional CSS Definitions

    كود PHP:
    #container_buttons{
        
    width400px;
        
    margin0 auto;
        
    backgroundrgba(255,255,255,0.3);
        
    padding60px 60px 30px;
        
    border-radius20px;
        
    box-shadow4px 4px 4px rgba(0,0,0,0.09inset;
    }

    #container_buttons p{
        
    display:block;
        
    padding-bottom:60px;
    }


    ul#navigation {
        
    positionfixed;
        
    margin0px;
        
    padding0px;
        
    top10px;
        
    left0px;
        list-
    stylenone;
        
    z-index:9999;
    }
    ul#navigation li {
        
    width100px;
    }
    ul#navigation li a {
        
    displayblock;
        
    margin-left: -2px;
        
    width100px;
        
    height70px;    
        
    background-color:#CFCFCF;
        
    background-repeat:no-repeat;
        
    background-position:center center;
        
    border:2px solid #AFAFAF;
        
    -moz-border-radius:0px 10px 10px 0px;
        -
    webkit-border-bottom-right-radius10px;
        -
    webkit-border-top-right-radius10px;
        -
    khtml-border-bottom-right-radius10px;
        -
    khtml-border-top-right-radius10px;
        -
    moz-box-shadow0px 4px 3px #000;
        
    -webkit-box-shadow0px 4px 3px #000;

        
    opacity0.6;
        
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
    }
    ul#navigation .home a{
        
    background-imageurl(images/home.png);
    }
    ul#navigation .about a      {
        
    background-imageurl(images/id_card.png);
    }
    ul#navigation .search a      {
        
    background-imageurl(images/search.png);
    }
    ul#navigation .podcasts a      {
        
    background-imageurl(images/ipod.png);
    }
    ul#navigation .rssfeed a   {
        
    background-imageurl(images/rss.png);
    }
    ul#navigation .photos a     {
        
    background-imageurl(images/camera.png);
    }
    ul#navigation .contact a    {
        
    background-imageurl(images/mail.png);
    ---------------------------------------------------------------

    اضافة الكود التالي في نهاية قالب headinclude

    كود PHP:
            <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
            <script type="text/javascript">
                $(function() {
                    $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);

                    $('#navigation > li').hover(
                        function () {
                            $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
                        },
                        function () {
                            $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
                        }
                    );
                });
            </script> 
    اتمني يكون الشرح مفصل وسهل عليكم


     
  2. boubisad Developer

    الأنتساب:
    ‏8 مارس 2012
    المشاركات:
    32
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    20
    الإقامة:
    تونس الخضراء
    رد: قائمة عمودية جانبية شفافة بمييزات خيالية بتقنية Css & JQuery & Java

    يعطيـكك العاآفيـه اخـوٍي
     
حالة الموضوع:
مغلق

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