حصرى : قائمة أفقية احترافية بتقنية 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>
لاحظ الاجزاء المحددة بالكود السابق وغيرها بالمناسب لك
