حالة الموضوع:
مغلق
  1. هوك

    هوك DeveloPer Plus

    الأنتساب:
    ‏17 نوفمبر 2011
    المشاركات:
    110
    الإعجابات المتلقاة:
    4
    نقاط الجائزة:
    18
    الإقامة:
    عـــدن
    بسم الله الرحمن الرحيم
    [​IMG]
    اليوم اقدم لكم أروع نافبار سوف تشاهده ان شاء الله
    وما يتميز هذا النافبار
    ZAnavbar


    • خالية من الأخطاء تماماً
    • مبرمجة بتقنيات Jquery + css3
    • يحتوي على ميزات كبيرة و جميلة جدا
    • يوجد وصف لكل زر مع الصورة


    [​IMG]




    ,,المثال،،



    بالصورة



    [​IMG]


    [​IMG]




    بالمثال الحي
    لا يوجد

    [​IMG]


    ,,الشرح،،


    1. ارفع ملف ZAnavbar الموجود في ملف الصور الى ملف صور منتداك الرئيسي وهي images
    2. ارفع ما بداخل ملفات الجيكوري الى ملف منتداك الرئيسي
    3. ضع هذا الكود في بداية الهيدر
    كود PHP:
    <div id="menu-wrapper">

            <
    ul class="menu">
                <
    li> <a href="#">رابط</a> </li>

                <
    li> <a href="#">رابط</a> </li>
                <
    li> <a href="#">رابط</a> </li>

                <
    li> <a href="#">رابط</a> </li>
            </
    ul>
        </
    div>

        <
    div id="submenu-wrapper">
            <
    ul class="submenu">
                <
    li>
                    <
    a href="#">

                        <
    img src="images/ZAnavbar/9.jpg" />
    هنا تكتب جميل كوصف مثلاً ركن العام من أهم الأركان متنوعة و ترفيهية

                    
    </a>
                </
    li>
                <
    li>
                    <
    a href="#">
                        <
    img src="images/ZAnavbar/10.jpg" />
    هنا تكتب جميل كوصف مثلاً ركن العام من أهم الأركان متنوعة و ترفيهية                </a>

                </
    li>

                <
    li>
                    <
    a href="#">
                        <
    img src="images/ZAnavbar/11.jpg" />
    هنا تكتب جميل كوصف مثلاً ركن العام من أهم الأركان متنوعة و ترفيهية                </a>

                </
    li>
                <
    li>
                    <
    a href="#">
                        <
    img src="images/ZAnavbar/12.jpg" />

    هنا تكتب جميل كوصف مثلاً ركن العام من أهم الأركان متنوعة و ترفيهية                </a>

                </
    li>
            </
    ul>
            <
    ul class="submenu">
                <
    li>
                    <
    a href="#">
                        <
    img src="images/ZAnavbar/13.jpg" />
    هنا تكتب جميل كوصف مثلاً ركن العام من أهم الأركان متنوعة و ترفيهية                </a>

                </
    li>
                <
    li>
                    <
    a href="#">
                        <
    img src="images/ZAnavbar/14.jpg" />
    هنا تكتب جميل كوصف مثلاً ركن العام من أهم الأركان متنوعة و ترفيهية                </a>

                </
    li>
                <
    li>
                    <
    a href="#">

                        <
    img src="images/ZAnavbar/15.jpg" />
    هنا تكتب جميل كوصف مثلاً ركن العام من أهم الأركان متنوعة و ترفيهية                </a>

                </
    li>
                <
    li>
                    <
    a href="#">
                        <
    img src="images/ZAnavbar/16.jpg" />
    هنا تكتب جميل كوصف مثلاً ركن العام من أهم الأركان متنوعة و ترفيهية                </a>

                </
    li>

            </
    ul>
            <
    ul class="submenu">
                <
    li>
                    <
    a href="#">
                        <
    img src="images/ZAnavbar/5.jpg" />
    هنا تكتب جميل كوصف مثلاً ركن العام من أهم الأركان متنوعة و ترفيهية                </a>

                </
    li>
                <
    li>

                    <
    a href="#">
                        <
    img src="images/ZAnavbar/6.jpg" />
    هنا تكتب جميل كوصف مثلاً ركن العام من أهم الأركان متنوعة و ترفيهية                </a>

                </
    li>
                <
    li>
                    <
    a href="#">
                        <
    img src="images/ZAnavbar/7.jpg" />
    هنا تكتب جميل كوصف مثلاً ركن العام من أهم الأركان متنوعة و ترفيهية                </a>

                </
    li>
                <
    li>
                    <
    a href="#">
                        <
    img src="images/ZAnavbar/8.jpg" />
    هنا تكتب جميل كوصف مثلاً ركن العام من أهم الأركان متنوعة و ترفيهية                </a>

                </
    li>
            </
    ul>
            <
    ul class="submenu">

                <
    li>
                    <
    a href="#">
                        <
    img src="images/ZAnavbar/1.jpg" />
    هنا تكتب جميل كوصف مثلاً ركن العام من أهم الأركان متنوعة و ترفيهية                </a>

                </
    li>
                <
    li>
                    <
    a href="#">
                        <
    img src="images/ZAnavbar/2.jpg" />

    هنا تكتب جميل كوصف مثلاً ركن العام من أهم الأركان متنوعة و ترفيهية                </a>

                </
    li>
                <
    li>
                    <
    a href="#">
                        <
    img src="images/ZAnavbar/3.jpg" />
    هنا تكتب جميل كوصف مثلاً ركن العام من أهم الأركان متنوعة و ترفيهية                </a>

                </
    li>
                <
    li>

                    <
    a href="#">
                        <
    img src="images/ZAnavbar/4.jpg" />
    هنا تكتب جميل كوصف مثلاً ركن العام من أهم الأركان متنوعة و ترفيهية                </a>

                </
    li>
            </
    ul>
        </
    div>
            <
    script>!window.jQuery && document.write(unescape('%3Cscript src="jquery-1.7.1.min.js"%3E%3C/script%3E'))</script>
        <script type="text/javascript" src="demo.js"></script>

    وضع هذا الكود في جي اس اس الاضافي لاستايل منتداك


    كود PHP:
    @import url(http://fonts.googleapis.com/css?family=Pontano+Sans|Poiret+One);


        
        #menu-wrapper {
            
    positionrelative;
            
    displayblock;
            
    z-index2;
            
    height60px;
            
    background-image: -webkit-gradient(linearright topright bottomfrom(#535557), to(#333532));
            
    background-image: -webkit-linear-gradient(top#535557, #333532);
            
    background-image:    -moz-linear-gradient(top#535557, #333532); 
           
    background-image:     -ms-linear-gradient(top#535557, #333532); 
           
    background-image:      -o-linear-gradient(top#535557, #333532); 
           
    background-image:         linear-gradient(to bottom#535557, #333532);
            
    font-family"Pontano Sans";
            
    font-size15px;
            
    color#fff;
            
    text-aligncenter;
        }
        
            .
    menu {
                
    displayblock;
                
    margin0 auto;
                
    padding0;
                
    width870px;
                
    text-alignright;
                list-
    style-typenone;
            }
            
                .
    menu li {
                    
    displayinline-block;
                    
    padding16px 10px 25px 10px;
                    
    cursorpointer;
                    -
    webkit-transition0.3s ease-in-out;
                    -
    moz-transition0.3s ease-in-out;
                    -
    ms-transition0.3s ease-in-out;
                    -
    o-transition0.3s ease-in-out;
                    
    transition0.3s ease-in-out;
                }
                    
                .
    menu li:hover, .selected {
                    
    background#212525;
                
    }
            
                    .
    menu a, .menu a:visited {
                        
    color#fff;
                        
    text-decorationnone;
                    }
        
        
    #submenu-wrapper {
            
    positionabsolute;
            
    right0;
            
    right0;
            
    displayblock;
            
    z-index1;
            
    width850px;
            
    height130px;
            
    margin: -12em auto 0;
            
    padding10px 10px;
            
    backgroundrgba(33,37,37,0.9);
            
    font-family"Pontano Sans";
            
    font-size13px;
            -
    webkit-border-bottom-right-radius10px;
            -
    webkit-border-bottom-right-radius10px;
            -
    moz-border-radius-bottomright10px;
            -
    moz-border-radius-bottomright10px;
            
    border-bottom-right-radius10px;
            
    border-bottom-right-radius10px;
            
    box-shadow0px 2px 7px rgba(0,0,0,0.5);
            
    overflowhidden;
        }    
        
            .
    submenu {
                
    displayblock;
                
    margin0 0 1.5em;
                
    padding0;
                list-
    style-typenone;
            }
            
                .
    submenu li {
                    
    displayinline-block;
                    
    width210px;
                    
    vertical-aligntop;
                    
    text-aligncenter;
                }
                    
                    .
    submenu li img {
                        
    displayblock;
                        
    margin0 auto 1em;
                        
    width200px;
                        
    border-radius5px;
                        
    border0;
                    }
                    
                    .
    submenu li a, .submenu li a:visited {
                        
    color#fff;
                        
    text-decorationnone;
                    }

        
    #title {
            
    displayblock;
            
    margin-top4em;
            
    font-family"Poiret One";
            
    font-size45px;
            
    color#fff;
        
    }
            
            
    #title a, #title a:visited {
                
    font-size20px;
                
    text-decorationnone;
                
    color#fff;
            
    }


    [​IMG]


    ,,التحميل،،


    اضغط هنا !:"

    انتهى بحمدلله ..
    اتمنى اني وفقت في شرح التاثير واضافتها
    وأي استفسار أو مشكلة أو اقتراح
    يرجى كتابتها في هذا الموضوع
    [​IMG]

     
  2. NOX

    NOX Developer

    الأنتساب:
    ‏7 ابريل 2012
    المشاركات:
    46
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    6
    الإقامة:
    إألسعؤديـة
    رد: حصريأ علىiq-t34mميز منتداك بأروع نافبار على الاطلاق

    وعليكُـمُ الـسـلأمُ
    اللهُ يعطيكُـ العـأفيةُ
    موضوعً رائعً
    )5:"
     
  3. ђคкคг אאא

    ђคкคг אאא Developer

    الأنتساب:
    ‏16 ديسمبر 2011
    المشاركات:
    79
    الإعجابات المتلقاة:
    2
    نقاط الجائزة:
    8
    الإقامة:
    السعوديه
    رد: حصريأ علىiq-t34mميز منتداك بأروع نافبار على الاطلاق

    جزاك الله ألف خير
     
  4. محترف هكر

    محترف هكر DeveloPer Plus

    الأنتساب:
    ‏2 أغسطس 2012
    المشاركات:
    109
    الإعجابات المتلقاة:
    0
    نقاط الجائزة:
    16
    الإقامة:
    || تونس ~
    رد: حصريأ علىiq-t34mميز منتداك بأروع نافبار على الاطلاق

    آلسلآم عليكم ورحمة آلله وبركآته
    يعطيكَ آلعآفيه عَ آلموضوعَ
    / [​IMG]
     
  5. D 1 r k

    D 1 r k DeveloPer Plus

    الأنتساب:
    ‏9 ابريل 2012
    المشاركات:
    141
    الإعجابات المتلقاة:
    5
    نقاط الجائزة:
    18
    الوظيفة:
    Currently Student
    الإقامة:
    United States
    رد: حصريأ علىiq-t34mميز منتداك بأروع نافبار على الاطلاق

    يعطيك العافية يارب

    لك ودي ..)5:" ​
     
حالة الموضوع:
مغلق

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