حالة الموضوع:
مغلق
  1. :: dev-vb ::

    :: dev-vb :: Developer

    الأنتساب:
    ‏7 مارس 2012
    المشاركات:
    21
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    1
    بسم االله الرحمن الرحيم
    [​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

    boubisad Developer

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

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

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