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

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

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

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

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

.nav {
height: 5px;
background: url(https://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="https://doctorwp.com/wp-content/uploads/2013/12/head.js"></script>

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

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

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

12 نظرات
  1. Matori73 می گوید

    سلام !
    امکانش هست که بگید چکار باید بکنیم که این نوار همینطوری تغییر رنگ بده بدون اینکه اسکرول کنیم و … ؟؟؟

  2. باران می گوید

    سلام
    می خواستم بدونم این کد برای جوملا کاربرد نداره

    یا اگر کدش رو برای جوملا دارید … لطفا بهم معرفی کنید

    متشکرم

  3. یلدا می گوید

    سلام
    واقعا ممنون از مطالب سایتتون، به من که تقریبا مبتدی هستم خیلی کمک کرد و راحت تونستم کد ها رو اضافه کنم و ظاهر سایتم رو زیباتر و کاربردی تر کنم
    امیدوارم موفق باشید.

  4. Arya می گوید

    سلام مجدد
    به دليل نوار مديريت وردپرس ، نوار نشون داده نمي شد :دي

  5. محسن می گوید

    سلام
    من سایت وردپرسی دارم
    فایل استایل داره ولی body وhtml در کدوم فایل قرار داره؟
    من نتونستم پیدا کنم

    1. آرش حیدری می گوید

      سلام
      تگ و رو داخل فایل header.php قالبتون می تونید پیدا کنید.

  6. طراحی وب می گوید

    دستتون درد نکنه سایتتون خیلی عالیه

  7. شصت چی می گوید

    اگر یوزر لاگین باشه اون نوار آبی پشت ادمین بار نمی افته؟
    برای این که هدر فیکسمون پشت ادمین بار نیفته باید چه کار کرد؟

    1. آرش حیدری می گوید

      سلام
      اگر منظورتون وردپرس هستش ، بله فکر کنم همینطور که شما میگین باشه اون هدر وردپرس فیکس هستش حالا اینکه اینم فیکس کنیم و این نمایش داده بشه ، چرا دروغ راستش نمی دونم …

    2. یاسین پالیزدان می گوید

      فکر کنم اگر z-index رو با یه عدد بالاتر از هدر تعریف کنی بیفته رو…
      مثلا اگر هدر z-index:2 هستش تو باید یه عدد بالاتر در نظر بگیری برای این یکی…

  8. سید مصطفی می گوید

    سلام.خیلی ممنون از مطلبت اما اون تغییر رنگ اسکرول بار برای من جواب نداد

    1. آرش حیدری می گوید

      سلام ، خواهش می کنم
      اون تغییر رنگ اسکرول بار دمو هم خوب قرار دادیم تا صحت کدها رو ببینید ! دوباره با دقت امتحان کنید
      فق یک نکته که این تغییر رنگ فقط در مرورگر کروم و سافاری هستش ! یعنی باید webkit باشند.

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.