اخر اخبار العراق


منتدى
 
الرئيسيةالبوابةاليوميةس .و .جبحـثالأعضاءالمجموعاتالتسجيلدخول

شاطر | 
 

 الناف بار الملون الرائع

اذهب الى الأسفل 
كاتب الموضوعرسالة
احساس خالد



عدد المساهمات : 110
نقاط : 199
السٌّمعَة : 0
تاريخ التسجيل : 09/08/2013

مُساهمةموضوع: الناف بار الملون الرائع   الثلاثاء ديسمبر 09, 2014 12:46 pm

مُساهمةموضوع: النافبار الملون الرائع الأربعاء مايو 29, 2013 11:06 pm
لمشاهدة النافبار

http://im42.gulfup.com/gu8Gm.jpg

كود يوضع فى التشكيلات العامة

الرمز:

الكود:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
        <title>CSS3 drop down menu #3</title>
    </head>
    <body><div class="example">
        <div class="menuholder">
            <ul class="menu slide">
                <li><a href="xxxxxxxxxx" class="red">الرئيسية</a></li>
    <li><a href="http://bb.qwled.com/" class="violet">برامج الجوال</a></li>
             
                <li><a href="http://ma3lwma.blogspot.com/" class="yellow">حقائق وغرائب</a>
                  </li>
    <li><a href=http://www.mp3quran.net/ class="red">القران الكريم</a></li>
       
                <li><a href="http://www.gulfup.com/" class="violet">مركز تحميل</a></li>
    <li><a href="http://cook12.blogspot.com/" class="yellow">موسوعة الطبخ</a></li>
    <li><a href="http://m3loma.com/new/she3r/index.php" class="red">موسوعة الشعر العربى</a></li>
    <li><a href="http://fashion.azyya.com/" class="violet">موضة وأزياء</a></li>


            </ul>
            <div class=""></div>
            <div class="shadow"></div>
        </div>
        <div style="clear:both"></div>
    </div>
    </body>
    </html>



غير xxxxxxxxxx فى الكود الى رابط منتداك

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

الرمز:


الكود:
    /* main menu styles */
    .menuholder {
        float:left;
        font:normal bold 13px/35px verdana, sans-serif;
        overflow:hidden;
        position:relative;
    }
    .menuholder .shadow {
        -moz-box-shadow:0 0 20px rgba(0, 0, 0, 1);
        -o-box-shadow:0 0 20px rgba(0, 0, 0, 1);
        -webkit-box-shadow:0 0 20px rgba(0, 0, 0, 1);
        background:#888;
        box-shadow:0 0 20px rgba(0, 0, 0, 1);
        height:10px;
        left:5%;
        position:absolute;
        top:-9px;
        width:90%;
        z-index:100;
    }
    .menuholder .back {
        -moz-transition-duration:.4s;
        -o-transition-duration:.4s;
        -webkit-transition-duration:.4s;
        background-color:rgba(0, 0, 0, 0.5);
        height:0;
        width:100%;
    }
    .menuholder:hover div.back {
        height:250px;
    }
    ul.menu {
        display:block;
        float:left;
        list-style:none;
        margin:0;
        padding:0 125px;
        position:relative;
    }
    ul.menu li {
        float:left;
        margin:0 5px 0 0;
    }
    ul.menu li > a {
        -moz-border-radius:0 0 10px 10px;
        -moz-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
        -moz-transition:all 0.2s ease-in-out;
        -o-border-radius:0 0 10px 10px;
        -o-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
        -o-transition:all 0.2s ease-in-out;
        -webkit-border-bottom-left-radius:10px;
        -webkit-border-bottom-right-radius:10px;
        -webkit-box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
        -webkit-transition:all 0.2s ease-in-out;
        border-radius:0 0 10px 10px;
        box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
        color:#eee;
        display:block;
        padding:0 10px;
        text-decoration:none;
        transition:all 0.2s ease-in-out;
    }
    ul.menu li a.red {
        background:#a00;
    }
    ul.menu li a.orange {
        background:#da0;
    }
    ul.menu li a.yellow {
        background:#aa0;
    }
    ul.menu li a.green {
        background:#060;
    }
    ul.menu li a.blue {
        background:#00a;
    }
    ul.menu li a.violet {
        background:#682bc2;
    }
    .menu li div.subs {
        left:0;
        overflow:hidden;
        position:absolute;
        top:35px;
        width:0;
    }
    .menu li div.subs dl {
        -moz-transition-duration:.2s;
        -o-transition-duration:.2s;
        -webkit-transition-duration:.2s;
        float:left;
        margin:0 130px 0 0;
        overflow:hidden;
        padding:40px 0 5% 2%;
        width:0;
    }
    .menu dt {
        color:#fc0;
        font-family:arial, sans-serif;
        font-size:14px;
        font-weight:700;
        height:20px;
        line-height:20px;
        margin:0;
        padding:0 0 0 10px;
        white-space:nowrap;
    }
    .menu dd {
        margin:0;
        padding:0;
        text-align:left;
    }
    .menu dd a {
        background:transparent;
        color:#fff;
        font-size:14px;
        height:20px;
        line-height:20px;
        padding:0 0 0 10px;
        text-align:left;
        white-space:nowrap;
        width:80px;
    }
    .menu dd a:hover {
        color:#fc0;
    }
    .menu li:hover div.subs dl {
        -moz-transition-delay:0.2s;
        -o-transition-delay:0.2s;
        -webkit-transition-delay:0.2s;
        margin-right:2%;
        width:21%;
    }
    ul.menu li:hover > a,ul.menu li > a:hover {
        background:#aaa;
        color:#fff;
        padding:10px 10px 0;
    }
    ul.menu li a.red:hover,ul.menu li:hover a.red {
        background:#c00;
    }
    ul.menu li a.orange:hover,ul.menu li:hover a.orange {
        background:#fc0;
    }
    ul.menu li a.yellow:hover,ul.menu li:hover a.yellow {
        background:#cc0;
    }
    ul.menu li a.green:hover,ul.menu li:hover a.green {
        background:#080;
    }
    ul.menu li a.blue:hover,ul.menu li:hover a.blue {
        background:#00c;
    }
    ul.menu li a.violet:hover,ul.menu li:hover a.violet {
    background:#8a2be2;
    }
    .menu li:hover div.subs,.menu li a:hover div.subs {
        width:100%;
    }


_________________



ايها الزاائر نورت توقيعي كلمه شكر لنطمئن بان حضرتك/خضرتكي عجبكم الموضوع
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://rsrs.0wn0.com
 
الناف بار الملون الرائع
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

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

..........................................................................................
اطلب تصميمك الان
ستايلات همسات معرض ستايلات انوار التصميم محترفي بلوجر ستايل علاء الفاتك الفهلوي كل ستايلات علاء الفاتك جوليت واحه الاسلام جوليت ورشه محترف نت ستايلات مودي انكسار ديزاين
فوتر اسود

لا يلهيك المنتدى عن صلاه
Loading...

محترفي البلوجر