المعلومات | الكاتب: | | اللقب: | Admin | الرتبه: | | الصورة الرمزية | | البيانات | الجنس : | | عدد المساهمات : | 1357 | السٌّمعَة : | 36 | تاريخ التسجيل : | 28/08/2014 | الموقع : | بيت الجزائر لكل العرب |
الإتصالات | الحالة: | | وسائل الإتصال: | |
| موضوع: نافبار أزرق احترافي من تعديلي الأربعاء 10 ديسمبر 2014 - 17:27 |
|
نافبار أزرق احترافي من تعديليcss - الكود:
-
/* top level elements */ #nav, #nav ul { list-style: none outside none; margin: 0; padding: 0; } #nav { background-color: rgb(78,105,162); background: -moz-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(78,105,162,1)), color-stop(100%, rgba(59,88,152,1))); background: -webkit-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%); background: -o-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%); background: -ms-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%); background: linear-gradient(to bottom, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%);
border-bottom: 1px solid #3A4B7B; height: 22px; padding: 10px 0 10px 5px; position: relative; } #nav > li { float: right; height: 22px; padding-right: 6px; position: relative; text-align: left; } #nav > li > a { border: 1px solid transparent; color: #FFFFFF; display: block; font-size: 12px; font-weight: bold; height: 27px; line-height: 27px; margin: -3px 0 0 -1px; padding: 0 1px 0 11px; text-decoration: none; text-shadow: 0 -1px rgba(0, 0, 0, 0.5); } #nav > li:hover > a, #nav > a:hover { background-color: #425691; border-radius: 2px 2px 2px 2px; color: #FFFFFF; margin-right: -8px; padding: 0 9px 0 11px; position: relative; z-index: 1; } #nav > li.subs:hover > a { background-color: #FFFFFF; border: 1px solid rgba(100, 100, 100, 0.4); border-bottom-width: 0; border-radius: 2px 2px 0 0; color: #000000; text-shadow: 0 0 transparent; z-index: 2; }
/* top items separator */ #nav > li:after { background-color: #405791; content: ""; height: 17px; left: 1px; position: absolute; top: 2px; width: 1px; } #nav > li:first-child:after { background-color: transparent; }
/* submenu */ #nav ul { background-color: #FFFFFF; border: 1px solid rgba(100, 100, 100, 0.4); *border: 1px solid rgb(100, 100, 100); border-radius: 0 0 3px 3px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25); display: none; left: -1px; margin-top: 2px; min-width: 200px; padding: 6px 0; position: absolute; top: 100%; z-index: 1; } #nav li:hover ul { display: block; } #nav ul li a { border-bottom: 1px solid transparent; border-top: 1px solid transparent; color: #232B37; display: block; font-size: 12px; line-height: 20px; padding: 0 22px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; } #nav ul li a:hover { background-color: #6D84B4; border-bottom: 1px solid #3B5998; border-top: 1px solid #3B5998; color: #FFFFFF; }
/* other elements */ #nav span { display: none; }
/* responsive rules */ @media all and (max-width : 980px) {
/* top level elements */ #nav { height: auto; margin: 0; overflow: hidden; padding: 0; width: 100%; } #nav li { display: inline; float: left; height: auto; line-height: 40px; margin: 0; padding: 0; position: relative; width: 100%; } #nav > li:after { display: none; } #nav > li > a { border-bottom: 1px solid #3B5998; height: 40px; line-height: 40px; margin: 0; } #nav > li:hover > a, #nav > a:hover { margin: 0; border-width: 1px; } #nav > li.subs:hover > a { border-radius: 0; border-width: 1px; }
/* submenu */ #nav ul { border: 0; left: 0; margin: 0; overflow: hidden; padding: 0; position: relative; top: 0; } #nav li:hover ul { display: none; } #nav ul li a { height: 40px; line-height: 40px; } #nav #s1:target + li > a, #nav #s2:target + li > a{ background-color: #FFFFFF; border: 0; color: #000000; text-shadow: 0 0 transparent; } #nav #s1:target + li ul, #nav #s2:target + li ul { display: block; } } HTML - الكود:
-
<ul id="nav"> <li> <a href="الرابط">الرئيسية</a> </li> <span id="s1"></span> <li class="subs"> <a href="#s1">المنتدى</a> <ul> <li> <a href="الرابط">القسم الاول</a> </li> <li> <a href="الرابط">القسم الثاني</a> </li> <li> <a href="الرابط">القسم الثالث</a> </li> <li> <a href="الرابط">القسم الرابع</a> </li> <li> <a href="الرابط">القسم الخامس</a> </li> <li> <a href="الرابط">القسم السادس</a> </li> </ul> </li> <span id="s2"></span> <li class="subs"> <a href="#s2">المدونة</a> <ul> <li> <a href="الرابط">القسم الاول</a> </li> <li> <a href="الرابط">القسم الثاني</a> </li> <li> <a href="الرابط">القسم الثالث</a> </li> <li> <a href="الرابط">القسم الرابع</a> </li> <li> <a href="الرابط">القسم الخامس</a> </li> <li> <a href="الرابط">القسم السادس</a> </li> </ul> </li> <li> <a href="الرابط">الاعضاء</a> </li> <li> <a href="الرابط">الدردشة</a> </li> <li> <a href="الرابط">القوانين</a> </li> </ul> يوضع في العناصر الاضافية |
|