آموزش ساخت مگامنو mega menu با CSS3

1396/6/4 علیرضا ابراهیمی 750

مقدمه

با سلام خدمت شما دوستان عزیز و علاقه مندان به آموزش برنامه نویسی و آموزش طراحی وب . من علیرضا ابراهیمی هستم و با آموزشی ویژه تحت عنوان آموزش ساخت مگامنو (Mega Menu) با Css و جاوا اسکریپت  در خدمت شما هستم.

معرفی Mega Menu

مگامنو  (Mega Menu)منویی تقریبا پیچیده با  زیر منوهای متعددی می باشد . در هر زیرمنو از المان های خاصی همچون عکس ، فرم ، دکمه ، جدول و ... استفاده می شود . استفاده از انیمیشن های جذاب و متفاوت زیبایی این منو را افزایش می دهد . 

ساخت Mega Menu  با استفاده ازHTML  و  CSSو Java Script

در ابتدا در سند HTML خود یکUL  ایجاد کرده و کلاسی به نام menu برای آن در نظر می گیریم . سپس برای این المان یک li به آیدی btn ساخته و  لینکی به نام DropDown  را درون آن قرار می دهیم .
<ul class="menu">
<li id="btn">  <a href="#">DropDown</a>  </li> 
 </ul>
به سند CSS خود می رویم و استایل دهی را آغاز می کنیم .
برای #btn خود یک background به رنگ دلخواه درست می کنیم . همچنین padding را برای آن نیز در نظر می گیریم . 
سپس برای سلکتور .menu li ، list-style-type را برابر none قرار می دهیم تا بولت آن را از بین ببریم. 
و بعد از آن سلکتور a را ایجاد می کنیم و طبق کد زیر استایل دهی می کنیم :
#btn{
background-color : #123456;
padding: 15px 30px;
}
.menu li{
list-style-type: none;
}
a{
color: white;
text-decoration : none ; 
}

تا اینجای کار باید دکمه ی شما به این شکل درآمده باشد :

css dropdown design

 
می بینیم که دکمه ی ما تا انتهای صفحه کشیده شده است. برای حل این مشکل باید به این صورت عمل کنید :
#btn{
float: left;
}
حالا می بینیم که در حال حاضر عرض دکمه  برابر با padding ای هست که برای آن تعریف کرده بودیم  (30px):
  

css dropdown menu button

 

ساخت زیرمنوهای مگا منو

بعد از لینکی که برای li خود ایجاد کرده بودیم ، یک ul  دیگر نیز درست می کنیم و کلاسی تحت عنوان inmenu را برای آن در نظر می گیریم . سپس برای این ul ، 5 عدد li  درست میکنیم : 
<ul class="menu">
  <li id="btn">
    <a href="#">DropDown</a>
    <ul class="inmenu">
     <li class="form">
      <a href="#">Form</a>
     </li>
     <li>
      <a href="#">Gallery</a>
     </li>
     <li>
       <a href="#">Services</a>
     </li>
     <li>
       <a href="#">Videos</a>
     </li>
     <li>
       <a href="#">News</a>
     </li>
   </li>
 </ul>
</ul>
تا به اینجا منوی ما به این شکل درآمده است :

css deopdown submenu

 

می بینیم که مشکلاتی برای این زیرممنوی مگامنوی ما ایجاد شده است مثلا این زیرمنو بر روی ارتفاع والد خود تاثیر گذاشته و به نحوی وابسته است . برای حل این مشکل باید position این زیرمنو را نسبت به دکمه ی خود درآوریم . به این نحو که برای دکمه  یک position به مقدار relative در نظر گرفته و برای زیرمنو هم یک position به مقدار absolute درآوریم . در این حالت زیرمنو دیگر وابستگی ای به والد خود ندارد بنابراین باید جداگانه برای آن استایل دهی کنیم :
inmenu{.
position: absolute;
background-color: whitesmoke;
top : 100%;
padding: 0;
left: 0;
width: 100%;
}
inmenu li{.
padding: 12px 23px;
padding-left: 0px; 
}
inmenu li a{.
color: black;
padding-left: 14px;
}
#btn{
position: relative;
}
با این استایل دهی ها منوی ما به این شکل درمی آید : 
   

ساخت مگا منو و زیرمنو در css

بلاخره موقع ساخت انیمیشن هاست . 

می خواهم کاری کنم که وقتی نشانگر موس را بر روی DropDown بردیم زیر منوی آن نمایش داده شود.
برای این کار ابتدا باید زیر منو را مخفی کنیم .برای این کار visibility را برابر با hidden قرار می دهیم . (برای داشتن جلوه ی ویژه نیز از transition ,opacity استفاده شده است .)
.inmenu{
visibility : hidden ;
opacity: 0;
transition: 0.3s;
padding-left:0;
}
سپس با استفاده از کد زیر تایین می کنیم که وقتی به اصطلاح دکمه را hover کردیم ، visibility زیر منو برابر با visible شود: 
.menu:hover .inmenu{
visibility : visible ; 
opacity: 1;
transition: 0.3s;
}
حالا می خواهیم وقتی هر یک از li های زیرمنو را hover کردیم ، تغییراتی همچون تغییر رنگ لینک  و نمایش دادن border سمت چپ رخ دهد + تغییر رنگ دکمه DropDown :
#btn:hover{
background-color: #123456;
transition: 0.3s;
}
.inmenu li:hover a{
color: green;
transition: 0.3s;
}
.inmenu li:hover {
border-left: 3px solid green;
}
حالا می خواهیم برای اولین li خود یک زیر منو درست کنیم (Form):
به این نحو که بعد از تگ لینک ، یک ul ایجاد کرده و درون آن یک جدول ساخته و از المان های فرم پر می کنیم سپس برای آن استایل دهی می کنیم : (از تگ li درون ul استفاده نمی کنیم چون نیازی به چند بخش کردن صفحه نیست.)
li class="form"><a href="#">Form</a>>
<ul class="inform">
<table>
<form>
<tr>
<td><input type="text" id="name" placeholder="Your Name">
</td>
<td></td>
<td><input type="text" id="lastname" placeholder="Your LastName">
</td> </tr>
<tr><td colspan="3"><textarea id="areaone" placeholder="Your Comment"></textarea></td></tr>
<tr>
<td><div id="left"><lable class="ll">Check1</lable><input type="checkbox" id="check">
<lable class="ll">Check2</lable><input type="checkbox" id="check">
<lable class="ll">Check3</lable><input type="checkbox" id="check"></div>
</td>
<td></td>

<td><div id="right"><lable class="rl">Radio1</lable><input type="radio" id="radio" name="a">
<lable class="rl"> Radio2</lable><input type="radio" id="radio" name="a">
<lable class="rl"> Radio3</lable><input type="radio" id="radio" name="a"></div>
</td>
</tr><tr><td>

<input type="reset" id="re"></td><td>
</td><td>
<input type="submit" Value="Submit" id="sub"></td>
</tr>
<tr><td colspan="3"><textarea placeholder="Write Some For Us..." id="areatwo"></textarea></td></tr></form>
</table>
</ul>
</li>
حالا استایل دهی را شروع می کنیم :
.form{
position: relative;
}
.inform{
height: 800%;
position: absolute;
background-image: url("Lighthouse.jpg");
background-size: 100%;
top:0;
width: 400%;
padding: 0;
left: 100%;
}
input[type=text]{
padding: 10px 15px;
}
#sub , #name , .ll , #check{
float: left;
}
#re , #lastname , .rl , #radio{
float: right;
}
#areaone , #areatwo{
margin: auto;
display: block;
font-family: fantasy;
font-size: 14px;
}
table{
width :90%;
margin: auto;
}
#areaone{
width : 50%;
height: 100px;
text-align: center;

}
#areatwo{
width: 100%;
height: 78px;
background-color: transparent;
outline: 0;
border: none;
color: white;
}
lable{
color: white;
}
#sub,#re{
background-color: green;
border-radius: 50%;
padding: 10px;
color: white;
}
تا الان باید با این استایل دهی ها همچین چیزی ساخته باشید :

css megamenu dropdown

حالا می خواهم با استفاده از transform در css و جاوااسکریپت یک انیمیشن برای المان های فرم درست کنم . در ایتدا با استفاده از transform : translate المان ها را جابجا می کنم :

#name{
transform : translate(-187px ,-50px);
transition: 0.9s;
border-radius: 0 15px 0 15px;
}
#lastname{
transform : translate(187px ,-50px);
transition: 0.9s;
border-radius: 15px 0 15px 0;

}
#areaone{
transform : translate(0px,-180px);
transition: 0.9s;

}
#left{
transform : translate(-228px ,0px);
transition: 0.9s;
}
#right{
transform : translate(228px ,0px);
transition: 0.9s;
}
#sub{
transform : translate(-340px ,140px);
transition: 0.9s;
}
#re{
transform : translate(340px ,140px);
transition: 0.9s;
}
سپس overflow را برابر hidden گذاشته تا المان هایی که از زیرمنوی فرم بیرون هستند پنهان شوند :
.inform{
overflow : hidden;
}
سپس به سند جاوااسکریپت خود می رویم و اسکریپت را به گونه ای تعریف می کنیم که وقتی تابع مورد نظر اجرا شد ، کلاس جدیدی برای هر المان تعریف شود :
function animations(){
document.getElementById("name").className ="new";
document.getElementById("lastname").className ="new";
document.getElementById("areaone").className ="new";
document.getElementById("areatwo").className ="new";
document.getElementById("check").className ="new";
document.getElementById("radio").className ="new";
document.getElementById("sub").className ="new";
document.getElementById("re").className ="new";
document.getElementById("left").className ="new";
document.getElementById("right").className ="new";
}
سپس برای کلاس new در CSS استایل نویسی می کنیم به گونه ای که تمامی المان ها به جای خود بازگردند :
.new{
transform : translate(0px,0px) !important;
transition: 0.9s;
}
استفاده از !important به این علت است که قبلا به آن translate ای داده بودیم و حالا برای سرپیچی از دستور قبلی خود باید از این دستور استفاده کنیم .
سپس تابع را طوری تعریف می کنیم که وقتی بر روی inmenu کلیک کردیم ، انیمیشن اجرا شود .
<ul class="inform" onclick="animations()">
خیلی خب ؛ حالا می خواهیم تعدادی hover برای چند المان تعریف کنیم :
#name:focus{
border-radius: 15px 0 15px 0;
transition: 0.9s;
}
#lastname:focus{
border-radius: 0 15px 0 15px;
transition: 0.9s;
}
#re:hover , #sub:hover{
background-color: orange;
transition: 0.3s;
}
در پایان کار می خواهیم زیرمنوی فرم را پنهان کنیم تا زمانی که بر روی form ، hover کنیم :
.inform{
visibility: hidden;
opacity: 0;
transition: 0.3s;
left: 300%;
}
.form:hover .inform{
visibility: visible;
opacity: 1;
transition: 0.3s;
left: 100%;
}