آموزش تغییر زمان تبدیل منوی جوملا در صفحه نمایش باریک

منوی موبایلی، منوی ریسپانسیو؛ طریقه تعویض منو در صفحه نمایش موبایل و تبلت، اینها عباراتی است که در طراحی وبسایت ریسپانسیو به چشم می خورد. نسخه های جدید قالب پروتواستار جوملا دارای طراحی رسپانسیو هستند و منوی اصلی در پوزیشن 1 بجای اقلا منو در صفحه نمایش کوچکتر از 979 پیکسل به دکمه منو تبدیل می شود.

تعیین زمان تبدیل شدن منوی جوملا به منوی موبایل و تبلتاگر صفحه نمایشگر کوچکتر از 979px باشد، آیتم های منوی افقی اصلی وبسایت به یک دکمه سه نواری منو تبدیل می شود حتی اگر وسیله موبایل مثل تبلت در وضعیت افقی قرار داده شود.

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

اگر می خواهید وضعیت نمایش منوی اصلی در تبلت و وسایل موبایل را خودتان کنترل کنید و تنظیم پیش فرض قالب جوملا را رونویسی کنید، کافی است چند استیل media@ به انتهای استیل شیت سفارشی یا استیل شیت قالب اضافه کنید. این استیل ها تنظیمات قبلی و پیش فرض را رونویسی کرده و بر تنظیمات پیش فرض اولویت دارند.

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

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

لازم است خطوط کد css زیر به فایل استایل شیت سفارشی خود (custom.css) یا فایل template.css اضافه شوند:

@media (max-width: 979px) and (min-width: 767px) {
    .navigation  .pull-left {display: none;}
    .nav-collapse, .nav-collapse.collapse {
        height: auto;
        overflow: visible;
    }
   .nav-collapse .nav > li {
       float: left;    
    }
   .nav-collapse .nav > li.active  > a{color: #ffffff;}
   .nav-collapse .nav > li > a{
       color: #08c; font-weight: normal;
   }    
}

استایل color بایستی به رنگ دیفالت لینک و منوهای قالب ست شود. دستور min-width: 767px را می توان به هر صفحه نمایشی که مایل هستید منوی اصلی به دکمه منو موبایلی تبدیل شود، تغییر دهید.

سفارشی کردن قالب پروتواستار

عضویت در خبرنامه پلکسا

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

با ما شریک شوید

با ما باشید

قابل توجه وبمسترها

وبمستر گرامی

در صورتی که به دنبال جذب بازدید کننده یا ارتقای رنکینگ سایت خود هستید، پیشنهاد می کنیم پلکسا را یک پست یا مطلب مهمان کنید. همانطور که برای سایت خود مطلب می نویسید، مطلب خود را آماده و کد نویسی کرده و در پلکسا منتشر کنید. پلکسا هیچگونه دخل یا تصرفی در پست شما نخواهد داشت.