العراق اونلاين
نرحب
بكل من يزور
منتدانا



 
الرئيسيةالبوابةاليوميةمكتبة الصورس .و .جبحـثالأعضاءالمجموعاتالتسجيلدخول╣☼╠00%mybblogoكيويروابط ماوس
منتدبات سحر العيون
۞منور المنتدى۞ إسم المستخدم: زائر آخر زيارة لك كانت: أخر عضو مسجل: ameeraljn مواضيعى : ردودى
الرئيسية القوانين المجموعات مجلة المنتدي المشاركات الجديدة البحث التسجيل تسجيل الخروج

شاطر | 
 

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

اذهب الى الأسفل 
كاتب الموضوعرسالة
سحر العيون
Admin
Admin
avatar

عدد المساهمات : 341
تاريخ التسجيل : 05/01/2013

مُساهمةموضوع: النافبار الملون الرائع   الأربعاء ديسمبر 10, 2014 12:48 am

لمشاهدة النافبار

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://iraqaonlaen.0wn0.com
 
النافبار الملون الرائع
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

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