آموزش ساخت مگا منو با CSS

مقدمه

مگامنو را می‌توان یکی از پیچیده‌ترین منوها دانست که خود آن دارای چندین زیر منو دیگر است. هرکدام از زیر منوهای موجود در مگامنو دارای المان‌های به خصوصی مانند عکس، متن، فرم و … خواهند بود. همچنین می‌توان به کمک انیمیشن‌های مختلف بر زیبایی بصری مگامنوها افزود. اما در این میان بسیاری از افراد ممکن است آموزش ساخت مگامنو با css را ندانند؛

به همین دلیل ما در این مقاله سعی کرده‌ایم تا به‌صورت کامل و خط به خط ساخت مگامنو با css را در اختیار شما قرار دهیم.

چگونه با Flexbox یک مگا منو سفارشی بسازیم

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

برای ایجاد چنین مگامنویی با flexbox به هیچ‌گونه آموزش جاوا یا اسکریپت نیز نیازی پیدا نخواهید کرد. ما در این آموزش ساخت مگامنو با css به شما یاد می‌دهیم که چگونه با استفاده از ماژول طرح‌بندی flexbox یک منو کشویی ایجاد کنید. برای اینکه یک مگامنویی مانند تصویر زیر داشته باشید، باید قدم‌به‌قدم با آموزش ساخت مگامنو با css که در این قسمت ارائه می‌کنیم، همراه شوید:

• در قدم اول، باید نوار منوی اصلی را علامت‌گذاری و استایل بندی کنید.
• سپس یک الگوی flexbox برای مگامنو با بخش‌هایی که در نظر دارید، ایجاد می‌کنیم. بخش‌های شما می‌توانند شبیه به مثال ما از انواع تعطیلات، خدمات ما، پیشنهادهای لحظه آخری، مقصدهای پرطرف‌دار و چیزهایی شبیه به این تشکیل شده باشد.
•  حال نیاز است تا محتوا (تصاویر، فهرست‌های <ul>، آیکون‌ها) را در قالب قرار دهید.
•  حال نیاز است تا موارد عنوان شده را در داخل هر بخش تراز کنید.
•  قسمت بعدی ساخت مگامنو با css این است که سبک‌های کمکی قالب مانند رنگ‌های پس‌زمینه و حاشیه‌ها را از css حذف کنید.
•  ما از قانون شناور در این مگامنو استفاده کرده‌ایم تا زمانی که کاربر روی منو قرار گرفت، مگامنو نمایش داده شود.

آیا یک مگا منو برای وردپرس ایجاد می‌کنید؟

ممکن است شما هم جزو افرادی باشید که بخواهید آموزش ساخت مگامنو با css را در وردپرس یاد بگیرید. برای این کار می‌توانید از یک افزونه بسیار کاربردی استفاده کنید. افزونه وردپرس مگامنو UberMenu می‌تواند به شما در ساخت یک مگامنو حرفه‌ای کمک کند. این افزونه جز پرفروش‌ترین آیتم‌ها در CodeCanyon است. به کمک UberMenu می‌توانید به‌سادگی در وردپرس مگامنوهای سنگین و پیچیده‌ای را پیاده‌سازی کنید.

اما شاید برخی از افراد بخواهند بدون استفاده از افزونه‌ای خاص، و با آموزش ساخت مگامنو با css این کار را انجام دهند. ما در ادامه آموزش ساخت مگامنو با css می‌خواهیم نحوه پیاده‌سازی مگامنو را به کمک css به شما آموزش دهیم. برای این کار نیاز است تا قدم‌به‌قدم به‌صورت زیر اقدامات گفته شده را انجام دهید:

۱- نوار منوی اصلی را ایجاد کنید

در اولین قدم از آموزش ساخت مگامنو با css نیاز است تا نوار منوی اصلی خود را ایجاد کنید. در نوار منو شما می‌تواند گزینه‌های مختلفی وجود داشته باشد. برای مثال خانه، درباره ما، وبلاگ، تماس با ما و … . مگامنویی که در این قسمت از مقاله آموزش ساخت مگامنو با css قصد داریم آن را ایجاد کنیم، نوار منوی تعطیلات خواهد بود. سایر قسمت‌های منوی اصلی نیز به همین روش و با آموزش ساخت مگامنو با css قابل پیاده‌سازی خواهند بود.

در این قسمت از آموزش ساخت مگامنو با css کدهای HTML برای پیاده‌سازی منو اصلی را به شما آموزش می‌دهیم:

<nav>
<ul class="menu">
<li class="menu-item"><a href="#">Home</a></li>
<li class="menu-item"><a href="#">Holidays</a></li>
<li class="menu-item"><a href="#">About</a></li>
<li class="menu-item"><a href="#">Blog</a></li>
<li class="menu-item"><a href="#">Contact</a></li>
</ul>
</nav>

حال در آموزش ساخت مگامنو با css نیاز است تا سبک‌ها و رنگ‌های اصلی را تعریف کنید. حال نیاز است تا منو را به‌صورت انعطاف‌پذیر پیاده‌سازی کنیم تا هرکدام از آیتم‌های موجود در آن بتوانند در یک ردیف مستقیم قرار بگیرند. می‌توان با افزودن center value به ویژگی align-items هر آیتم را به‌صورت عمودی تعریف کرد. قطعه کد موردنظر در آموزش ساخت مگامنو با css به‌صورت زیر خواهد بود:

/* General styling */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: sans-serif;
}
.menu li {
padding: 10px;
}
ul {

list-style-type: none;
}
a {
color: white;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
img {
max-width: 100%;
}
/* Flexbox rules */

.menu {
background-color: darkslateblue;
display: flex;
align-items: center;
text-align: center;
width: 90vw;
margin: 20px 5vw;
height: 60px;
}
.menu-item {
flex: 1;
}
/* General styling */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: sans-serif;
}
.menu li {
padding: 10px;
}
ul {

list-style-type: none;
}
a {
color: white;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
img {
max-width: 100%;
}
/* Flexbox rules */

.menu {
background-color: darkslateblue;
display: flex;
align-items: center;
text-align: center;
width: 90vw;
margin: 20px 5vw;
height: 60px;
}
.menu-item {
flex: 1;
}

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

۲- یک الگو برای Mega Menu ایجاد کنید:

در قدم بعدی از آموزش ساخت مگامنو با css نیاز است تا یک الگو را برای مگامنو ایجاد کنید. برای اینکه چیدمان مگامنو به‌درستی انجام شود، ابتدا یک قالب را به کمک آموزش ساخت مگامنو با css ایجاد می‌کنیم. سپس قالب ایجاد شده را با کمک محتواهای خود، پر خواهیم کرد. از آن جایی که مگامنو ما از چندین سطح از لیست‌های نامرتب تشکیل شده است، می‌توانیم برای سادگی بیشتر با بخش‌های اصلی شروع کنیم. ساخت مگامنو با css به‌صورت زیر ادامه پیدا می‌کند:

<nav>
<ul class="menu">
<li class="menu-item"><a href="#">Home</a></li>
<li class="menu-item"><a href="#">Holidays</a>
<ul class="submenu">
<li class="submenu-item">
<ul class="submenu-top">

<li class="submenu-top-item">Holiday types (links with thumbnail images)</li>
<li class="submenu-top-item">Holiday packages (links with descriptions)</li>
<li class="submenu-top-item">Our services (links with icons)</li>
<li class="submenu-top-item">Last minute offers (links)</li>

</ul><!-- End .submenu-top -->
</li><!-- End .submenu-item-->
<li class="submenu-item">
<ul class="submenu-bottom">
<li class="submenu-bottom-item">Trending destination 1</li>
<li class="submenu-bottom-item">Trending destination 2</li>
<li class="submenu-bottom-item">Trending destination 3</li>
<li class="submenu-bottom-item">Trending destination 4</li>
</ul>

</li><!-- End .submenu-item -->
</ul>
</li>
<li class="menu-item"><a href="#">About</a></li>
<li class="menu-item"><a href="#">Blog</a></li>
<li class="menu-item"><a href="#">Contact</a></li>
</ul>
</nav>

همان‌طور که در آموزش ساخت مگامنو با css به شما عنوان کردیم، مشاهده می‌کنید که submenu دارای دو بخش است:submenu-top برای چهار قسمت مبتنی بر لیست: انواع تعطیلات، بسته‌های تعطیلات، خدمات ما، پیشنهادهای لحظه آخری و بخش .submenu-bottom. این بخش برای مقصدهای پرطرف‌داری که دارای تصاویر هستند، پیاده‌سازی شده است.

هرکدام از این قسمت‌ها را در ساخت مگامنو با css به دو بخش جداگانه تقسیم کرده‌ایم تا برای تنظیم و پیاده‌سازی اندازه و تراز flexbox بر روی هرکدام از آن‌ها راحت‌تر باشیم. شما در قسمت زیر می‌توانید طرحی را که ما در ساخت مگامنو با css به کمک flexbox بیان کردیم را مشاهده کنید. این طرح دارای رنگ‌ها و حاشیه‌هایی است که در قطعه کد بالا پیاده‌سازی شده است.

همان‌طور که در این آموزش ساخت مگامنو با css مشاهده می‌کنید، ردیف اول، منوی اصلی است. ما این قسمت را در ساخت مگامنو با css و در مرحله اول پیاده کردیم. ردیف دوم submenu-top که یک محفظه انعطاف‌پذیر است و به آیتم‌ها اجازه می‌دهد تا بر اساس محتوایشان فضای موردنیاز خود را اشغال کنند. در ردیف سوم نیز submenu-bottom قرار گرفته است که آن هم فضا را به‌صورت مساوی بین آیتم‌ها تقسیم کرده است.

۳- محتوا را در قالب قرار دهید:

در قدم بعدی ساخت مگامنو با css نیاز است تا محتوا را در قالب قرار دهید. در این مرحله تنها کاری که قرار است انجام بگیرد، قرارگیری محتوا نهایی در قالب مگامنو است. در این آموزش ساخت مگامنو با css در submenu-top هر آیتم flex یک لیست نامرتب خواهد داشت. درحالی‌که submenu-bottom تنها یک لیست نامرتب برای چهار مقصد پرطرف‌دار خواهد داشت:

<nav>
<ul class="menu">
<li class="menu-item"><a href="#">Home</a></li>
<li class="menu-item"><a href="#">Holidays</a>
<ul class="submenu">
<li class="submenu-item">
<ul class="submenu-top">
<li class="submenu-top-item thumb-list">
<a href="#" class="submenu-title">Holiday Types</a>
<ul class="submenu-list">
<li>

<img class="submenu-thumbnail" src="https://picsum.photos/id/1067/32/32" alt="City breaks">
<a href="#">City breaks</a>
</li>
<li>
<img class="submenu-thumbnail" src="https://picsum.photos/id/173/32/32" alt="Adventure tours">
<a href="#">Adventure tours</a>
</li>
<li>
<img class="submenu-thumbnail" src="https://picsum.photos/id/1038/32/32" alt="Cruises">
<a href="#">Cruises</a>
</li>
<li>

<img class="submenu-thumbnail" src="https://picsum.photos/id/1015/32/32" alt="Beach holidays">

<a href="#">Beach holidays</a>
</li>
</ul>
</li>
<li class="submenu-top-item desc-list">
<a href="#" class="submenu-title">Holiday packages</a>
<ul class="submenu-list">
<li>
<a href="#">Families</a>
<span class="submenu-desc">Take advantage of our special holiday packages for families.</span>
</li>
<li>

<a href="#">Students</a>
<span class="submenu-desc">Take advantage of our special holiday packages for students.</span>
</li>
<li>

<a href="#">Couples</a>
<span class="submenu-desc">Take advantage of our special holiday packages for couples.</span>
</li>
</ul>
</li>
<li class="submenu-top-item icon-list">
<a href="#" class="submenu-title">Our services</a>
<ul class="submenu-list">
<li>

<i class="fas fa-plane-departure"></i>
<a href="#">Plane tickets</a>
</li>
<li>
<i class="fas fa-car"></i>
<a href="#">Car rental</a>
</li>
<li>
<i class="fas fa-luggage-cart"></i>
<a href="#">Luggage pickup</a>
</li>
<li>

<i class="fas fa-phone-alt"></i>
<a href="#">24/7 customer service</a>
</li>
<li>
<i class="fas fa-dollar-sign"></i>
<a href="#">30-day cancellation policy</a>
</li>
</ul>
</li>

<li class="submenu-top-item">
<a href="#" class="submenu-title">Last minute offers</a>
<ul class="submenu-list">
<li><a href="#">New York</a></li>
<li><a href="#">Stockholm</a></li>
<li><a href="#">Madrid</a></li>
<li><a href="#">Buenos Aires</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</li>

</ul><!-- End .submenu-top -->
</li><!-- End .submenu-item-->
<li class="submenu-item">
<a href="#" class="submenu-title">Trending destinations</a>
<ul class="submenu-bottom">
<li class="submenu-bottom-item">
<figure>

<img src="https://picsum.photos/id/1016/640/260">
<figcaption><a href="#">Mountains</a></figcaption>
</figure>
</li>
<li class="submenu-bottom-item">
<figure>
<img src="https://picsum.photos/id/1040/640/260">
<figcaption><a href="#">Castles</a></figcaption>
</figure>
</li>

<li class="submenu-bottom-item">
<figure>
<img src="https://picsum.photos/id/1039/640/260">
<figcaption><a href="#">Waterfalls</a></figcaption>
</figure>
</li>

<li class="submenu-bottom-item">
<figure>
<img src="https://picsum.photos/id/164/640/260">
<figcaption><a href="#">Historical towns</a></figcaption>
</figure>
</li>
</ul>
</li><!-- End .submenu-item -->

</ul>
</li>
<li class="menu-item"><a href="#">About</a></li>
<li class="menu-item"><a href="#">Blog</a></li>
<li class="menu-item"><a href="#">Contact</a></li>
</ul>
</nav>

در آموزش ساخت مگامنو با css که در قسمت بالا به آن اشاره کردیم، از آیکون‌های Font Awesome استفاده شده است.

نتیجه‌گیری

مگامنوها یکی از آیتم‌های جذاب و البته سخت برای پیاده‌سازی در صفحات وب هستند. هرکدام از این مگامنوها دارای زیر منوهایی بوده که حاوی متن، عکس و … خواهند بود. استفاده از این مگامنوها مزایای زیادی برای وب‌سایت‌های مختلف دارد؛ ازاین‌رو بسیاری از افراد علاقه‌مند هستند تا با ساخت مگامنو با css چنین آیتم‌های سنگینی را پیاده‌سازی کنند. ما در این مقاله به‌صورت قدم‌به‌قدم ساخت مگامنو با css را در اختیار شما قرار دادیم.

سؤالات متداول