روش ساختن منوی ثابت در طراحی سایت:

 

برای ساختن منویی که ثابت باشد چند راه وجود دارد که من در این مقاله خلاصه و مفید خدمت شما عرض می کنم.

یکی از راهها استفاده از کد css  هست که حتما با آن آشنایی دارید.

که در این حالت از خصیصه ی position  استفاده می کنیم و مقدارش را برابر fixed  می گذاریم به صورت زیر:

 

#menu{positon: fixed;}

 

و حال می خواهیم منوی ما به صورت خاص ثابت شود یعنی مثلا از یک ارتفاعی به بعد یا با یک انیمیشن یا حالت خاص،

که در این صورت از کد جی کوئری باید استفاده کنیم.

که این راه هم به چند روش ممکن هست که مثلا من یکی از متداول ترین و البته قابل فهم ترین آنها را برایتان شرح می دهم.

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

 

$(function(){

        // Check the initial Poistion of the Sticky Header

        var stickyHeaderTop = $('#stickyheader').offset().top;




        $(window).scroll(function(){

                if( $(window).scrollTop() > stickyHeaderTop ) {

                        $('#stickyheader').css({position: 'fixed', top: '0px'});

                        $('#stickyalias').css('display', 'block');

                } else {

                        $('#stickyheader').css({position: 'static', top: '0px'});

                        $('#stickyalias').css('display', 'none');

                }

        });

  });

استفاده از js در منوی ثابت:

در این کد ابتدا یک تابع را تعریف می کنم و یک متغیری با عنوان stickyHeaderTop  که مقدارش را برابر با شروع از بالای منو قرار می دهیم .

سپس تعریف می کنیم هنگامی که سایت اسکرول عمودی می خورد چه اتفاقی بیفتد یا چه تابعی اجرا شود.

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

در واقع زمانیکه تا زیر منو اسکرول خورد به آی دی stickyheader  که برای منو تعریف شده مقدار css  ، position را برابر fixed  قرار می دهیم و top  را هم صفر می گذاریم .

و برای آی دی که داخل منو تعریف می شود (که این کاملا به کد شما بستگی دارد ) مقدار خصیصه ی display را برابر block قرار می دهیم.

که کل عرض صفحه سایت را بگیرد.

و بعد از if  یک else  می گذاریم که در غیر اینصورت مقدار آی دی اولی را stickyheader  را مقدار position  را برابر استاتیک یا همان حالت عادی تعریف می کنیم

مقدار top هم که همان صفر می شود.

و id  بعدی هم که stickyalias هست رو مقدار display آن را برابرnone  می گذاریم یعنی در واقع این قسمت را نمایش ندهد.

باز هم عرض می کنم که روش های مختلفی وجود دارد برای این کار که بستگی به کد شما و درکتان از زبان برنامه نویسی جاوا اسکریپت دارد.

و طراحی سایت های بسیاری در این زمینه وجود دارد که روش های متنوع تری رو  در اختیارتان قرار می دهد.

بارگذاری نوشته های مرتبط بیشتر
  • طراحی سایت با فتوشاپ

    طراحی قالب با فتوشاپ شاید بتونیم بگیم فتوشاپ،یک نرم‌افزاری است که کاربرد های بسیار زیادی د…
  • وردپرس

    چرا وردپرس؟

    دلیل استفاده از وردپرس بجای سایر سایت ساز ها و سیستم های مدیریت محتوا به این خاطر که هیچ ر…
  • yslow in gtmetrix

    کارایی و عملکرد gtmetrix Yslow چیست؟

    Yslow چیست؟ کارایی و عملکرد gtmetrix Yslow چیست؟ Use a Content Delivery Network – CDN ( با…
  • gtmetrix

    کاربرد gtmetrix در طراحی سایت

    GTmetrix چیست ؟ GTmetrix یک سایتی است که به بررسی عوامل موثر در سرعت بارگذاری سایت می پردا…
  • چگونگی گرفتن لینک

    در کجا لینک بگذاریم؟ در طراحی سایت ها دو چیز از همه مهم تر است . برای صاحبان سایت رنک و تر…
  • بهبود رتبه ی الکسا

    بهبود رتبه ی الکسا

    الکسا چیست  الکسا یک سایتی است که وبلاگ ها و سایت ها را رتبه بندی می کند. در دنیایی که جای…
بارگذاری بیشتر در آموزش طراحی سایت

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

بررسی کنید

طراحی سایت با فتوشاپ

طراحی قالب با فتوشاپ شاید بتونیم بگیم فتوشاپ،یک نرم‌افزاری است که کاربرد های بسیار زیادی د…