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


منتدى
 
الرئيسيةالبوابةاليوميةس .و .جبحـثالأعضاءالمجموعاتالتسجيلدخولالناف بار الملون الرائع Oaau10الناف بار الملون الرائع Ouo10الناف بار الملون الرائع O10الناف بار الملون الرائع 11الناف بار الملون الرائع Ood10الناف بار الملون الرائع Od_ou10الناف بار الملون الرائع Eo_o10

إرسال موضوع جديد   إرسال مساهمة في موضوع
شاطر
 

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

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

avatar

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

الناف بار الملون الرائع Empty
مُساهمةموضوع: الناف بار الملون الرائع   الناف بار الملون الرائع Emptyالثلاثاء ديسمبر 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

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