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

 

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

یکی از راهها استفاده از کد 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  می گذاریم یعنی در واقع این قسمت را نمایش ندهد.

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

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

  • بهینه سازی موتور جستجو(SEO)

    بهینه سازی موتور جستجو(SEO) چیست؟ سئو یک رشته بازاریابی است که در آن تمرکز بر روی قابلیت د…
  • طراحی سایت شخصی جناب آقای دکتر خرسندی

    طراحی سایت شخصی جناب  آقای دکتر خرسندی نام وب سایت : خرسندی تاریخ تحویل :تیر ۹۶ آدرس وب سا…
  • تاثیر سئو وبلاگ در طراحی سایت

    امروز می خواهیم در مورد موضوع تاثیر وبلاگ در طراحی سایت باهم صحبت کنیم. در طراحی سایت که ا…
  • الگوریتم Rank Brain گوگل

      مقاله ای که در طراحی سایت اسپیناس می خواهیم در مورد آن صحبت کنیم در مورد الگوریتم R…
  • CRM چیست ؟

    Crm چیست ؟ امروز در طراحی وب سایت اسپیناس به این موضوع میپردازیم یک شرکت برای بیزنس خود عل…
  • کمپین تبلیغاتی Advertising Campaign در طراحی وب سایت

      امروز در طراحی سایت اسپیناس می خواهیم در مورد یک موضوع داغ امروز صحبت کنیم. بیشتر م…
بارگذاری نوشته های مرتبط بیشتر
بارگذاری بیشتر در آموزش طراحی سایت

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

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

بررسی کنید

نکات مهم در طراحی سایت افزایش سرعت سایت (قسمت ۴)

نکات مهم در طراحی سایت افزایش سرعت سایت   افزایش سرعت سایت : در طراحی سایت اسپیناس ، …