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



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

شاطر | 
 

  نافبار المعلومات بخلفية مصورة

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

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

مُساهمةموضوع: نافبار المعلومات بخلفية مصورة   الخميس ديسمبر 11, 2014 5:48 pm

لمشاهدة النافبار
http://im39.gulfup.com/4RRGK.jpg

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

الكود:
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"><div class="example">
    <ul id="nav">
        <li class="current"><a href="xxxxxxxxxxx">الرئيسية</a></li>
 
        <li><a href="">اسلاميات</a>
            <ul>
                <li><a href=""> أنبياء وشخصيات</a>
                    <ul>
                        <li><a href="http://www.galileofeed.com/galileo_feeds_preview.asp?feedid=58">قصص الانبياء</a></li>
                        <li><a href="http://www.galileofeed.com/galileo_feeds_preview.asp?feedid=56">شخصيات أسلامية</a></li>

                  </ul>
                </li>
                <li><a href="">فقه وعلوم</a>
                    <ul>
                        <li><a href="http://www.galileofeed.com/galileo_feeds_preview.asp?feedid=59">الوعى الدينى</a></li>
                        <li><a href="http://www.galileofeed.com/galileo_feeds_preview.asp?feedid=34">خطب ومحاضرات</a></li>
                        <li><a href="http://www.galileofeed.com/galileo_feeds_preview.asp?feedid=32">المكتبة الصوتية</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="">الكمبيوتر والجوال</a>
            <ul>
                <li><a href="">الكمبيوتر والنت</a>
                    <ul>
                        <li><a href="http://www.galileofeed.com/script_ar.asp?feedid=68">اخبار وقضايا</a></li>
                        <li><a href="http://www.galileofeed.com/galileo_feeds_preview.asp?feedid=69">خلفيات</a></li>
                        <li><a href="http://www.galileofeed.com/galileo_feeds_preview.asp?feedid=41">مكتبة البرامج</a></li>

                    </ul>
                </li>
                <li><a href="">عالم الجوال</a>
                    <ul>
                        <li><a href="http://www.galileofeed.com/galileo_feeds_preview.asp?feedid=70">خلفيات الجوال</a></li>
                        <li><a href="http://www.galileofeed.com/galileo_feeds_preview.asp?feedid=72">ثيمات الجوال</a></li>
                        <li><a href="http://www.galileofeed.com/galileo_feeds_preview.asp?feedid=71">العاب الجوال</a></li>
                    </ul>
                </li>
            </ul>
        </li>

        <li><a href="">موضة وازياء</a>
            <ul>
                <li><a href=""> عالم المرأة</a>
                    <ul>
                        <li><a href="http://www.flickr.com/photos/yzfashionbridal/sets/72157633427391324/">أزياء عرائس</a></li>
                        <li><a href="http://www.ysl.com/en_US/corporate/saint-laurent-collections">ازياء سان لوران</a></li>
                        <li><a href="http://www.chanel.com/ar_ME/%D8%B9%D8%B7%D9%88%D8%B1-%D8%AA%D8%AC%D9%85%D9%8A%D9%84/%D9%85%D8%B3%D8%AA%D8%AD%D8%B6%D8%B1%D8%A7%D8%AA-%D8%A7%D9%84%D9%85%D8%A7%D9%83%D9%8A%D8%A7%D8%AC-109274">مستحضرات شانيل</a></li>
                  </ul>
                </li>
                <li><a href="">عبايات </a>
                    <ul>
                        <li><a href="http://3abaya.com/our-designers/9/nabrman.html">عبايات نبرمان</a></li>
                        <li><a href="http://3abaya.com/22/joanna/products">عبايات جوانا</a></li>
                        <li><a href="http://3abaya.com/our-designers/35/3abaya.coms-closet.html">عبايات كول</a></li>
                    </ul>
                </li>
            </ul>
        </li>


        <li><a href="">البوم الصور</a>
            <ul>
                <li><a href="http://www.galileofeed.com/galileo_feeds_preview.asp?feedid=24"> الصور العامة</a>
           
                </li>
                <li><a href="http://www.galileofeed.com/galileo_feeds_preview.asp?feedid=26">الصور الاسلامية </a>
             
              </li>
            </ul>
        </li>

    </ul>
</div>


ضع رابط منتداك بدل xxxxxx فى بداية الكود حيث الرئيسية
كود يوضع فى ورقة ccs

الكود:
/* demo page styles  */
body {
    background:#eee;
    margin:0;
    padding:0;
}
.example {
    background:#fff url(http://im42.gulfup.com/TGfB5.jpg);
    width:700px;
    height:300px;
    border:1px #000 solid;
    margin:20px auto;
    padding:15px;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}

/* main menu styles */
#nav {
    display:inline-block;
    width:100%;
    margin:0px auto;
    padding:0;
    background:#335599 url(http://www.script-tutorials.com/demos/87/images/bg.png) repeat-x 0 -110px;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0 2px 2px rgba(0,0,0, .5);
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
}
#nav li {
    margin:10px;
    float:left;
    position:relative;
    list-style:none;
}
#nav a {
    font-weight:bold;
    color:#e7e5e5;
    text-decoration:none;
    display:block;
    padding:8px 20px;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    text-shadow:0 2px 2px rgba(0,0,0, .7);
}

/* selected menu element */
#nav .current a, #nav li:hover > a {
    background:#7788aa url(http://www.script-tutorials.com/demos/87/images/bg.png) repeat-x 0 -20px;
    color:#000;
    border-top:1px solid #f8f8f8;

    box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .7);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .7);
    text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}

/* sublevels */
#nav ul li:hover a, #nav li:hover li a {
    background:none;
    border:none;
    color:#000;
}
#nav ul li a:hover {
    background:#335599 url(http://www.script-tutorials.com/demos/87/images/bg.png) repeat-x 0 -100px;
    color:#fff;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    text-shadow:0 2px 2px rgba(0,0,0, 0.7);
}

#nav ul li:first-child > a {
    -moz-border-radius-topleft:10px; /*some css3*/
    -moz-border-radius-topright:10px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
}
#nav ul li:last-child > a {
    -moz-border-radius-bottomleft:10px; /*some css3*/
    -moz-border-radius-bottomright:10px;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
}

/* drop down */
#nav li:hover > ul {
    opacity:1;
    visibility:visible;
}
#nav ul {
    opacity:0;
    visibility:hidden;
    padding:0;
    width:175px;
    position:absolute;
    background:#aabbcc url(http://www.script-tutorials.com/demos/87/images/bg.png) repeat-x 0 0;
    border:1px solid #7788aa;

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0 2px 2px rgba(0,0,0, .5);
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);

    -moz-transition:opacity .25s linear, visibility .1s linear .1s;
    -webkit-transition:opacity .25s linear, visibility .1s linear .1s;
    -o-transition:opacity .25s linear, visibility .1s linear .1s;
    transition:opacity .25s linear, visibility .1s linear .1s;
}
#nav ul li {
    float:none;
    margin:0;
}
#nav ul a {
    font-weight:normal;
    text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}
#nav ul ul {
    left:160px;
    top:0px;
}
الرجوع الى أعلى الصفحة اذهب الى الأسفل
معاينة صفحة البيانات الشخصي للعضو http://iraqaonlaen.0wn0.com
 
نافبار المعلومات بخلفية مصورة
الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1

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