آموزش افقی کردن منوی وبسایت

زمانی که جوملا +3 را برای اولین بار نصب می کنید، همراه با نصب سیستم مدیریت محتوای جوملا سه ماژول به طور خودکار نصب و پابلیش می شود. این سه ماژول عبارتند از: ماژول بریدکرامب (Breadcrumbs)، ماژول منوی اصلی (Main Menu) و ماژول فرم ورود به سایت (Login Form).

معمولا در نسخه انگلیسی جوملا ماژول منوی اصلی در پوزیشن-7 قرار داده می شود. این ماژول از نوع ماژول منو بوده، بدین معنی که منوهایی را نمایش می دهد که در مدیر منوی جوملا (Menu Manager) ایجاد شده اند. در نصب تازه جوملا با قالب پیش فرض پروتواستار، مدیر منو تنها دارای یک منو است و آن منوی اصلی است که آیتم های منو در داخل آن تعریف شده اند مثل آیتم منوی Home. زمانی که جوملا نصب شد، می بینیم که این منو در ستون سمت راست وب پیج ظاهر می شود.

طریقه افقی کردن منوی اصلی جوملا

اگر می خواهید منوی اصلی جوملا را از ستون سمت راست و قالب عمودی به پوزیشن افقی در بالای محتوای سایت انتقال دهید، مراحل زیر را انجام دهید:

این یک فرآیند دو مرحله ای است و می توانید آیتم های دیگری به منوی سایت خود اضافه کنید تا تنظیمات ارائه شده در این مقاله رابهتر ببینید.

گام اول: تغییر پوزیشن منوی اصلی

به مدیر ماژول جوملا رفته و روی ماژول Main Menu کلیک کنید تا ماژول منوی اصلی برای ویرایش باز شود. صفحه پیش فرض تمامی ماژول ها برگه Module است. حال پوزیشن ماژول منوی اصلی را تغییر دهید. برای عملکرد برتر ماژول منوی افقی آن را در پوزیشن-1 قرار دهید. ماژولی که در پوزیشن-1 جوملا گذاشته شود، هنگام کمپایل و ارسال به مرورگر در یک div به صورت <nav class="navigation"> ظاهر می شود.

به مدیر ماژول جوملا رفته و روی ماژول Main Menu کلیک کنید تا ماژول منوی اصلی برای ویرایش باز شود. صفحه پیش فرض تمامی ماژول ها برگه Module است. حال پوزیشن ماژول منوی اصلی را تغییر دهید. برای عملکرد برتر ماژول منوی افقی آن را در پوزیشن-1 قرار دهید. ماژولی که در پوزیشن-1 جوملا گذاشته شود، هنگام کمپایل و ارسال به مرورگر در یک div به صورت <nav class="navigation"> ظاهر می شود.

گام دوم: تخصیص کلاس به ماژول

در حالی که ماژول منو هنوز باز است، به برگه Advanced بروید. در کادر تکست باکس روبروی گزینه Menu Class Suffix عبارت nav-pills را تایپ کنید. فراموش نکنید که قبل از نام کلاس یک فاصله بزنید.

جوملا, قالب جوملا, ساید بار جوملا, پوزیشن جوملا, ماژول جوملا, کامپوننت جوملا, نصب جوملا, ویرایش قالب جوملا, قالب ریسپانسیو, ایجاد پوزیشن ماژول جدید, اموزش افقی کردن منوی وبسایت جوملا, تبدیل منو به منوی افقی در وبسایت جوملا است

این عمل کلاس nav-pills را به دایو <ul> داخل دایو <nav> می افزاید. در فایل استایل شیت template.css قالب پروتو استار جوملا سبک لازم برای کلاس nav-pills تعریف شده است. اگر کد منبع یکی از وب پیج های خود را بررسی کنید، مشاهده خواهید کرد که کلاس منوی اصلی به شکل زیر شده است:

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

جوملا, قالب جوملا, ساید بار جوملا, پوزیشن جوملا, ماژول جوملا, کامپوننت جوملا, نصب جوملا, ویرایش قالب جوملا, قالب ریسپانسیو, ایجاد پوزیشن ماژول جدید, اموزش افقی کردن منوی وبسایت جوملا, تبدیل منو به منوی افقی در وبسایت جوملا

در استیل شیت سفارشی خود با عبارت زیر شروع کرده و سبک مورد نظر را اضافه کنید:

.nav-tabs > li, .nav-pills > li
.nav-tabs > li > a, .nav-pills > li > a

آیا می توان منوهای دیگر غیر از منوی اصلی را نیز افقی کرد؟

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

اگر منوی جوملا را افقی کنیم، در نمایشگرهای باریک چه اتفاقی می افتد؟

منویی که دارای کلاس "class="nav-pills است زمانی که در صفحه نمایش باریک مثل موبایل و تبلت باز می شود، از حالت افقی به حالت روی هم تغییر می کند، سبکی که در استیل های media@ در فایل استیل شیت template.css قالب پروتو استار جوملا تعریف شده است.

توجه داشته باشید که اگر بجای کلاس nav-pills کلاس سفارشی و دلخواه خود را به منوی جوملا اختصاص دهید، بایستی کلاس مورد نظر را با استفاده از فراخوان media@ برای صفحه نمایش موبایل و تبلت نیز تعریف کنید. برای اینکه وبسایت ریسپانسیو باقی بماند.

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

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

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

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

با ما باشید

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

وبمستر گرامی

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