الخميس، 20 فبراير، 2014

حصرى : قائمة أفقية احترافية بتقنية CSS

اليوم وفى موضوع جديد وحصرى من مدونة ابداعاتى جئت لكم بقائمة علوية احترافية جدا بتقنية CSS قمت بتعريبها بنفسى لأنها نالت شديد الاعجاب منى ، فقررت تقديمها لكم فى مدونتى لافادة الجميع ان شاء الله وهذه القائمة عبارة عن تبويبات متتالية بشكل منتظم بمجرد الوقوف على أحدهم ينزلق للأسف ويظهر تبوين كامن أسفله ، ولكى لا أطيل عليكم هيا بنا للشرح والمعاينة 

 شرح التركيب 
اذهب للوحة التحكم >> التخطيط >> اضافة أداة >> Html/javascript 
ضع بها هذا الكود ثم قم بالحفظ 
♫ يمكنك الحصول على الكود  >> من هنا 
<nav id="rolling-nav">
    <ul>
        <li><a href="#" data-clone="الرئيسية">مدونة ابداعاتى</a></li>
        <li><a href="#" data-clone="قسم منفصل">مدونة ابداعاتى</a></li>
        <li><a href="#" data-clone="قسم منفصل">مدونة ابداعاتى</a></li>
    </ul>
</nav>

<style>

#rolling-nav {
  color:white;

;font-size:14px;

  text-transform:uppercase;
 /* outline:1px solid; */
 width:550px; /* Fixed width. Measure it manually */
 margin:0px auto;
}
#rolling-nav ul {

  height:50px;

  margin:0px 0px;
  padding:0px 0px;
  overflow:hidden;
}
#rolling-nav li {

  float:right;

  display:inline;
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
}
#rolling-nav a,
#rolling-nav a:before {
  display:block;
  margin:0px 0px;
  padding:0px 30px;
  line-height:50px;
  color:white;
  text-decoration:none;

  background-color:#900;

  background-image:-webkit-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-moz-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-ms-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:-o-linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  background-image:linear-gradient(top, #900 0%, #6A0808 50%, #620303 50%, #6A0808 100%);
  -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  box-shadow:inset 0px 1px 0px rgba(255,255,255,0.1);
  position:relative;
  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition:all 0.3s ease-in-out;
  -ms-transition:all 0.3s ease-in-out;
  -o-transition:all 0.3s ease-in-out;
  transition:all 0.3s ease-in-out;
}
#rolling-nav a:before {
  content:attr(data-clone);
  position:absolute;
  top:100%;
 right:0px;
  left:0px;
  display:block;
  background-color:white;
  background-image:-webkit-linear-gradient(top, #ddd, white);
  background-image:-moz-linear-gradient(top, #ddd, white);
  background-image:-ms-linear-gradient(top, #ddd, white);
  background-image:-o-linear-gradient(top, #ddd, white);
  background-image:linear-gradient(top, #ddd, white);
  border-top:2px solid rgba(0,0,0,0.2);
  color:#333;
}
#rolling-nav a:hover {
  margin-top:-50px;
  margin-bottom:1px;
}

</style>
لاحظ الاجزاء المحددة بالكود السابق وغيرها بالمناسب لك
√ فى انتظار تعليقات مشجعة على تقديم المزيد لخدمتكم √
من فضلك اضغظ لايك لمشاهدة لينك التحميل

0 التعليقات:

إرسال تعليق

ملاحظة : للإبلاغ عن رابط محتوى لا يعمل المرجوا الضغط على " الاتصال السريع " في أسفل القائمة مباشرة لاصلاح الخطأ بسرعة : نحن نسعى دائما لرقي الموقع جميعا من أجل الاستقرار
جميع الحقوق محفوظة © 2014 مدونة ابداعاتىجميعا من أجل الاستقرار