آموزش ساخت هدر چسبنده

[ezoji]

اکثر طراح ها تایید می کنند که منوی اصلی یا همون منوی ناوبری یک سایت، یکی از مهمترین بخش های یک سایت است. اما همیشه استفاده و دسترسی به این قسمت آسان نیست!
در طراحی کلاسیک، کاربرها باید برای دسترسی به منوی بالای سایت، به سمت بالا اسکرول کنند، اما این مشکل رو میشه با منو های چسبنده برطرف کرد. منو یا هدر چسبنده باعث میشه، منوی اصلی ما همیشه در دسترس کاربر قرار داشته باشه و کاربر رو به سریعترین شکل ممکن، به قسمت های مختلف سایت راهنمایی می کند.

منوی های چسنبده انواع مختلفی دارند، مثلا در ساده ترین روش، میتونیم هدر رو در بالای سایت فیکس کنیم و یا مثلا در صورتی که هدر با بالای سایت فاصله داشت، با رسیدن اسکرول به منوی اصلی، این منو در بالا فیکس شود.
اما روشی که من قصد دارم اون رو به شما معرفی کنم با انواع دیگه یک فرق اساسی دارد. در این روش هدر سایت به صورت پیشفرض در بالای سایت فیکس میشه، اما در صورت اسکرول کاربر به سمت پایین ، هدر نمایش داده نمیشه و فقط در صورتی که کاربر به سمت بالا (فقط یک پیکسل) اسکرول کرد، منو یا هدر ما نمایش داده میشود.
تفاوت اصلی این روش در این است که، در صورت اسکرول به سمت پایین هدر نمایش داده نمیشود و این مزیت اصلی این روش از منوی چسبنده است. اگر سایز هدر ما مثلا ۱۵۰ پیکسل باشه، در صورتی که از روش های قدیمی منوی چسبنده استفاده کنیم، زمانی که کاربر به سمت پایین اسکرول میکنه، به اندازه ارتفاع هدر،(مثلا ۱۵۰ پیکسل) فضای سایت غیر قابل استفاده میشود و کاربر باید سایت رو در یک فضای کوچکتر ببیند.
اما در این روش، در صورت اسکرول به سمت پایین هدر نمایش داده نمیشه و فقط زمانی که کاربر به سمت بالا اسکرول کند، نمایش داده خواهد شد.
از این روش از هدر چسبنده در سایت joomplate و قالب [مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]استفاده کردیم.
در ادامه میتونید با مشاهده فیلم زیر با نحوه طراحی این نوع از هدر چسبنده آشنا بشید.


فایلهای قالب استفاده شده رو هم میتونید از لینک زیر دریافت کنید:
[مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]

[مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]

[مهمان/کاربر گرامی برای دیدن لینک ها ابتدا باید عضو سایت شوید و لاگین کنید برای ثبت نام اینجا کلیک کنید]