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

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

نوشته شده توسط: تیم فنی نیک آموز
۲۳ مهر ۱۳۹۸
زمان مطالعه: 10 دقیقه
۳
(۴)

مقدمه

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

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

امکان ساخت مگامنو به کمک Flexbox وجود دارد
امکان ساخت مگامنو به کمک Flexbox وجود دارد

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

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

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

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

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

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

اما شاید برخی از افراد بخواهند بدون استفاده از افزونه‌ای خاص، و با آموزش ساخت مگامنو با css این کار را انجام دهند. ما در ادامه آموزش ساخت مگامنو با css می‌خواهیم نحوه پیاده‌سازی مگامنو را به کمک 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 برای وب‌سایت‌های مختلف

حال به کمک این قطعه کد آموزش‌داده‌شده در مقاله آموزش ساخت مگامنو با 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

همان‌طور که در این آموزش ساخت مگامنو با 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
مگامنو ساخته شده به کمک آموزش ساخت مگامنو با css

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

نتیجه‌گیری

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

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

چگونه می‌توانم یک مگا منو در CSS ایجاد کنم؟

شما می‌توانید به کمک Flexbox یک مگامنو جذاب و پیچیده را در CSS ایجاد کنید.

چگونه یک منوی انتخاب در CSS ایجاد می‌کنید؟

شما می‌توانید از هر عنصری برای باز کردن و ایجاد یک منو انتخاب در CSS استفاده کنید. برای مثال می‌توانید از یک عنصر <button>، <a> یا <p> استفاده کنید.

چگونه یک منوی رستوران در HTML و CSS ایجاد کنم؟

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

چگونه یک مگامنو به وب‌سایت خود اضافه کنم؟

شما می‌توانید از افزونه UberMenu برای ایجاد مگامنو در وب‌سایت‌های وردپرسی استفاده کنید. همچنین قطعه کد مناسب برای پیاده‌سازی مگامنو در سایر وب‌سایت‌ها در این مقاله آموزش‌داده‌شده است.

 

چه رتبه ای می‌دهید؟

میانگین ۳ / ۵. از مجموع ۴

اولین نفر باش

title sign
معرفی نویسنده
تیم فنی نیک آموز
مقالات
255 مقاله توسط این نویسنده
محصولات
0 دوره توسط این نویسنده
تیم فنی نیک آموز
پروفایل نویسنده
title sign
معرفی محصول
title sign
دیدگاه کاربران

وبینار رایگان SQL Server؛ مسیری به سوی فرصت‌های شغلی بی‌شمار       پنج‌شنبه 30 فرودین ساعت 15
ثبت نام رایگان
close-image