screenshot-{domain} {date} {time}
۱

ساخت یک مگا منو به روشی بسیار آسان

به اشتراک بگذارید :
خیلی مواقع هست که برای طراحی سایت خود می خواهید از مگا منو هایی Mega Menu شیک استفاده کنید که در ریسپانسیو هم بتوان به شکلی ساده آن را در کمترین زمان تغییر داد. ولی همیشه چه در ساخت و یا جستجو به دنبال کدی که با ساده ترین شکل که بتوان از آن در هر جا استفاده کرد به مشکل می خوریم و با کد هایی سنگین و دارای CSS های مختلف بر می خوریم که گیج کننده و کلافه کنندست.
امروز می خواهم به شکلی بسیار ساده راه ساخت یک مگا منو شبیه سایت دیجیکالا را در اختیار شما قرار بدهم که بتوانید آن را در هر کجا که میخواهید با کمترین تغییر کد در قالب خود اضافه کنید.

ابتدا کد ها رو در اختیارتون قرار میدهم و بعد توضیحاتی رو به همراه دمو در انتهای مطالب خواهید دید…

کد HTML :

<ul id="main_menu">
<li class="main_list"><a href="">محصولات زیبایی<i class="icon"></i></a>
<ul>
<ol>
<a class="mmmk" href="">
<li>نام دسته۱</li>
</a>
<a href="">
<li class="main_list2">آیتم ۱</li>
</a>
<a href="">
<li class="main_list2">آیتم ۲</li>
</a>
</ol>
<ol>
<a class="mmmk" href="">
<li>نام دسته</li>
</a>
<a href="">
<li class="main_list2">آیتم ۱</li>
</a>
<a href="">
<li class="main_list2">آیتم ۲</li>
</a>
</ol>
</ul>
</li>
<li class="main_list"><a href="">محصولات بهداشتی<i class="icon"></i></a>
<ul>
<ol>
<a class="mmmk" href="">
<li>نام دسته۱</li>
</a>
<a href="">
<li class="main_list2">آیتم ۱</li>
</a>
<a href="">
<li class="main_list2">آیتم ۲</li>
</a>
</ol>
<ol>
<a class="mmmk" href="">
<li>نام دسته</li>
</a>
<a href="">
<li class="main_list2">آیتم ۱</li>
</a>
<a href="">
<li class="main_list2">آیتم ۲</li>
</a>
</ol>
</ul>
</li>
</ul>

کد CSS :

#main_menu
{
    float:right;
    padding:0px;
    width:100%;
    height:37px;
    margin: 0;
    position: relative;
    top: 2px;
    background: #444;
}
#main_menu .main_list
{
    color:#fff;
    list-style-type:none;
    float:right;
    border-left:1px solid #666;
    padding-left:27px;
    padding-right:27px;
    font-family: IRANSANS;
    line-height: 32px
}
#main_menu .main_list a:hover
{
    color:#ffb400 !important;
}
#main_menu .main_list a {
    color: #fff !important;
    text-decoration: none;
}
.main_list ul
{
    background:url('http://aminy.ir/wp-content/gallery/album/stationery-main.png')
    left bottom #fff  no-repeat;
    position: absolute;
    top: ;
    right: 0;
    width:100%;
    padding:0px;
    float:right;
    padding-bottom:10px;
    z-index: 99999999999999999999999;
    border: 1px #ccc solid;
    box-shadow: 0px 2px 5px #d9d9d9;
    border-radius: 0 0 5px 5px
}
.main_list ul ol
{
    float:right;
    padding:0px;
    list-style-type:none;
    margin-left:30px;
    border-left: 1px #eee solid;
    width: 22.2%;
    padding-bottom: 10px;
}
.main_list ul ol:nth-child(4n+0) {
    border-left:1px solid #fff;
}
.main_list ul ol li
{
    line-height:25px;
    font-weight:bold;
    font-size:13px;
    color:#777;
    font-weight: normal;
    text-align: right;
}
.main_list ul ol a li {
    color:#777 !important;
    transition: 0s all ease !important;
    margin-right: 15px
}
.main_list ul ol a:hover li {
    color:#ffb400 !important;
}
.main_list2 {
    margin-right: 20px !important;
    line-height: 20px !important;
}
.main_list ul ol li:first-of-type 
{
    list-style: none;
    font-size:13px;
    margin-top:10px;
    color:#2E9AFE;
    font-family: IRANSANS;
    font-weight: normal;
    text-align: right;
}
.main_list ul ol a.mmmk li:first-of-type {
    color:#ffb400 !important;
    font-weight: bold;
}
.main_list:hover ul
{
    display:block;
}
.main_list ul
{
    display:none;
}
یک مورد که باید شما هم بدونید اینه که وقتی می خواهیم منو های زیرین یا همون ساب منوها طوری باز بشوند که ۱۰۰% عرض صفحه را بگیرند و هنگام کوچک شدن صفحه نمایش همین واکنش را داشته باشد بایستی به این صورت عمل کرد:
ابتدا باید خط فرمان این قسمت را در CSS پیدا کرد که در اینجا به شکل زیر می باشد:
.main_list ul
{
    background:url('http://aminy.ir/wp-content/gallery/album/stationery-main.png')
    left bottom #fff  no-repeat;
    position: absolute;
    top: ;
    right: 0;
    width:100%;
    padding:0px;
    float:right;
    padding-bottom:10px;
    z-index: 99999999999999999999999;
    border: 1px #ccc solid;
    box-shadow: 0px 2px 5px #d9d9d9;
    border-radius: 0 0 5px 5px
}
همانطور که در بالا میبینید position روی این کلاس از absolute تبعیت می کند و این بدان معناست که به این کلاس فرمان می دهد که چهار چوب اصلی خود را در بالاتر از کلاس خود پیدا کند.
در این حالت ما بایستی با یک حرکت دیگر به ساب منو ها چهار چوبی را که باید در آن ۱۰۰% خود را نشان دهد بشناسانیم که در این جا ما بایستی یک تعریف دیگر انجام دهیم.
به کد زیر توجه کنید :

#main_menu
{
float:right;
padding:0px;
width:100%;
height:37px;
margin: 0;
position: relative;
top: 2px;
background: #444;
}

ما باید به بالاترین کلاس یا آی دی مربوط به مگا منو هایمان position از نوع relative بدهیم.

نکته اینجاست که کلاس .main_list ul با خاصیت absolute چهار چوب خود را در کلاس بالاتر از خود با خاصیت relative میداند.

به طور ساده تر بگم اگر به کلاس ساب منوی خود که در اینجا .main_list ul است. عرض ۱۰۰% بدهیم. این کلاس ۱۰۰% را به اندازه ای می بیند که #main_menu در هر اندازه ای باشد.
برای درک بیشتر دموی آنلاین این آموزش رو براتون در لینک زیر گذاشتم :
Demo: http://aminy.ir/demo/mega-menu

 

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

1 دیدگاه در “ساخت یک مگا منو به روشی بسیار آسان

  1. ممنون بابت این آموزشتون.
    خیلی مفید و جمع و جور بود و راحت تونستم ازش استفاده کنم.
    باز ممنون

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *