به نام خدا ، در خدمت شما هستیم با یک کد که با اون یک خط رنگی (nav) در بالای سایتتون قرار میگیره و همچنین می تونید با تغییر اسکرول بار توسط کاربر ، رنگش هم تغییر می کنه و به شکل رنگین کمان ! تغییر رنگ میده.

کد خط رنگی بالای سایت - nav style

کد و استایل خط رنگی ثابت بالای سایت

برای این که یک خط رنگی به بالای قالب سایت اضافه بشه بدون اینکه تغییری در رنگش ایجاد بشه نیاز هستش که دوتا کد رو قالبتون اضافه کنید.در ابتدا کد شیوه نامه زیر رو به انتهای فایل style.css قالبتون باید اضافه کنید.


.nav {
height: 5px;
background: url(http://doctorwp.com/wp-content/uploads/2013/12/nav.png) repeat-x;
position: fixed;
width: 100%;
top: 0px;
z-index: 1000;
}

بعد فقط کافیه که یک خط کد زیر را دقیقا بعد از تگ <body> داخل قالبتون قرار بدید.

<div class="nav" style="background-position: 0% 0%;">
</div>

فقط دقت کنید که ما از کلاس nav برای استایل استفاده کردیم ، اگر همچین کلاسی داخل قالبتون دارید ممکن هستش که تداخل پیدا کنه و باید اسم کلاس رو اونوقت تغییر بدید.

کد تغییر رنگ خط بالای سایت با اسکرول بار

حالا میشه یکار دیگه هم انجام داد و این که هرموقع کاربر اسکرول بار سایت رو تکون داد و اون خط رنگی بالای سایت هم رنگش تغییر کنه . برای این کار نیاز هستش که دوتا خط کد زیر رو مابین دوتا تگ <head/> و <head> قرار بدید.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>
<script language="javascript" type="text/javascript" src="http://doctorwp.com/wp-content/uploads/2013/12/head.js"></script>

دقت کنید تو اکثر قالب ها اون فایل اولی (jquery.min.js)  فراخوانی شده و ببینید که اگر تو قالبتون همچین فایلی دارید ( به احتمال خیلی زیاد دارینش ) فقط دومین فایل (head.js) نیاز هستش که فراخوانی کنید . به این نکته دقت داشته باشید.

پیش نمایش اسکریپت

همچنین در فایل پیش نمایش از دکمه های ثابت کنار سایت استفاده کردیم که در مطالب قدیم سایت کدهاشو قرار داده بودیم.برای تغییر رنگ اسکرول بار هم مطلبی نوشته بودیم.

امتیاز شما از 1 تا 5
1 ستاره میدم به نوشته2 ستاره میدم به نوشته3 ستاره میدم به نوشته4 ستاره میدم به نوشته5 ستاره میدم به نوشته
Loading...