حصرى : قائمة أفقية احترافية بتقنية 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>

لاحظ الاجزاء المحددة بالكود السابق وغيرها بالمناسب لك

√ فى انتظار تعليقات مشجعة على تقديم المزيد لخدمتكم √