ساخت یک منوی کشویی زیبا به اسم mega

mega-dropdown یک منو کشویی رسپانسیو و به راحتی قابل سفارشی بودن می باشد . 

یکی از سخت ترین قسمت زمانی که شما روی یک پروژه کار میکنین اینکه با تعداد زیادی محتوا رو به رو هستین و شما باید یه راه ساده برای ارائه این محتوا به کاربر استفاده کنید . برای نشون دادن این موضوع ما میتونیم سایت آمازمون رو مثال بزنیم که از یه دسته بندی بی نهایت استفاده میکنه . اگه به سایت amazoon برید بالایی سایت در سمت چپ یه منوکشویی میبینید که ما اسمشو میذاریم mega-dropdown این منو یه دسته بندی بی نهایت رو بطور زیبا تو خودش قرار داده بطوری که هر element دارایی زیر مجموعه ایه .

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

همانطور که شما می توانید از نسخه ی نمایشی متوجه شید . منویی ما با کلیک کردن فعال میشه و همینطور زیر شاخه هاش با Hover کردن روشون نمایش داده میشن ، البته بدونه نیاز به جاوا اسکریپت . (ما از قابلیت خود css بجایی جاوا اسکریت برای این متحرک سازی استفاده میکنیم ) . با این حال  تصمیم گیری در این مورد دسته خودمونه که فکر میکنید کدوم راه برای یه تجربه ای کاربری بهتر میتونه استفاده بشه . css یا javascript . در کل از کاربرها انتظار میره که برای دسترسی به محتوایی جدید رو این منوها کلیک کنن . و hover کردن چیزی ، نشون دهنده "بالقوه بودن" اون موضوعه . به همین دلیله که ما ترجیه میدیم از کلیک برای نمایش منو استفاده کنیم . درصورتی که شما با این دیدگاه مخالفین به راحتی میتونید از hover کردن منو برای نمایش استفاده کنید در آخر تصمیم با شماست . 

• بوجود آوردن ساختار 

منو کشوییمون از دوتا تگ کلی بوجود میاد : <header> که شامل منومون میشه (.cd-dropdown-wrapper) ، و تگ بعد <main> که شامل محتوایی دیگه سایتمون میشه . تگ .cd-dropdown-wrapper که شامل .cd-dropdown-trigger برای دکمه منومون میشه و تگ .cd-dropdown که لیست شاخه بندهامون تو اون قرار میگیره . 

<header>
	<div class="cd-dropdown-wrapper">
		<a class="cd-dropdown-trigger" href="#0">Dropdown</a>
		<nav class="cd-dropdown">
			<h2>Title</h2>
			<a href="#0" class="cd-close">Close</a>
			<ul class="cd-dropdown-content">
				<li>
					<form class="cd-search">
						<input type="search" placeholder="Search...">
					</form>
				</li>
				<li class="has-children">
					<a href="#0">Clothing</a>
 
					<ul class="cd-secondary-dropdown is-hidden">
						<li class="go-back"><a href="#0">Menu</a></li>
						<li class="see-all"><a href="#0">All Clothing</a></li>
						<li class="has-children">
							<a href="#0">Accessories</a>
 
							<ul class="is-hidden">
								<li class="go-back"><a href="#0">Clothing</a></li>
								<li class="see-all"><a href="#0">All Accessories</a></li>
								<li class="has-children">
									<a href="#0">Beanies</a>
 
									<ul class="is-hidden">
										<li class="go-back"><a href="#0">Accessories</a></li>
										<li class="see-all"><a href="#0">All Benies</a></li>
										<li><a href="#0">Caps &amp; Hats</a></li>
										<!-- other list items here -->
									</ul>
								</li>
								<li class="has-children">
									<a href="#0">Caps &amp; Hats</a>
 
									<ul class="is-hidden">
										<li class="go-back"><a href="#0">Accessories</a></li>
										<li class="see-all"><a href="#0">All Caps &amp; Hats</a></li>
										<li><a href="#0">Beanies</a></li>
										<!-- other list items here -->
									</ul>
								</li>
								<li><a href="#0">Glasses</a></li>
								<!-- other list items here -->
							</ul>
						</li>
 
						<li class="has-children">
							<!-- other list items here -->
						</li>
 
						<li class="has-children">
							<!-- other list items here -->
						</li>
 
						<li class="has-children">
							<!-- other list items here -->
						</li>
					</ul> <!-- .cd-secondary-dropdown -->
				</li> <!-- .has-children -->
 
				<li class="has-children">
					<!-- other list items here -->
				</li> <!-- .has-children -->
 
				<li class="has-children">
					<!-- other list items here -->
				</li> <!-- .has-children -->
 
				<li class="cd-divider">Divider</li>
 
				<li><a href="#0">Page 1</a></li>
				<!-- other list items here -->
 
			</ul> <!-- .cd-dropdown-content -->
		</nav> <!-- .cd-dropdown -->
	</div> <!-- .cd-dropdown-wrapper -->
</header>
 
<main class="cd-main-content">
	<!-- your content here -->
</main>

• اضافه کردن استایل 

برای دستگاه های تلفن همراه ، ایده اصلی تمرکز بیشتر کاربر بر روی منویی کشوییه زمانی که در تلفن های همراه اونو میبینه . برای همین هم ما به منومون  fixed position میدیم و ارتفاع و عرض رو 100% در نظر میگیریم بصور پیش فرض نمایش منو رو برابر (translateY(-100%)) قرار میدیم .زمانی که کاربر روی دکمه منو کلیک میکنه کلاس .dropdown-is-active به منو اضافه میشه و منو نمایش پیدا میکنه . 

.cd-dropdown {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(-100%);
  transition: transform 0.5s;
}
.cd-dropdown.dropdown-is-active {
  transform: translateY(0);
}

هنگامی که کاربر رو یه sublevel کلیک میکنه . به منومون برای نمایش کلاس .move-out اضافه میشه در حالی که اگه بخواد مخفی بشه از کلاس .is-hidden برای این کار استفاده میشه . 

.cd-dropdown-content.is-hidden, .cd-dropdown-content ul.is-hidden {
  /* push the secondary dropdown items to the right */
  transform: translateX(100%);
}
 
.cd-dropdown-content.move-out > li > a, .cd-dropdown-content ul.move-out > li > a {
  /* push the dropdown items to the left when secondary dropdown slides in */
  transform: translateX(-100%);
}

در دستگاه های بزرگتر (بزرگتر از دید عرض 1024px) ، چون فضایی کافی برای نمایش وجود داره ما به جایگزین کردن محتوایی قابل مشاهده نیاز نداریم . 

@media only screen and (min-width: 1024px) {
  .cd-dropdown {
    position: absolute;
    top: 100%;
    /* reset style*/
    height: auto;
    width: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px);
    transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s;
  }
  .cd-dropdown.dropdown-is-active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s 0s, visibility 0.3s 0s, transform 0.3s 0s;
  }
 
  .cd-dropdown-content {
    /* reset mobile style */
    position: static;
    height: auto;
    width: 280px;
  }
  .cd-dropdown-content .cd-secondary-dropdown, .cd-dropdown-content .cd-dropdown-gallery, .cd-dropdown-content .cd-dropdown-icons {
    transform: translateX(0);
    left: 100%;
    height: auto;
  }
  .cd-dropdown-content .cd-secondary-dropdown.is-hidden, .cd-dropdown-content .cd-dropdown-gallery.is-hidden, .cd-dropdown-content .cd-dropdown-icons.is-hidden {
    /* reset mobile style */
    transform: translateX(0);
  }
  .cd-dropdown-content > .has-children > ul {
    visibility: hidden;
  }
  .cd-dropdown-content > .has-children:hover > ul {
    /* when hover over .cd-dropdown-content items - show subnavigation */
    visibility: visible;
  }
  .cd-dropdown-content > .has-children:hover > .cd-secondary-dropdown > li > ul {
    /* if .cd-secondary-dropdown is visible - show also subnavigation */
    visibility: visible;
  }
}

نکته : اگه شما میخواید منوتون از سمت چپ باز بشه به راحتی مینوید با اضافه کردن کلاس .open-to-left به .cd-dropdown-wrapper به این کار دست پیدا کنید . 

• کنترل رویداد ها 

ما  به غیر از کلیک کردن روی آیتم ها برای فعال کردن و نشون دادنشون از جی کوئری زیاد استفاده نکردیم تا کد هامون سبک تر بشه . ما برای این فعال سازی ها از پلاگین  jQuery-menu-aim plugin  استفاده کرده ایم یک پلاگینی که کاربر برای مشاهده کردن آیتم ها براحتی بتونه ازش استفاده کنه . 

ممنونم که تا اینجایی این مقاله هم همراه ما بودید اومیدوارم مورد استفادتون قرار گرفته باشه .