تقنيه التاب الجديده الان لكل منتديات أحلى منتدى

By sasa designe, February 24, 2014 in ارشيف الموقع

Recommended Posts

alfahloy25

فى الاونة الاخيرة مع اصدار المتصفحات الجديدة وتطويرات الـHTML5 و الـCSS3 تطورت تقنيات المواقع بشكل كامل

ومنها تقنيه التاب

تاب (tab) مشابه لجوجل كروم مع لمعان بفكرة جديدة تماما (حصري )

وقبل الجميع ... لموقعكم الرائع

الان مع الاكواد

أولا : كود css

الكود:: .nav {
list-style: none;
border-bottom: 1px solid #a0a0a0;
padding: 10px 10px 0 10px;
}
.nav li { display: inline; }
.nav li.active a {
position: relative;
z-index: 1;
bottom: -2px;
margin-top: -2px;
background: #eee;
padding-top: 8px;
padding-bottom: 8px;
}
.nav li a {
float: right;
text-decoration: none;
position: relative;
padding: 7px 50px;
margin: 0 0 0 -8px;
color: #222;
background: #d8d7d8;
-webkit-border-top-right-radius: 20px 40px;
-webkit-border-top-left-radius: 20px 40px;
-moz-border-radius-topleft: 20px 40px;
-moz-border-radius-topright: 20px 40px;
-webkit-box-shadow: inset 1px 1px 0 white;
-moz-box-shadow: inset 1px 1px 0 white;
border: 1px solid #a0a0a0;
}

ثانيا : Jqury (جافا سكريبت )

الكود:: var originalBG = $(".nav a").css("background-color");

$('.nav li:not(".active") a')
.mousemove(function(e) {

x = e.pageX - this.offsetLeft;
y = e.pageY - this.offsetTop;
xy = x + " " + y;

bgWebKit = "-webkit-gradient(radial, " + xy + ", 0, " + xy + ", 100, from(rgba(255,255,255,0.8)), to(rgba(255,255,255,0.0))), " + originalBG;
bgMoz = "-moz-radial-gradient(" + x + "px " + y + "px 45deg, circle, " + lightColor + " 0%, " + originalBG + " " + gradientSize + "px)";

$(this)
.css({ background: bgWebKit })
.css({ background: bgMoz });

}).mouseleave(function() {
$(this).css({ background: originalBG });
});

وأخيرا كود html

الكود:: <ul class="nav clearfix">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="active"><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

ودا كود html لمنتديات أحلى منتدى

الكود:: <ul class="nav clearfix">
<li><a href="/">الرئيسية</a></li>
<li><a href="/search">بحث</a></li>
<li class="active"><a href="/memberlist">الاعضاء</a></li>
<li><a href="/profile?mode=editprofile">بياناتي</a></li>
<li><a href="/privmsg?folder=inbox">الرسائل</a></li>
<li><a href="/login?logou">خروج</a></li>
</ul>

أتمنى أنا ينال إعجابكم
بالتوفيق للجميع