قائمه كما بالصوره

مشاهدات الان

شاهد

البحث عن
]]></b:skin>
فوقه

ul.slideuptabs{
list-style: none;
margin: 0;
padding: 0;
position: relative;
text-align: left;
border-bottom: 10px solid green;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #d8d8d8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#d8d8d8));
background: -webkit-linear-gradient(top, #ffffff 0%,#d8d8d8 100%);
background: -o-linear-gradient(top, #ffffff 0%,#d8d8d8 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#d8d8d8 100%);
background: linear-gradient(to bottom, #ffffff 0%,#d8d8d8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d8d8d8',GradientType=0 );
}
ul.slideuptabs li{
display: inline;
}
ul.slideuptabs li:first-of-type{
margin-left: 10px;
}
ul.slideuptabs a{
position: relative;
display: inline-block;
overflow: hidden;
color: black;
text-decoration: none;
padding: 8px 20px;
font-size: 14px;
font-weight: bold;
vertical-align: bottom;
-webkit-transition: color 0.5s;
-moz-transition: color 0.5s;
transition: color 0.5s;
}
ul.slideuptabs a span{
position: relative;
z-index: 10;
}
ul.slideuptabs a::before{
content: '';
color: white;
display: block;
position: absolute;
width: 100%;
height: 100%;
background: green;
left: 0;
top: 110%;
box-shadow: -2px 2px 10px rgba(255,255,255,.5) inset;
border-radius: 15px 15px 0 0 / 12px 12px;
-webkit-transition: top 0.5s;
-moz-transition: top 0.5s;
transition: top 0.5s;
}
ul.slideuptabs a:hover{
color: white;
}
ul.slideuptabs a:hover::before{
top: 0;
}
/****** Responsive Code ******/

@media screen and (max-width: 640px) {

ul.slideuptabs li:first-of-type{
margin-left: 0;
}
}

/****** Theme Red ******/

ul.slideuptabs.red{
border-bottom-color: darkred;
}

ul.slideuptabs.red a::before{
background: darkred;
}

/****** Theme Orange ******/

ul.slideuptabs.orange{
border-bottom-color: #F4BB00;
}
ul.slideuptabs.orange li a{
color: black;
}
ul.slideuptabs.orange a::before{
background: #F4BB00;
}
ul.slideuptabs.blue{
border-bottom-color: #259AD1;
}
ul.slideuptabs.blue a::before{
background: #259AD1;
}

</style>

<!--[if lte IE 8]>
<style type="text/css">

ul.slideuptabs a:hover{
color: black;
}

البحث
<header>
فوقه او تحته لين يثبت معك
او اضافه جافا سكربت وعدل فيه

<ul class="slideuptabs">
<li><a href="https://sfehthayef.blogspot.com/">البرامج</a></li>
<li><a href="https://sfehthayef.blogspot.com/">الويندوز</a></li>
<li><a href="https://sfehthayef.blogspot.com/">المنتدى</a></li>
<li><a href="https://sfehthayef.blogspot.com">صفحات هايف</a></li>
<li><a href="https://sfehthayef.blogspot.com/">الجافا سكربت</a></li>
<li><a href="https://sfehthayef.blogspot.com">التصميم</a></li>
</ul>

اختر احدهم

<ul class="slideuptabs red">
<li><a href="https://sfehthayef.blogspot.com/">البرامج</a></li>
<li><a href="https://sfehthayef.blogspot.com/">الويندوز</a></li>
<li><a href="https://sfehthayef.blogspot.com/">المنتدى</a></li>
<li><a href="https://sfehthayef.blogspot.com">صفحات هايف</a></li>
<li><a href="https://sfehthayef.blogspot.com/">الجافا سكربت</a></li>
<li><a href="https://sfehthayef.blogspot.com">التصميم</a></li>
</ul>

اختر احدهم

<ul class="slideuptabs orange">
<li><a href="https://sfehthayef.blogspot.com/">البرامج</a></li>
<li><a href="https://sfehthayef.blogspot.com/">الويندوز</a></li>
<li><a href="https://sfehthayef.blogspot.com/">المنتدى</a></li>
<li><a href="https://sfehthayef.blogspot.com">صفحات هايف</a></li>
<li><a href="https://sfehthayef.blogspot.com/">الجافا سكربت</a></li>
<li><a href="https://sfehthayef.blogspot.com">التصميم</a></li>
</ul>

اختر احدهم

<ul class="slideuptabs blue">
<li><a href="https://sfehthayef.blogspot.com/">البرامج</a></li>
<li><a href="https://sfehthayef.blogspot.com/">الويندوز</a></li>
<li><a href="https://sfehthayef.blogspot.com/">المنتدى</a></li>
<li><a href="https://sfehthayef.blogspot.com">صفحات هايف</a></li>
<li><a href="https://sfehthayef.blogspot.com/">الجافا سكربت</a></li>
<li><a href="https://sfehthayef.blogspot.com">التصميم</a></li>
</ul>

المصدر
http://www.dynamicdrive.com/style/csslibrary/item/slide_up_tabs/
ونستمر

قائمه كما بالصوره

إرسال تعليق

Translate

إجمالي مرات مشاهدة الصفحة

نموذج الاتصال