ساخت منو ناوبری سه بعدی

امروز قصد داریم یک منو قدرتمند بسازیم تا وقتی فعال میشه بطور سه بعدی جایگزین محتوایی فعلی بشه . مقاله امروز یک رویکرد جدید در رابطه با نشان دادن منو در وبسایت هاست ، به یاد داشته باشید ، که این منو یک منو ناوبری در صفحه اصلی نیست بلکه به صفحات دیگه لینک داده میشه . شما با این منو میتونید برای مثال ، برای گالری هاتون زمانی که بخواین از یک محصول به محصول دیگه برین به راحتی فقط با یک کلیک از منو این کارو انجام بدید تا یک زیبایی خواصی به وبسایتتون بده .

برای افزایش تمرکز بر روی منوها ، ما محتوایی اصلی رو در محور X ها تحت فشار قرار میدیم (با استفاده از transformation در css خصوصیت scale رو برای تغییر سایز محتوا استفاده میکنیم و اینطوری نیست که ما از 3D translations استفاده کنیم . اما نتیجه یکسانه )

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

حالا اجازه بدید بریم سراغ کدها .

• ساختار کد html 

 ساختار کلی کد Html ما از سه المنت تشکیل میشه : المنت اول با کلاس .cd-nav-trigger برای آیکون منو و المنت بعدی با کلاس .cd-section برای بخش متحویات سایت و المنت آخر با کلاس .cd-nav-container برای بخش منو استفاده میشه . کدها رو میتونید در زیر بببنید . 

به علاوه اینکه المنت با کلاس .cd-overlay برای ایجاد یک لایه سایه استفاده میشه و فقط زمانی قابل مشاهداست که منو فعال باشه .

<a href="#cd-nav" class="cd-nav-trigger">
	Menu<span><!-- used to create the menu icon --></span>
</a> <!-- .cd-nav-trigger -->
 
<main>
	<section class="cd-section index cd-selected">
		<header>
			<div class="cd-title">
				<h2><!--  title here  --></h2>
				<p><!--  brief description here  --></p>
			</div> <!-- .cd-title -->
		</header>
 
		<div class="cd-content">
			<!-- your content here -->
		</div>
	</section> <!-- .cd-section -->
</main>
 
<nav class="cd-nav-container" id="cd-nav">
	<header>
		<h3>Navigation</h3>
		<a href="#0" class="cd-close-nav">Close</a>
	</header>
 
	<ul class="cd-nav">
		<li class="cd-selected" data-menu="index">
			<a href="index.html">
				<span>
					<!-- svg icon here -->
				</span>
 
				<em><!--  title here  --></em>
			</a>
		</li>
 
		<li data-menu="projects">
			<!-- .... -->
		</li>
 
		<!-- other list items here -->
	</ul> <!-- .cd-3d-nav -->
</nav>

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

برای ایجاد کردن انیمیشن ها ، ما از  CSS3 Transformations برای اضافه کردن انیمیشن به المنت های 

و استفاده میکنیم . بطور پیش فرض ، position منوناوبری (navigation) رو برابر با fixed قرار میدیم همینطور کل منو رو سمت راست در نظر میگیریم و فعلا اونو خارج از دید میزاریم  (translateX(100%)) . زمانی که کاربر روی دکمه منو کلیک میکنه کلاس .is-visible به المنت اضافه میشه که کل منو رو به عقب برمیگردونه تا قابل مشاهده باشه . (translateX(0)) در همین حال کلاس .scale-down به المنت اضافه میشه تا زمانی که منو فعال شد المنت با قرار دادن (scale(.9)) کوچیک بشه و البته ما برای همه المنت ها از CSS3 Transitions استفاده میکنیم که دارای یک انیمیشن بدونه نقص باشیم . 

.cd-nav-container {
  position: fixed;
  top: 0;
  right: 0;
  width: 80%;
  height: 100%;
  transform: translateX(100%);
  transition: transform 0.4s;
}
.cd-nav-container.is-visible {
  transform: translateX(0);
}
 
main {
  transition: transform 0.4s;
}
main.scale-down {
  transform: scale(0.9);
}

زمانی که کاربر یکی از آیتم های درون منو رو انتخاب میکنه. یک المنت با کلاس  .cd-section ایجاد میشه که با استفاده از jquery به DOM اضافه میشه . (در بخش عملکرد ها بیشتر توضیح میدیم ) . بعد کلاس .cd-selected هم به المنتی که تازه با کلاس .cd-section ایجاد کردیم هم اضافه میشه ، اینها در حالیه که المنت قبلی با کلاس .cd-section حذف میشه و این المنت های که گفتیم جایگزین میشه . (محتوایی که ابتدا در سایت قابل مشاهده است) . به این صورت المنت بخش جدید اضافه میشه .

نکته : در این انیمیشن شما نمیتونید ببینید که بخش قبلی در حال حرکت به سمت راسته (translateX(100%)) چون ما با یک تاخیر این انیمیشن ها رو اجرا میکینم . 

.cd-section {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0s 0.4s;
}
.cd-section.cd-selected {
  position: relative;
  z-index: 2;
  transform: translateX(0);
  transition: transform 0.4s 0s;
}

• دستکاری عملکرد ها 

در فایل index.html محتوایی ما فقط شامل معرفی میشه  و برای هر بخش جدا ما یک فایل html جدا میسازیم . مثل (projects.html, careers.html, ..) دقیقا با همون ساختار اما با محتویات .cd-section مختلف . وقتی کاربر رو یکی از آیتم های منو ناوبری کلیک میکنه یک المنت جدید 

بوجود میاد و در DOM وبسایتمون قرار میگیره (برای اینکار از تابع loadNewContent استفاده میکنیم ) . تابع load() برای بارگزاری بخش جدید سایت مورد استفاده قرار میگیره .( ما از data-menu هر یک از آیتم های موجود در منوناوبری استفاده میکنیم تا بدونیم که باید کدوم یکی از بخش ها رو در صفحه امون لود کنیم . )

هنگامی که محتوایی متنی جدید درج شد . ما از کلاس .cd-selected استفاده میکنیم تا منو ناوبری رو ببنیدیم . 

$('.cd-nav li').on('click', function(event){
	event.preventDefault();
	var target = $(this),
		//detect which section user has chosen
		sectionTarget = target.data('menu');
	if( !target.hasClass('cd-selected') ) {
		//if user has selected a section different from the one alredy visible
		//update the navigation -> assign the .cd-selected class to the selected item
		target.addClass('cd-selected').siblings('.cd-selected').removeClass('cd-selected');
		//load the new section
		loadNewContent(sectionTarget);
	} else {
		// otherwise close navigation
		toggleNav(false);
	}
});
function loadNewContent(newSection) {
	//create a new section element and insert it into the DOM
	var section = $('<section class="cd-section '+newSection+'"></section>').appendTo($('main'));
	//load the new content from the proper html file
	section.load(newSection+'.html .cd-section > *', function(event){
		//add the .cd-selected to the new section element -> it will cover the old one
		section.addClass('cd-selected').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
			//close navigation
			toggleNav(false);
		});
		section.prev('.cd-selected').removeClass('cd-selected');
	});
 
	$('main').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
		//once the navigation is closed, remove the old section from the DOM
		section.prev('.cd-section').remove();
	});
 
	if( $('.no-csstransitions').length > 0 ) {
		//detect if browser supports transitions
		toggleNav(false);
		section.prev('.cd-section').remove();
	}
}

نکته : ما از تابع  load() برای قرار دادن محتوایی جدید استفاده میکنیم شما دوستان میتونید از ajax نیز برای لود کردن محتوای جدیدتون استفاده کنید .