اذهب الي المحتوي
أحلى نادي لأحلى أعضاء
البحث في
  • المزيد من الخيارات...
عرض النتائج التي تحتوي على:
إيجاد النتائج في:

مجموعة عامة  ·  9231 اعضاء

نادي الفهلوى ديزاين للإبداع
sasa designe

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

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>



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


شارك هذه المشاركه


رابط المشاركه
شارك

يعطيك الف الف عافيه

موضوع رااائع

وجهود أروع

ننتظر مزيدكم

بشوووق

شارك هذه المشاركه


رابط المشاركه
شارك
@malakooo كتب:
يعطيك الف الف عافيه

موضوع رااائع

وجهود أروع

ننتظر مزيدكم

بشوووق

 

                      
شكرا لكلامك الرائع الذي يجعلني أطور من مجهودي وقدراتي
شكرا للمرور
تشرفت مرورك
    

شارك هذه المشاركه


رابط المشاركه
شارك
يتجسد الابداع دائما في
مواضيعك عندما يكون
لها هذا التميز مجهود جدا رائع..
تحياتي لك

شارك هذه المشاركه


رابط المشاركه
شارك

موضوع رائع وجميل شكراً جزيلاً لك . وبالتوفيق الدائم.

شارك هذه المشاركه


رابط المشاركه
شارك

انشئ حساب جديد او قم بتسجيل دخولك لتتمكن من اضافه تعليق جديد

يجب ان تكون عضوا لدينا لتتمكن من التعليق

انشئ حساب جديد

سجل حسابك الجديد لدينا في الموقع بمنتهي السهوله .

سجل حساب جديد

تسجيل دخول

هل تمتلك حساب بالفعل ؟ سجل دخولك من هنا.

سجل دخولك الان

×
×
  • اضف...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.