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

پیش نمایش پروژه کوچک ما

ویدیو ها به دو قسمت تقسیم شدند. در یک ویدیو منوی موبایل (صفحات کوچکتر از 30em) کدنویسی شده و در ویدیو بعدی صفحات بزرگتر از 30em کدنویسی شده. مقداری کدهای مشترک هم داشتند.

ساخت یک منو برای موبایل

ساخت منو برای صفحه نمایش بزرگتر

ویدیو پایینی در ادامه ویدیو بالا است.

نکته های این پروژه (منو رسپانسیو فلکس باکس)

نکته: همانطور که مشاهده میکنید کدها تمیز نوشته شده اند. هدف این بود که کدها در چند برگه قرار داده شوند. تا بلاک و المنت block و element که مربوط به BEM است رعایت شود اما اینجا هدف بر تشریح فلکس باکس بود.

نکته: مقداری از کدها برای عرض کمتر از 30em و عرض بیشتر از 30em برابر هم هستند به همین دلیل داخل مدیا کوئری  mediaنوشته نشد. همانطور که میدانید وقتی کدی خارج از مدیا نوشته شود به همه جا اعمال میشود.

سوال: برای اینکه ساب منو های طولانی ادامه متنشان زیر هم نمایش داده شود از چه استایلی بهره بردیم؟

جواب: به li استایل flex-shrink: 1 دادیم. این را داخل دومین عدد یک در  flex: 1 1 auto قرار دادیم و یکپارچه نوشتیم.

سوال: برای اینکه هر ایتم ساب منو دقیقا زیر هم قرار گیرد (درصورت کوچک بودن در کنار هم قرار نگیرد) از چه استایلی استفاده شد؟

جواب: هم از استایل width:100 استفاده کردیم هم flex-wrap:wrap قرار داده شد. اولی به li و دومی به ul داده شد.

سوال: خط کد زیر از فلکس باکس چگونه به رسپانسیو شدن کمک میکند؟

flex: 1 1 auto

جواب: معمولا این خط کد به li های داخل ul داده میشود. پارامتر اول و دوم که برابر یک هستند به ترتیب مقادیر flex-grow و flex-shrink را نشان میدهند. سومی هم که auto است flex-basis است.

وقتی flex-grow برابر یک باشد یعنی li به اندازه کافی سطر را بپوشاند و تا جایی که میتواند بزرگ شود. وقتی flex-shrink برابر یک باشد، متن داخل li اگر زیاد باشد و صفحه نمایش کوچک باشد انگاه متن به سطر بعد میرود.

سوال: چرا از position: absolute استفاده کردیم؟

جواب: هم به کلاس menu__li پوزیشن relative دادیم هم به کلاس submenu که مربوط به ul درونی است، پوزیشن absolute دادیم. نکته اول این است که هرجا به مادر پوزیشن relative داده شود و بچه اش absolute باشد انگاه اتفاق خاصی می افتد. نکته دوم این است که وقتی بخواهیم ساب منو داخل منو اصلی نمایش داده نشود و خارج ان بیفتد باید از این پوزیشن استفاده کنیم.

سوال: چرا با وجود اینکه پوزیشن absolute به تگ ul  دادیم و با پوزیشن absolute معمولا چیدمان به هم میریزد و از اول بروزر نمایش میدهد اما اینجا کنار همان li مربوطه نمایش داده؟

جواب: زیرا کدهای مربوط به submenu در یک ul هستند که این ul خارج از تگ a ای هست که یک ایتم منو را نمایش میدهد. اما هم ایتم منو و هم تگ ul ساب منو هر دو داخل یک تگ li هستند که داخل ul ای قرار دارد که کل منو ما را تشکیل میدهد. در حقیقت نحوه قرار دادن کدهای html است که این قابلیت زیبا را فراهم اورده است.