علامات التبويب الأفقية المتحركة

هذه الأبواب المنزلقة تستند علامات التبويب ملون أزرق "تقفز" عند تحديده، مثل عندما تتحرك الماوس فوق كل منها. ويتم إنجاز ذلك باستخدام مزيج من المواقع النسبية والحشو في كل علامة تبويب. ويمتد أولا التبويب المحدد رأسيا من يعطيها والحشو أسفل سميكة، ثم التقطه من ذلك بفضل CSS "الأعلى" قيمة العقار وهذا أصغر من علامات التبويب طبيعية ». النتيجة هي علامات التبويب التي تحرك دون أي البرمجة.

راجع للشغل، مبلغ علامة التبويب المحددة تقفز يمكن بسهولة تعديلها، تشير إلى التعليقات داخل CSS.
<body>
<style type="text/css">

.animatedtabs{
border-bottom: 1px solid gray;
overflow: hidden;
width: 100%;
font-size: 14px; /*font of menu text*/
}

.animatedtabs ul{
list-style-type: none;
margin: 0;
margin-left: 10px; /*offset of first tab relative to page left edge*/
padding: 0;
}

.animatedtabs li{
float: left;
margin: 0;
padding: 0;
}

.animatedtabs a{
float: left;
position: relative;
top: 5px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */
background: url(https://i.servimg.com/u/f32/17/82/24/96/tab-bl10.gif) no-repeat left top;
margin: 0;
margin-right: 3px; /*Spacing between each tab*/
padding: 0 0 0 9px;
text-decoration: none;

}

.animatedtabs a span{
float: left;
position: relative;
display: block;
background: url(https://i.servimg.com/u/f32/17/82/24/96/tab-bl10.gif) no-repeat right top;
padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */
font-weight: bold;
color: black;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
.animatedtabs a span {float:none;}
/* End IE5-Mac hack */

.animatedtabs .selected a{
background-position: 0 -125px;
top: 0;
}

.animatedtabs .selected a span{
background-position: 100% -125px;
color: black;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}

.animatedtabs a:hover{
background-position: 0% -125px;
top: 0;
}

.animatedtabs a:hover span{
background-position: 10% -125px;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}

</style>
<div class="animatedtabs">
<ul>
<li><a href="https://zaharatb.yoo7.com/forum" title="منتدى"><span>منتدى</span></a></li>
<li class="selected"><a href="https://zaharatb.yoo7.com/" title="البوابة"><span>البوابة</span></a></li>
<li><a href="https://zaharatb.yoo7.com/forum" title="منتدى"><span>منتدى</span></a></li>
<li><a href="https://zaharatb.yoo7.com/" title="البوابة"><span>البوابة</span></a></li>
<li><a href="https://zaharatb.yoo7.com/forum" title="منتدى"><span>منتدى</span></a></li>
<li><a href="https://zaharatb.yoo7.com/" title="البوابة"><span>البوابة</span></a></li>
</ul>
</div>
</body>

» علامات التبويب الأفقية المتحركة
» علامات التبويب اوبر جولة اللون
» علامات حب الرجل للمراة
» علامات مهمة تدل على خيانة الرجل لك
» علامات البلوغ عند الفتاة و البنات

مكتب ديكور و تشطيب (شركه عقاري للتشطيبات والديكور)

تقدم احدث الموديلات

…

[ قراءة كاملة ]

شركات ديكور في المهندسين ( عقاري للاسكان 01020115119)

تقدم شركة عقاري للاسكان …

[ قراءة كاملة ]

سأتحدث عن الإيمان الكامل بان
ما يحرمه الله عن البشر ..

فهو بالتأكيد لمصلحة البشر …

[ قراءة كاملة ]