ساخت منو و زیر منوی ریسوپانسیو با بوت استرپ4 یا غیر بوت استرپ

[nekouy7nk 5]

سلام به همه

من چندتا افزونه منو ساز جوملا نصب کردم اما همه آنها در قالب من کلا به هم میریزن و اون استایل هایی که باید داشته باشند ندارند برای همین هم برای منوی ریسوپانسیو دچار مشکل شدم.البته میتونم یه منو ساده با زیرمنو برای نمایش در دکستاپ درست کنم اما برای تبلت و موبایل نمیتونم.چکار باید بکنم لطفا راهنمایی کنید؟ افزونه هایی که نصب کردم روی قالب پورتواستار جوملا بهتر جواب دادن اما هر چه تلاش کردم بفهمم قالب پورتو استار چه عناصری برای منو تعریف کرده که بهتر نشون میده نشد.البته میتونستم به کلاس های افزونه های نصب شده css بدم اما پیچیده بودن و به جاوا اسکریپت هم نیاز داشتند. خود بوت استرپ هم کلاس داره اما من پراکنده یاد گرفتم و چون منو از داخل ماژول لود میشه نمیتونم به  ul و li های منو کلاس دراپ داون یا باتن و غیره بدم  ممنون لطفا راهنمایی

[levelup 257]

سلام

از چه قالبی استفاده می کنی؟

دمو بده ببینم

[nekouy7nk 5]

سلام خودم یه قالب طراحی کردم  گذاشتم این جا ببینید

http://myportalnews.ir/

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

[levelup 257]

به نظر میاد قالب رو با بوت استراپ 4 طراحی کردی.

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

چون جوملا و افزونه هاش ذاتا از بوت استراپ 3 پشتیبانی می کنن و بعضی افزونه ها با نسخه 4 بوت استراپ به مشکل می خورن

همچنین  از گرید های بوت استراپ 4 اصلا استاندارد و صحیح استفاده نکردی. یکبار دیگه مستندات layout بوت استراپ 3 رو بخون و مو به مو اجرا کن. اول container یا  contianer-fluid هست. سپس داخلش row هست و در آخر کلاس های col داخل row قرار می گیره.

[nekouy7nk 5]

ممنون که جواب دادی

راستش اصلا از بوت استرپ استفاده نکردم خودم اومدم براساس اون سایزهایی که بوت استرپ برای دکستاپ و موبایل و تبلت تعریف کرده بود یه فایل css  مدیا زدم و به قسمت های سایت گفتم در این سایز این طوری بشید. فقط از کلاس row استفاده کردم . به خاطر اینکه col  اون اندازه ای که  می خوایم نمیدن مثلا من در یه جایی col-md-4.5 میخوام اما col اندازه 4.5 نداره یا باید 4 یا 5 استفاده کنم. طرح قالب چطور بود؟ به غیر رنگ آمیزیش. حالا برای منو چکار کنم به نظرت؟

[levelup 257]

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

کلاس container از چپ و راست 15 پیکسل padding داره.

کلاس row از چپ و راست 15 پیکسل margin منفی داره که padding کلاس container رو می پوشونه.

کلاس های col هم هر کدوم 15 پیکسل از چپ و راست padding دارن. ولی خب می تونی مثلا به جای 12 ستون ( که تو بوت استراپ مرسوم هست )، تعداد بیشتر یا کمتری ستون برای خودت درست کنی.

اگرمی خوای layout خودت رو بزنی باید این نکته ها رو رعایت کنی. این نکته ها رو رعایت کنی منو هات باید اصولا درست نمایش داده بشن.

یه کلاس مهم دیگه تو بوت استراپ clearfix هست که جزو واجباته. برو دقیقا ببین چکار می کنه و تو طراحیت لحاظ کن.

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

بقول بعضی همکارها اسپاگتی کد زدی. 

[nekouy7nk 5]

ممنون تا درستشون کنم ببینم منو ها اوکی میشه

[nekouy7nk 5]

سلام به همه

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

http://myportalnews.ir/

 

[levelup 257]

سلام

خیلی بهتر شد. فقط دونکته. 

1- به جای section از div استفاده کن. وقتی از section استفاده می کنی حتما باید یه تگ h1 تا  h6 داشته باشی و این اصلا مورد تائید www نیست. ولی تو div نیازی نیست داشته باشی. پس از div استفاده کن.

2- کلاس های col رو از سایز کوچیک به بزرگ بنویس. یعنی مثلا اول برای سایز sm باشه و در آخر سایز xl که به نظر میاد اینمورد رو رعایت کردی

3- کلاس های col ای که تعداد ستون یکسان دارن رو تکرار نکن. مثلا الان یه جا همچین چیزی نوشتی

<div id="block-center" class="col-12 col-sm-12 col-md-8 col-lg-7 col-xl-6">

با توجه به نکته 2 و 3 باید اینطوری بنویسی

<div id="block-center" class="col-12 col-md-8 col-lg-7 col-xl-6">

چون تعداد ستون ها همیشه از سایز کوچیک به بزرگ ارث می رسه. یعنیوقتی جایی زدی col-12 ، این اندازه به سایز xl هم داده میشه و دیگه نیازی نیست بنویسی col-xl-12

4- یه جایی نوشتی 

<div id="block-right" class="col-lg-2 col-xl-2 hidden hidden-sm hidden-md ">

کلس hidden رو برای دو تا سایز sm و md نوشتی. باتوجه به اینکه از سایز sm محتوا مخفی میشه، دیگه نیازی نیست دوباره برای سایز md هم تکرار بشه. پس کد بالا رو به این شکل ویرایش کن

<div id="block-right" class="col-lg-2 col-xl-2 hidden hidden-sm ">

ولی گر قراره محتوا در سایز sm مخفی باشه و در سایز مثلا lg دیده بشه باید این شکلی بنویسی

<div id="block-right" class="col-lg-2 col-xl-2 hidden hidden-sm d-lg-block ">

5- نکته آخر اینکه یادت رفته کلاس clearfix رو به کدهات اضافه کنی. کلاس مهمیه. بروببین چکار می کنه تا درکش کنی

[nekouy7nk 5]

سلام  این نکانی که آموزش دادی و یاد گرفتم خیلی برام ارزشمند هستند متشکرم

[nekouy7nk 5]

کلاس clearfix نمیدونم برای چیه؟ و کجا باید اضافش کنم؟ یه مطلب خونده بودم میگه توی یه row اگر دو تا باکس مثلا کنار هم باشند و جاشون نشه کلاس clearfix میاد row میشکنه و باکس دوم میبره خط بعدی و با باکس اول طراز میکنه.اما من توی قالبم از این باکسا ندارم و نمیدونم کاربردهای دیگه این کلاس چیه؟ توی قالبم اکثرا باکس هایی که جاشون نمیشه را مخفی میکنم تا ساز صحفه بزرگ بشه دوباره نمایش میدم.میشه لطفا در مورد این کلاس توضیح بیشتری بدهید و یا بگوید کجای قالبم اضافش کنم.ممنون