مگا منو برای سایتهایی که دارای موضوعات زیادی در قسمت دسته بندی مطالب هستند بسیار پر کاربرد می باشد چرا که با توجه به عرض زیاد مگا منو میتوانید زیر منوهای زیادی را در آن قسمت قرار دهید. در این مقاله به آموزش ایجاد مگا منو با قابلیت رسپانسیو خواهیم پرداخت.
ابتدا یک سند html ایجاد میکنیم .
سپس کد های خود را اغاز میکنیم در ابتدا ما باید تمام منو را در یک تگ والد قرار دهیم که در اینجا از تگ div استفاده میکنیم و به ان کلاس با اسم nav را میدهیم به این صورت
<div class=”nav”> </div>
سپس کد های خود را در ان قرار میدهیم برای منوی اصلی یک تگ ul باز میکنیم و به ان کلاس nav-ul را میدهیم
<ul class=”nav-ul”> </ul>
حالا در تگ ul از ساختار اصلی ul استفاده میکنیم یعنی در ان برای اضافه کردن عناصر از تگ li در درون ul استفاده میکنیم به این صورت
<li class=”li-menu”><a class=”a-menu”>خانه</a></li>
<li class=”li-menu”><a class=”a-menu”>محصولات</a></li>
<li class=”li-menu”><a class=”a-menu”>پوشاک</a></li>
خب در اینجا مشاهده میکنید که من به تگ ها کلاس li-menu و a-menu را داده ام دلیل این کار این است که بعدا در فایل css بتوانم به ان ها استایل بدهم شاید سوال دیگری پیش بیاید که چرا در تگ li از a استفاده کرده ام دلیل این کار این است که اگر تگ a استفاده نکنیم صرفا یه متن داریم که لیست شده است نه یه منو که حالت لینک دارد برای متوجه شدن در ادیتور خودتان تگ a را حذف کنید و فقط درون تگ li بنویسید محصولات... نتیجه را مشاهده کنید خب میپردازیم به ادامه بحث..!
تا اینجا منو ها را اضافه کرده ایم (فعلا کاری به css نداریم) حالا زیر منو ها را اضافه میکنیم زیر منوی اول برای این کار به انتهای تگ li و بعد تگ بسته شدن </a> را باز میکنیم (هر li که میخواهید زیر منو داشته باشد به ان کد هارا اضافه کنید) و درون آن یه ul و li دیگر با کلاس sub اضافه میکنیم به این صورت
<ul class="ul-sub">
<li class="li-sub"><a href="" class="a-sub">test1</a></li>
<li class="li-sub"><a href="" class="a-sub">test2</a></li>
<li class="li-sub "><a href="" class="a-sub">test3</a></li>
</ul>
تا اینجا ما sub منو را اضافه کرده ایم حالا به سراغ کد های css میرویم ..
به تگ قبل head فایل css را شناسایی میکنیم با این قطعه کد
<link rel="stylesheet" href="style.css">
در قسمت href ادرس فایل css را که ساختیم میدهیم کل کد html تا به این لحظه
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class=”nav”>
<ul class=”nav-ul”>
<li class=”li-menu”><a class=”a-menu”>خانه</a></li>
<li class=”li-menu”><a class=”a-menu”>محصولات</a>
<ul class="ul-sub">
<li class="li-sub"><a href="" class="a-sub">test1</a></li>
<li class="li-sub"><a href="" class="a-sub">test2</a></li>
<li class="li-sub "><a href="" class="a-sub">test3</a></li>
</ul>
</li>
<li class=”li-menu”><a class=”a-menu”>پوشاک</a></li>
</ul>
</div>
</body>
</html>
حالا وارد فایل خودماون میشویم با ادیتور ویژوال استودیو و به کلاس nav استایل میدهیم به این صورت که برای صدا زدن کلاس از علامت . استفاده میکنیم سپس کروشه باز و بسته به قطعه کد زیر دقت کنید:
.nav{}
اکنون کد های خود را درون کروشه ها مینویسیم!
.nav{
width: 100%;
float: right;
background-color: #f7f8fa;
border-bottom: 1px solid #e3e4e5;
border-top: 1px solid #eff0f2;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
در بالا ما به width مقدار 100% را دادیم تا کل عرض صفحه را بگیرد و چون معمولا عناصر سمت چپ هستن با کمک float:right ان را به سمت راست اوردیم با کمک background-color به منوی خود رنگ دادیم همچنین تگ border-bottom یک حاشیه پایینی برای زیبایی منوی ما اینجاد میکند به طول 1 px همچنین همین کار را border-top انجام میدهد اما به سمت بالا box-shadow هم برای سایه انداخت بر حاشیه منو برای زیبا سازی میباشد خب به ادامه کد میپردازیم
.li-menu{
list-style: none;
float: right;
height: 60px;
margin-top: -16px;
line-height: 60px;
text-align: center;
margin-right: 2px;
width: 120px;
}
در کد بالا ما اگر قبل اینکه css را اضافه کنید سند html را در مرورگر دیده باشید میبینید که نقطه های سیاه کنار نوشته ها هستند برای پاک کردن انها از کد list-style:none استفاده میکنیم همچنین float در اینجا رفتاری متفاوت را از خود نشان میدهد در این کد float باعث عمودی شدن نوشته میشود margin برای فاصله دادن به عناصر میباشد line-height برای تنظیم نوشته به صورت افقی میباشد text-align موقعیت نوشته را مشخص میکند اینکه راست باشد یا چپ یا وسط ادامه ی کد
.a-menu{
float: right;
width: 120px;
text-decoration: none;
color: #4D4D4D;
-webkit-transition: .5s all;
transition: .5s all;
}
در کد بالا text-decoration:none خط های زیر نوشته ها و لینک ها را از بین میبرد همچنین color رنگ نوشته ها را تعیین میکند در مورد transition هم جلو تر میگوییم فعلا به ادامه کد میپردازیم
.a-menu:hover{
background-color: #FFFFFF;
color: #ff2551;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
خب اگر کد transition را در کد بالاتر حذف کنید و این کد بالا را اضافه کنید میبینید که در چشم بر هم زدنی تغییرات اعمال میشود یعنی وقتی hover میکنید به صورت خیلی خشک بک گراند تغییر میکند کار transition این است که تغییرات را از حالت خشک در میاورد و یه حالت انیمیشنی به ان میدهد متد :hover هم یه سلکتور میباشد که میگوید اگر نشانه گر روی عصر مورد نظر رفت این استایل را بده مثلا در کد بالا گفته شد اگه نشانه گر روی a-menu رفت رنگ متن را عوض کن و به ان پس زمینه بده همچنین کمی هم سایه به قسمت پایینی بده .. ادامه ی کد :
.ul-sub{
list-style: none;
width: 100%;
background-color: #FFFFFF;
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.12);
position: absolute;
margin-top: 48px;
margin-left: -41px;
display: none;
}
در کد بالا position موقعیت عنصر را مشخص میکند به عنوان مثال absolute یعنی عنصر شناور باشد و دیگر محدود به والد خود نباشد همچنین display نوع نمایش ان را مشخص میکند که گزینه none به معنا نمایش ندادن عنصر است
.li-sub{
list-style: none;
float: right;
height: 60px;
line-height: 60px;
text-align: center;
margin-right: 2px;
width: 120px;
}
.a-sub{
float: right;
width: 120px;
text-decoration: none;
color: #4D4D4D;
-webkit-transition: .5s all;
transition: .5s all;
}
.a-sub:hover{
box-shadow: inset 0px -2px 0px #ff2551 ;
}
در اینجا هم مانند چند خط قبل به a و li ها استایل مخصوصشان را داده ایم
.li-menu:hover .ul-sub{
display: block;
}
کد بالا بسیار مهم است در اینجا ما گفتیم اگر نشانه گر بر روی li-menu رفت یه استایل زیر را به ul-sub بده display:block متضاد display:none است یعنی نمایش بده
خب تا اینجا ما کد های منو و ساب منو را نوشتیم نوبت به مگا منو میرسد دوباره به کد های html بر میگردیم و این قطعه کد را درون یکی از li های ساب منو اضافه میکنیم
<div class="rows">
<table>
<tbody>
<tr>
<td class="td-4 "><img src="test.png" alt="" class="img"></td>
<td class="td-3 td"> <ul class="ul-table">
<li class="title "><a href="">فکری</a></li>
<li class="item li"><a href="">اسباب بازی</a></li>
<li class="item li"><a href="">معما</a></li>
<li class="item li"><a href="">شعر</a></li>
</ul><div class="clearfix"></div></td>
<td class="td-2 "> <ul class="ul-table">
<li class="title "><a href="">فکری</a></li>
<li class="item li"><a href="">اسباب بازی</a></li>
<li class="item li"><a href="">معما</a></li>
<li class="item li"><a href="">شعر</a></li>
</ul><div class="clearfix"></div></td>
<td class="td-1 td">
<ul class="ul-table">
<li class="title "><a href="">فکری</a></li>
<li class="item li"><a href="">اسباب بازی</a></li>
<li class="item li"><a href="">معما</a></li>
<li class="item li"><a href="">شعر</a></li>
</ul>
<div class="clearfix"></div>
<ul class="ul-table">
<li class="title "><a href="">فکری</a></li>
<li class="item li"><a href="">اسباب بازی</a></li>
<li class="item li"><a href="">اسباب بازی</a></li>
<li class="item li"><a href="">معما</a></li>
<li class="item li"><a href="">معما</a></li>
<li class="item li"><a href="">شعر</a></li>
<li class="item li"><a href="">شعر</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</li>
</ul>
حال به شرح کد بالا میپردازیم ابتدا یک div با عنوان rows ساختیم که مگا منو در ان قرار بگیرد سپس از تگ table کمک گرفتیم تا ردیف های منو در ان باشد همچنین توسط tr یک سطر ساختیم و در ان چهار td قرار داده ایم که قرار است چهار بخش مگا منو ما باشند همچنین در ان ul و li قرار داده ایم تا متن ها را به صورت لیستی نمایش دهیم حال به کد های css برگشته و استایل ها را مینویسیم
.rows{
width: 100%;
background-color: red;
height: 400px;
margin-top: 61px;
text-align: center;
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.12);
border-radius: 0px 0px 5px 5px;
float: right;
}
در بالا border-radius کار گرد کردن لبه های تیز div را به ما میدهد
.td-4,.td-3,.td-2,.td-1{
background-color: #FCFCFC;
width:800px;
height: 400px;
}
.td-3,.td-2,.td-1{
border-left: 1px solid #E9E9E9;
}
.td-3,.td-1{
background-color: #f8f8f8;
}
.td-1{
border-radius: 0px 0px 5px 0px;
}
.td-4{
border-radius: 0px 0px 0px 5px;
}
در کد بالا ما برای td هایی که تعریف کردیم کلاس های جداگانه گذاشتیم و به هرکدام از انها رنگ های خاصی دادیم همچنین طول و عرض ثابتی به انها دادیم
table{
border-spacing:0px !important;
}
اگر تا الان دقت داشته باشید کل منو یه حاشیه داخلی دارد که با کد border-spacing:0px بر طرف میشود البته به یاد داشته باشید کد !important برای اجباری کردن یه قطعه کد است و نباید همه جا استفاده شود
.ul-table{
list-style: none;
float: right;
clear: both;
margin-bottom: 35px;
margin-top: -29px;
}
حال بر روی نوشته های درون مگا منو کار میکنیم
font-weight: bold;
padding-left: 15px !important;
width: 100px;
height: 40px;
line-height: 40px;
text-align: right;
margin-right: 6px;
}
.li{
width: 100px;
height: 33px;
line-height: 33px;
text-align: right;
margin-top: 1px;
}
.li > a{
text-decoration: none;
}
.title > a{
color: #42CAF4 !important;
text-decoration: none;
}
.img {
position: absolute;
z-index: 0;
margin-top: -168px;
margin-left: -115px;
}
.li-sub:hover .rows{
display: block;
}
در کلاس img برای قسمت عکس مگا منو میباشد و کد z-index میزان بر تری ان عنصر را مشخص میکند مثلا اگر مقدار 99999 بگیرد روی همه عنصر ها میاید و اول ان نمایش داده میشود با در اینجا از 0 استفاده کردیم تا اگه نوشته بر روی ان امد مشخص و دیده شود
@media screen and (max-width: 850px) {
.ul-sub {
margin-right: -122px;
margin-top: 91px;
}
}
@media screen and (max-width: 640px){
.img{
display: none;
}
}
@media screen and (max-width: 320px){
.ul-sub {
margin-right: -122px;
margin-top: 136px;
}
}
در سه قطعه کد بالا ما برای واکنشگرا کردن برای هر رزلوشنی یه استایلی نوشته شده برای این کار از کد
@media screen and (max-width: 1000px){{
استفاده میکنیم در داخل کروشه کد هایی که میخوایم اجرا شود را میگذاریم و در قسمت max-width عرض ان را برابر مقدار قرار میدهیم که میخواهیم از زیر ان عرض به بعد کد داخل کروشه اجرا شود
کد html تا اینجا :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
<div class="nav"> <span class="fa fa-bars c"></span>
<ul class="nav-ul">
<li class="li-menu"><a href="" class="a-menu">خانه</a></li>
<li class="li-menu"><a href="" class="a-menu">محصولات</a></li>
<li class="li-menu"><a href="" class="a-menu">تست</a></li>
<li class="li-menu"><a href="" class="a-menu">زمین</a>
<ul class="ul-sub">
<li class="li-sub"><a href="" class="a-sub">test1</a></li>
<li class="li-sub"><a href="" class="a-sub">test2</a></li>
<li class="li-sub "><a href="" class="a-sub">test3</a>
<div class="rows">
<table>
<tbody>
<tr>
<td class="td-4 "><img src="test.png" alt="" class="img"></td>
<td class="td-3 td"> <ul class="ul-table">
<li class="title "><a href="">فکری</a></li>
<li class="item li"><a href="">اسباب بازی</a></li>
<li class="item li"><a href="">معما</a></li>
<li class="item li"><a href="">شعر</a></li>
</ul><div class="clearfix"></div></td>
<td class="td-2 "> <ul class="ul-table">
<li class="title "><a href="">فکری</a></li>
<li class="item li"><a href="">اسباب بازی</a></li>
<li class="item li"><a href="">معما</a></li>
<li class="item li"><a href="">شعر</a></li>
</ul><div class="clearfix"></div></td>
<td class="td-1 td">
<ul class="ul-table">
<li class="title "><a href="">فکری</a></li>
<li class="item li"><a href="">اسباب بازی</a></li>
<li class="item li"><a href="">معما</a></li>
<li class="item li"><a href="">شعر</a></li>
</ul>
<div class="clearfix"></div>
<ul class="ul-table">
<li class="title "><a href="">فکری</a></li>
<li class="item li"><a href="">اسباب بازی</a></li>
<li class="item li"><a href="">اسباب بازی</a></li>
<li class="item li"><a href="">معما</a></li>
<li class="item li"><a href="">معما</a></li>
<li class="item li"><a href="">شعر</a></li>
<li class="item li"><a href="">شعر</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</li>
</ul>
</li>
<li class="li-menu"><a href="" class="a-menu">اسمان</a></li>
<li class="li-menu"><a href="" class="a-menu ">ابزار و لوازم خودرو</a></li>
</ul>
</div>
<script src="jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function () {
$(".c").click(function () {
$(".nav-ul").slideToggle();
})
})
</script>
</body>
</html>
حال فایل ایکون را اضافه میکنیم تا برا واکنشگرا ایکون باز و بسته شدن منو نمایش داده شود برای اینکار از این کدها استفاده میکنیم ابتدا فایل فونت ها را دانلود کرده سپس فایل font-awesome.min.css را توسط خط زیر و داخل تگ body اضافه میکنیم به این صورت
<link rel="stylesheet" href="font-awesome.min.css">
سپس باید کد های فونت را به فایل css اضافه کنیم به اول فایل css بر خواهیم گشت و این قطعه کد را اضافه میکنیم
@font-face{
font-family:'FontAwesome';
src:url('fonts/fontawesome-webfont.eot?v=4.4.0');
src:url('fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'),
url('fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'),
url('fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'),
url('fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'),
url('fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
}
خب در کد بالا ما یه فونت با نام font awesome معرفی کردیم سپس توسط کد src مکان فایل ها را به انها شناساندیم در نهایت کدfont-family: FontAwesome; را درون استایل css تگ body مینویسیم
همچنین باید جیکوئری را اضافه کنیم ابتدا ان را دانلود سپس با این کد با اخر و قبل بسته شدن تگ body اضافه میکنیم
<script src="jquery-3.1.1.min.js"></script>
حالا یه تگ script دیگر باز میکنیم و کد های جیکوئری خود را درون ان مینویسیم
$(document).ready(function () {
$(".c").click(function () {
$(".nav-ul").slideToggle();
})
})
در کد بالا ما گفتیم تا زمانی که کلاس c کلیک شد بیا با استفاده از توابع اماده slidetoggle اگر کلاس nav-ul باز بود ان را ببند و اگه بسته بود ان را باز کن
حال دوباره به فایل های ریسپانسیو css بر میگردیم تا تب مگا منو را به صورت واکنشگرا نیز نشان دهیم برای این کار در کد ریسپانسیو زیر 850 پیکسل کد های زیر را اضافه میکنیم
.rows{
display: none !important;
width: 55%;
background-color: #4D4D4D;
float: right;
left: 0;
position: relative;
right: 0;
z-index: 9000;
margin-right: -261px;
margin-top: -2px;
overflow: hidden;
}
.li-sub:hover .rows{
display: block !important;
}
در کد های بالا ما امدیم و برای منو استایل مخصوص تعریف نمودیم به این صورت که position را relative قرار دادیم تا عرض را نگیرد همچنین کد !importnat به این معنی میباشد که این قطعه کد از تمام کد های مشابه در کد های css دیگر اولیت دارد همچنین z-index را برابر با 9000 قرار دادیم تا از همه ی عناصر صفحه بالاتر باشد
در نهایت برای بر طرف کردن یک سری مشکلات کوچک در رزلوشن های خاص این کد ها را در بخش ریسپانسیو اضافه میکنیم
@media screen and (max-width: 480px) {
.rows{
width: 70%;
margin-right: -72px;
}
}
@media screen and (max-width: 449px) {
.rows{
width: 74%;
margin-right: -67px;
}
}
@media screen and (max-width: 398px) {
.rows{
width: 86%;
margin-right: -77px;
}
}@media screen and (max-width: 320px) {
.rows{
width: 70%;
margin-right: -77px;
}
}
و در نهایت کد های زیر را درون فایل jquery خود اضافه میکنیم
setInterval(function () {
if (window.innerWidth >= 900) {
$(".nav-ul").slideDown();
}
if (window.innerWidth <= 900) {
if (count < 1) {
$(".nav-ul").slideUp();
count++;
}
}
},100)
در اینجا ما گفتیم که هر 100 ثانیه چک شود که رزلوشن چند است اگر بالاتر از 900 بود منو را باز کن و اگر پایین تر از 900 بود منو را ببند
موفق باشید
این آموزش توسط شایگان آقاجانی ارسال شده است