آموزش ساخت مگا منو با CSS به صورت ویدیویی
در این ویدیو سعی کرده‌ایم به صورت کامل به آموزش ساخت مگا منو با CSS بپردازیم. امیدواریم که با مشاهده آن بتوانید از این قابلیت در سایت خود بهره‌مند شوید.
مگا منو چیست؟
برای اینکه موضوع مقاله بهتر برای شما عزیزان روشن گردد، ابتدا به تعریف مگا منو می‌پردازیم. مگا منو چیست؟ مگا منو در واقع منویی در میان گزینه‌های ناوبری1navigation وب‌سایت است که وقتی کاربران روی آن کلیک می‌کنند یا موس خود را بر روی آن می‌برند2hover به معرض نمایش در می‌آید. این منوها معمولاً عریض بوده و شاید کل عرض صفحه مرورگر را بپوشانند. در داخل آنها نیز لینک‌های فراوانی دیده می‌شود که شاید در چند ستون در کنار یکدیگر قرار بگیرند.
البته این موضوع بستگی به نحوه طراحی سایت شما نیز دارد. ممکن است بخواهید توضیحات خاصی را در داخل آنها نمایش دهید یا آنکه از تصاویر یا آیکون‌های نمایشی برای جذاب‌ترشدن استفاده کنید یا حتی فرم‌هایی مانند فرم عضویت در خبرنامه سایت خود را در داخل مگا منو جای دهید. در زیر تصویر یک نمونه از این منوها را مشاهده می‌کنید.
همان‌طور که در این تصویر مشاهده می‌کنید، با کلیک بر روی گزینه Resources در منوی سایت، مگا منوی عریضی باز می‌شود که گزینه‌های مختلفی در قالب چهار ستون در آن جای گرفته‌اند.
فواید و مضرات مگا منو
در این قسمت، پیش از آنکه بخواهیم عملاً درگیر کدهای مربوط به آموزش ساخت مگا منو با CSS شویم، قصد داریم اندکی در خصوص فواید و مضرات مگا منوها سخن کنیم. به این ترتیب شما بسته به نیاز و ساختار وب‌سایت خود، بهتر می‌توانید در مورد استفاده کردن یا نکردن از آنها تصمیم بگیرید.
فواید استفاده از مگا منو
از جمله فواید و مزیت‌های استفاده از مگا منوها در طراحی سایت، می‌توان به موارد زیر اشاره کرد.
ناوبری آسان‌تر
با توجه به اینکه شما می‌توانید لینک‌های فراوانی را در مگا منوی سایت قرار بدهید، امکان دسته‌بندی بهتر مطالب و صفحات فراهم می‌شود. همین امر باعث می‌شود که کاربران بهتر بتوانند در سایت شما به جستجوی مطالب مورد انتظار خود بپردازند.
بهبود تجربه کاربری
با توجه به توضیحات بخش قبل، مگا منوها به کاربران سایت کمک می‌کنند تا نگاه جامع‌تری به وب‌سایت شما داشته باشند. در واقع با ساختار و محتوای سایت شما در یک نگاه آشنا می‌شوند. نیازی به جستجو در صفحات مختلف سایت و اسکرول کردن ندارند. در نتیجه این تکنیک طراحی سایت که اگر به درستی به کار گرفته شود به نوعی از تکنیک‌های بهینه کردن سایت نیز محسوب می‌گردد، می‌تواند رضایت کاربران را افزایش دهد. نتیجه آنکه بهبود تجربه کاربری حاصل می‌شود.
کمک به زیبایی سایت
گاهی اوقات وب‌سایت‌های پیچیده و با طراحی‌های خاص بیشتر نظر مخاطبان را جلب می‌کنند. اگر مگا منوها نیز به درستی طراحی شده باشند، می‌توانند حس پیچیدگی و مدرن بودن را به مخاطب القا کنند. همچنین به‌کارگیری تصاویر و المان‌های بصری دیگر مانند آیکون‌ها و افکت‌ها در مگا منو باعث افزایش زیبایی و تأثیر مناسب‌تر روی مخاطب می‌شود.
معایب استفاده از مگا منو
در کنار فوایدی که ذکر شد، برخی معایب یا نکات منفی هم برای به‌کارگیری مگا منو در سایت ذکر می‌گردد. لذا ما نیز در این مقاله «آموزش ساخت مگا منو با CSS» به پاره‌ای از آنها اشاره می‌کنیم.
پیچیدگی بیشتر
استفاده از مگا منو در سایت چه از نظر طراحی و چه از نظر پیاده‌سازی ممكن است زمان‌بر باشد. لذا یکی از چالش‌های فنی و نکات منفی مگا منوها همین بحث پیچیدگی آنها است. به خصوص اگر سایت شما حجیم بوده و محتوای پویای فراوانی داشته باشد، این مسئله شما را به زحمت می‌اندازد.
مشکلات مربوط به دسترسی
نکته دیگر در استفاده و به‌کارگیری مگا منو، مشکلاتی است که ممکن است از نظر دسترسی کاربران ایجاد کند. به خصوص برای کاربرانی که با محدودیت‌ها و ناتوانی روبرو هستند و از تکنولوژی‌های خاصی برای دستیابی به محتوای سایت کمک می‌گیرند. این‌گونه تکنولوژی‌ها که در اصطلاح assistive technologies نامیده می‌شوند، ممکن است در یافتن اطلاعات درون مگا منوها با مشکل مواجه شوند. همچین کاربرانی که تنها از صفحه کیبورد برای گشت و گذار در سایت‌ها کمک می‌گیرند (بدون موس) نیز احتمالاً با این‌گونه منوها دچار چالش می‌شوند.
تأثیر منفی بر عملکرد سایت
مشکلات سرعت سایت نیز از جمله معایب استفاده از مگا منو محسوب می‌گردد. این مسئله به خصوص اگر از محتوای حجیم، فایل‌های رسانه‌ای یا انیمیشن‌های پیچیده در مگا منو استفاده گردد، تشدید می‌شود. در نتیجه ممکن است سرعت و عملکرد سایت پایین آمده و باعث نارضایتی کاربران گردد. چنین مسائلی در نهایت اگر بر طرف نگردد، می‌تواند نرخ بازدید‌کننده و مشتری سایت شما را پایین بیاورد.
آموزش ساخت مگا منو با CSS (کدنویسی)
اکنون که تا حدودی متوجه شده‌اید مگا منو چیست و تئوری مسئله برای شما روشن شد، بهتر است بحث را مقداری کاربردی‌تر کرده و در عمل با کدنویسی به آموزش ساخت مگا منو با CSS بپردازیم. در این بخش ما به کمک فایل‌های html و css و کدهای درون آنها به طراحی یک مگا منوی ساده می‌پردازیم. البته که محتوای درون این منو باید با توجه به سایت شما جایگزین گردد.
افزودن کد html
خب برای شروع بعد از ایجاد فایل‌های html و css در پوشه دلخواه، باید کدهای html که ساختار مگا منو را شکل می‌دهند، وارد کنیم. تمامی کدهای html که برای این مثال لازم دارید، در زیر مشاهده می‌کنید.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css-mega</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="logo-container">
<a href="#logo"><img src="logo.svg" alt="logo of the site"></a>
</div>
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#news">Contact</a>
<a href="#news">About Us</a>
<a href="#news">Privacy Policy</a>
<div class="dropdown">
<button class="dropbtn">Books
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="header">
<h2>Main categories</h2>
</div>
<div class="row">
<div class="column">
<h3>mathematics</h3>
<a href="https://info-book.ir/summary/22">hmble Pi</a>
<a href="https://info-book.ir/summary/27">distribution theory</a>
<a href="https://info-book.ir/summary/24">companion to mathematics</a>
</div>
<div class="column">
<h3>programming</h3>
<a href="https://info-book.ir/summary/1">python crash course</a>
<a href="https://info-book.ir/summary/25">learning SQL</a>
<a href="https://info-book.ir/summary/20">learning php, mysql</a>
</div>
<div class="column">
<h3>web design</h3>
<a href="https://info-book.ir/summary/37">javaScript from frontend to backend</a>
<a href="https://info-book.ir/summary/5">basics of web design</a>
<a href="https://info-book.ir/summary/8">javaScript the definitive guide</a>
</div>
</div>
</div>
</div>
</div>
<div class="content-part">
<h3>Mega Menu tutorial</h3>
<p>Hover over the "Books" link to see the mega menu.</p>
</div>
</body>
</html>همچنان که در کدهای فوق مشاهده می‌کنید، ساختار آن را می‌توان به چند بخش تقسیم کرد. قسمت مربوط به محتوای مگا منو در داخل یک تگ div با کلاس dropdown قرار داده شده‌اند.
در این قسمت ما از یک تگ button با کلاس dropbtn استفاده کرده‌ایم که کلمه Books را در خود جای داده است. قرار است وقتی کاربر موس خود را روی این دکمه در منوی سایت می‌آورد، محتوای موجود در داخل تگ div با کلاس dropdown-content به نمایش درآید. این محتوا همان محتوای مگا منو سایت است که در این مثال دسته‌بندی‌های کتاب‌های موجود در این سایت را نشان خواهد داد. اما چگونگی نمایش و محوشدن آن با حرکت موس کاربر، به کمک CSS امکان‌پذیر خواهد بود!
استایل‌دهی اولیه با CSS
بعد از ایجاد ساختار و محتوای مگا منو شروع به استایل‌دهی آن به کمک CSS می‌کنیم. در ابتدا در فایل css خود کدهای زیر را وارد کنید.
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* defining width and margins for better styling */
body {
margin: 0;
}
.logo-container {
background-color: rgb(27,52,42);
width: 80%;
margin: 0 auto;
}
.content-part {
width: 80%;
margin: 0 auto;
padding-top: 16px;
}
.navbar {
width: 80%;
margin: 0 auto;
overflow: hidden;
background-color: rgb(27,52,42);
font-family: Arial, Helvetica, sans-serif;
}این کدها صرفاً برای ایجاد استایل‌های اولیه و ابعاد منوی ناوبری و محتوای سایت استفاده شده‌اند. همان‌طور که مشاهده می‌کنید، سعی شده منو و محتوا عرضی در حد ۸۰ درصد صفحه داشته و مارجین و پدینگ مناسب بدست آورند.
استایل مناسب به آیتم‌های منو
با توجه به اینکه معمولاً در منوی ناوبری سایت‌ها، لینک صفحات و آیتم‌های درون منو به صورت افقی در کنار یکدیگر قرار می‌گیرند، نیاز است که به کمک ویژگی‌ها و قابلیت‌های CSS این کار را انجام دهیم.
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: rgb(20, 200, 83);
}در کد فوق ملاحظه می‌کنید که برای رسیدن به این هدف از ویژگی float: left استفاده شده است. با این کار تگ‌های a موجود در منو و همچنین آیتم آخری که کلمه Books را در خود جای داده بود، به صورت افقی در منوی ناوبری سایت ظاهر می‌شوند.
تنظیم نحوه نمایش مگا منو
در ادامه آموزش ساخت مگا منو با CSS و برای آنکه مگا منوی ما هنگام قرارگیری موس کاربر روی آیتم موردنظر (در اینجا کلمه Books) ظاهر شود و با برداشتن موس محو گردد، از کد زیر کمک می‌گیریم و آن را به ادامه کدهای قبلی در فایل css اضافه می‌کنیم.
.dropdown-content {
display: none;
position: absolute;
background-color: rgb(20, 235, 103);
width: 80%;
left: 10%;
-webkit-box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content .header {
background: rgb(20, 200, 83);
padding: 16px;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}این کدها نشان می‌دهند که این فرآیند به کمک ویژگی display در CSS امکان‌پذیر می‌گردد. یعنی در ابتدا ما المان با کلاس dropdown-content را از نظر کاربر محو می‌کنیم. سپس در ادامه تعریف کرده‌ایم که هر جا hover روی المان با کلاس dropdown رخ داد، المان محو شده ظاهر گردد (به کمک display: block).
مرتب‌سازی نمایش داخل مگا منو
در مرحله آخر از کدهای CSS خود قرار است ستون‌های مربوط به محتوای داخل مگا منو را به صورت مناسب ایجاد کنیم. برای نمایش ستونی و در کنار هم محتوا، در این بخش نیز از ویژگی float در CSS استفاده کرده‌ایم.
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: rgb(23, 135, 20);
height: 250px;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: rgb(36, 222, 12);
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}این کار به کمک کلاس‌های column که در ساختار html کدهای خود به برخی المان‌ها داده بودیم، امکان‌پذیر می‌شود. همچنین مقدار عرض آنها را هم به صورت برابر تعریف کرده‌ایم که در صفحه سایت و هنگام باز شدن مگا منو، نمایش قابل قبولی داشته باشند. در ادامه نحوه نمایش مگا منو و خروجی کار را مشاهده می‌کنید.
جمع‌بندی
در این مقاله به آموزش ساخت مگا منو با CSS پرداختیم. در ابتدا توضیح مختصری در پاسخ به پرسش «مگا منو چیست؟» ارائه کردیم. سپس در مورد فواید و معایب استفاده از مگا منو در سایت‌ها صحبت کردیم. در پایان نیز با ارائه کدهای html و css مربوطه، عملاً چگونگی ایجاد مگا منو در سایت را آموزش دادیم. اگر به موضوع‌های مرتبط با CSS علاقه دارید، پیشنهاد می‌کنیم مقاله «آموزش ویدیویی اضافه کردن CSS به وردپرس» را نیز بررسی کنید.
