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

هدر چسبنده

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

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


فایلهای قالب استفاده شده رو هم میتونید از لینک زیر دریافت کنید:

http://www.mediafire.com/download/mgev29c1wdtxkv1/header-st.zip

 

دانلود نسخه با کیفیت ویدئو

 

نظرات (14)

  • Avatar

    هادی

    |

    سلام آقای مهندس خسته نباشی
    خیلی آموزشتون کاربردی و جالب بود منم مدت ها بود دنبال همچین چیزی میگشتم ، فقط یه سوالی دارم من اکثرا قالب هامو با نرم افزار آرتیستیر طراحی میکنم ، چجوری میتونم این کدها را در قالب آرتیستیرم وارد کنم؟
    آیا باید بعد از تبدیل و اکسپورت کردن به تمپلت جوملا سپس فایل زیپ را باز کنم و از داخل اون تغییر بدم؟
    ممنون میشم راهنماییم کنید

    Reply

    • Avatar

      Karim Ezoji

      |

      سلام، وقت بخیر
      بله باید قالب رو نصب کنید و تغییرات مورد نظرتون رو اعمال کنید.
      با ارتیستر کار نکردم و نمیدونم خروجی ها به چه شکل هست، اما توجه داشته باشید که برای استفاده از این سبک منو باید ساختار html سازگار با این حالت رو ایجاد کرده باشید.
      موفق باشید

      Reply

  • Avatar

    رضا

    |

    مهندس ازوجی عزیز
    اگه میشد یک پکیج کامل طراحی با جوملا یا وردپرس تهیه میکردید بنظرم بهترین و کاربردی ترین آموزش بین تمام آموزشهای فارسی میشد. آموزشهای شما فوق العاده هستند .
    متاسفانه در هیچ مرجعی هیچ آموزش کامل و بی نقصی برای جوملا وجود نداره. تمامی بسته های آموزشی بصورت سطحی و با سبکی آماتوری تهیه شدند و فقط در ظاهر بسته آموزشی کاملی هستند !
    لطفا به این موضوع فکر کنید دوست عزیز.

    Reply

    • Avatar

      Karim Ezoji

      |

      سلام
      ممنون از لطف و پیشنهاد شما
      چند وقت پیش قصد اموزش طراحی قالب برای جوملا با استفاده از فریمورک ها رو داشتم (البته بیشتر میخواستم به صورت مطالب منظم در سایت منتشر کنم و نه به صورت یک پکیج) اما متاسفانه فعلا فرصت انجام چنین کاری فراهم نست، ساخت یک کلیپ اموزشی ۱ دقیقه ای هم زمان زیادی میبره و …
      اما ممکنه تا چند وقت دیگه این دوره اموزشی رو در سایت شروع کنم!
      موفق باشید

      Reply

  • Avatar

    شیری

    |

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

    Reply

    • Avatar

      Karim Ezoji

      |

      سلام
      در مسیر \templates\jp-kados\js فایل sticky.js رو باز کنید
      مقادیر $defaultHeight و $defaultHeight2 رو به دلخواه ویرایش کنید
      موفق باشید

      Reply

      • Avatar

        شیری

        |

        سلام
        سپاسگزارم

        Reply

  • Avatar

    SHAHAB

    |

    سلام
    مدتها بود دنبال همچین چیزی می گشتم
    واقعا از این آسونتر و آماده تر ممکن نبود
    تشکر فراوان
    لطفا از این موارد خاص بازهم کار کنید
    موفق باشید

    Reply

    • Avatar

      Karim Ezoji

      |

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

      Reply

  • Avatar

    محسن

    |

    توی قالب کادوس نمیشه این کار رو انجام داد ؟

    Reply

    • Avatar

      Karim Ezoji

      |

      سلام
      نه (البته نه این که اصلا نشه کاری کرد)، ساختار هدر کادوس برای این کار مناسب نیست.
      البته هدر چسبنده کادوس به اندازه کافی باریک طراحی شده تا مزاحمتی برای نمایش صفحه ایجاد نکنه…

      Reply

  • Avatar

    حمید

    |

    عالی بود
    لطفا از این اموزش ها بیشتر بزارید.

    Reply

دیدگاهتان را بنویسید

قالب جوملا | جومپلیت | دانلود قالب رایگان جوملا و فروشگاه قالب جوملا

جومپلیت ، مرکز دانلود قالب جوملا و ارائه دهنده قالب رایگان جوملا ، قالب جوملا 2.5 و قالب فارسی جوملا است.

joomplate [@] gmail.com

ورود کاربران

بازيابي رمز عبور!