شبیه سازی منوهای یوتیوب
شبیه سازی منوهای یوتیوب

شبیه سازی منوهای یوتیوب

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

برای مشاهده لینک وارد شود

خوب کار رو شروع می کنیم.آنچه که ما در بخش کدهای HTML انجام خواهیم داد عبارت است از ایجاد یک لیست نامرتب که حاوی عناوین و آیکون های منوهای ما است.ما در کنار هر عنوان یک آیکون کوچک نمایش خواهیم داد پس برای تنظیمات استایل آنها به کلاس جداگانه ای برای مدیریت هر یک از آنها نیاز داریم.

<nav class="dr-menu">
						<div class="dr-trigger"><span class="dr-icon dr-icon-menu"></span><a class="dr-label">       حساب کاربری</a></div>
						<ul>
							<li><a class="dr-icon dr-icon-user" href="#">        مجید محمد نژاد</a></li>
							<li><a class="dr-icon dr-icon-camera" href="#">       ویدئو ها</a></li>
							<li><a class="dr-icon dr-icon-heart" href="#">        محبوب</a></li>
							<li><a class="dr-icon dr-icon-bullhorn" href="#">        اشتراک گذای ها</a></li>
							<li><a class="dr-icon dr-icon-download" href="#">       دانلود ها</a></li>
							<li><a class="dr-icon dr-icon-settings" href="#">       تنظیمات</a></li>
							<li><a class="dr-icon dr-icon-switch" href="#">       خروج</a></li>
						</ul>
					</nav>

ما کار خاصی را در بخش کدهای HTML انجام ندادیم  و چند تکه کد اولیه را به آن اضافه کردیم.کار اصلی ما با کدهای مربوط به CSS است که در ادامه آنها را بیشتر برایتان توضیح خواهیم داد.(البته نه همه کدها)

ما در ابتدای کار فونت مربوط به آیکون ها را وارد می کنیم.

@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.eot');
	src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
		url('../fonts/icomoon.woff') format('woff'),
		url('../fonts/icomoon.ttf') format('truetype'),
		url('../fonts/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

منوی اصلی دارای تنظیمات اولیه ای مانند اندازه فونت،فاصله بین خطوط،رنگ و ابعادی است.ما برای اینکه اندازه آن نه خیلی زیاد بزرگ شود و نه خیلی کوچک از دو خاصیت max-width  و min-width استفاده می کنیم.

.dr-menu {
	width: 100%;
	max-width: 400px;
	min-width: 300px;
	position: relative;
	font-size: 1.3em;
	line-height: 2.5;
	font-weight: 400;
	color: #fff;
	padding-top: 2em;
}

زیرمنوها دارای یک آیکون و یک عنوان هستند که ما برای اینکه به کاربر بفهمانیم که آنها دارای لینک هستند علامت موس را به اشاره گر تغییر می دهیم.

.dr-menu > div  {
	cursor: pointer;
	position: absolute;
	width: 100%;
	z-index: 100;
}

ما به آیکون  منو نیز موقعیت متغییر می دهیم  زیرا ما آن را جابجا خواهیم کرد.

.dr-menu > div .dr-icon {
	top: 0;
	right: 0;
	position: absolute;
	font-size: 150%;
	line-height: 1.6;
	padding: 0 10px;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

ما هنگامی که روی آیکون منو کلیک می کنیم در واقع کلاس “dr-menu-open” را فراخوانی می کنیم،سپس آیکون به سمت راست حرکت کرده و محتواهایی را برای کاربران نمایش خواهد داد.ما برای جلوگیری از بهم ریختگی حرکت آن از استایل های زیر برای آن استفاده می کنیم.

.dr-menu.dr-menu-open > div .dr-icon {
	color: #60a773;
	right: 100%;
	-webkit-transform: translateX(53%);
	-moz-transform: translateX(53%);
	-ms-transform: translateX(53%);
	transform: translateX(53%);
}

در آخر کدهای CSS ما کلاس مربوط بهآیکون های مورد استفاده را از IcoMoon وارد می کنیم.آیکون قرار گرفته در کنار آیکون منو(آیکون شبیه علامت play) پس از کلیک کردن روی آن کمی متفاوتتر از بقیه است و ما بای اضافه کردن آن از شبه کلاس after: استفاده می کنیم.استایل های آن در زیر قرار دارد.

.dr-menu > div .dr-icon:after {
	content: "\e008";
	position: absolute;
	font-size: 50%;
	line-height: 3.25;
	right: -10%;
	opacity: 0;
    
    transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
}

چون محل قرار گیری آیکون نیز متغییر است پس ما از خاصیت right با مقدار-۱۰ پیکسل برای آن استفاده کردیم،همچنین ما خاصیت opacity آن را صفر قرار دادیم زیرا ما نمی خواهیم هنگام بسته بودن منو آیکون نمایش داده شود.

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

.dr-menu.dr-menu-open > div .dr-icon:after {
	opacity: 1;
}

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

.dr-menu > div .dr-label {
	padding-right: 3em;
	position: relative;
	display: block;
	color: #60a773;
	font-size: 0.9em;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: 2.75;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.dr-menu.dr-menu-open > div .dr-label {
 -webkit-transform: translateY(-90%);
 -moz-transform: translateY(-90%);
 -ms-transform: translateY(-90%);
 transform: translateY(-90%);
}

ما منو را در ابتدا نمی خواهیم نمایش داده بشود پس خاصیت opacity آن را صفر قرار می دهیم.

.dr-menu ul {
	padding: 0;
	margin: 0 0 0 3em;
	list-style: none;
	opacity: 0;
	position: relative;
	z-index: 0;
	pointer-events: none;
	-webkit-transition: opacity 0s linear 205ms;
	-moz-transition: opacity 0s linear 205ms;
	transition: opacity 0s linear 205ms;
}

ما پس از کلیک روی آن و باز شدن برای نمایش منو ها از استایل های زیر استفاده می کنیم.

.dr-menu.dr-menu-open ul {
	opacity: 1;
	z-index: 200;
	pointer-events: auto;
	-webkit-transition: opacity 0s linear 0s;
	-moz-transition: opacity 0s linear 0s;
	transition: opacity 0s linear 0s;
}

لیست منو نیز دارای استایل های زیر است

.dr-menu ul li {
	display: block;
	margin: 0 0 5px 0;
	opacity: 0;
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	transition: opacity 0.3s ease;
}

.dr-menu.dr-menu-open ul li {
	opacity: 1;
}

ما برای اینکه آیتم های منو یکی پس از دیگری نمایش داده شوند برای هر یک از خاصیت delay متفاوتی استفاده خواهیم کرد بطوری که آیتم اولی زودتر از آیتم دومی نمایش داده بشود و این کار را تا آخر ادامه می دهیم.

.dr-menu.dr-menu-open ul li:nth-child(2) {
	-webkit-transition-delay: 35ms;
	-moz-transition-delay: 35ms;
	transition-delay: 35ms;
}

.dr-menu.dr-menu-open ul li:nth-child(3) {
	-webkit-transition-delay: 70ms;
	-moz-transition-delay: 70ms;
	transition-delay: 70ms;
}

.dr-menu.dr-menu-open ul li:nth-child(4) {
	-webkit-transition-delay: 105ms;
	-moz-transition-delay: 105ms;
	transition-delay: 105ms;
}

.dr-menu.dr-menu-open ul li:nth-child(5) {
	-webkit-transition-delay: 140ms;
	-moz-transition-delay: 140ms;
	transition-delay: 140ms;
}

.dr-menu.dr-menu-open ul li:nth-child(6) {
	-webkit-transition-delay: 175ms;
	-moz-transition-delay: 175ms;
	transition-delay: 175ms;
}

.dr-menu.dr-menu-open ul li:nth-child(7) {
	-webkit-transition-delay: 205ms;
	-moz-transition-delay: 205ms;
	transition-delay: 205ms;
}

لینک ها نیز دارای استایل هایی هستند که ما در زیر برایتان نمایش می دهیم

.dr-menu ul li a {
	display: inline-block;
	padding: 0 20px;
	color: #fff;
}

.dr-menu ul li a:hover {
	color: #60a773;
}

در آخر نیز ما استایل های مربوط به آیکونها را برایتان نمایش می دهیم.

.dr-icon:before, 
.dr-icon:after {
	position: relative;
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
}

.dr-menu ul .dr-icon:before {
	margin-left: 15px;
}

.dr-icon-bullhorn:before {
	content: "\e000";
}

.dr-icon-camera:before {
	content: "\e002";
}

.dr-icon-heart:before {
	content: "\e003";
}

.dr-icon-settings:before {
	content: "\e004";
}

.dr-icon-switch:before {
	content: "\e005";
}

.dr-icon-download:before {
	content: "\e006";
}

.dr-icon-user:before {
	content: "\e001";
}

.dr-icon-menu:before {
	content: "\e007";
}

در آخر آموزش ما به توضیح کدهای جاوااسکریپت می پردازیم.

در کدهای جاوااسکریپت ما کار خاصی را انجام نخواهیم داد پس ما در اینجا کدبسیار کوتاهی خواهیم داشت.کاری که کد جاوااسکریپت برای ما انجام خواهد داد این است که هنگام کلیک روی آیکون منو ،کلاس “dr-menu-open” را دریافت کرده و آیتم های منو را نمایش دهد و هنگام کلیک دوباره روی آیکون منو آن را ببندد.همین.

var YTMenu = (function() {

	function init() {
		
		[].slice.call( document.querySelectorAll( '.dr-menu' ) ).forEach( function( el, i ) {

			var trigger = el.querySelector( 'div.dr-trigger' ),
				icon = trigger.querySelector( 'span.dr-icon-menu' ),
				open = false;

			trigger.addEventListener( 'click', function( event ) {
				if( !open ) {
					el.className += ' dr-menu-open';
					open = true;
				}
			}, false );

			icon.addEventListener( 'click', function( event ) {
				if( open ) {
					event.stopPropagation();
					open = false;
					el.className = el.className.replace(/\bdr-menu-open\b/,'');
					return false;
				}
			}, false );

		} );

	}

	init();

})();

 

پایان

0
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

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

۲ دیدگاه ها

  1. سلام
    مرسی از اموزش های خویتون یه سوال داشتم . از کد های جاوا اسکریپت چطوری باید استفاده کرد تا این منو کار کنه ؟

    • با تشکر از انتخاب برنامه نویسان نوین پندار

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

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


+ 8 = چهارده

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>