منوی sidebar واکنشگرا

آموزش ساخت منوی sidebar واکنشگرا

دموی پروژه نهایی

پروژه نهایی در دانلود باکس همین مطلب قابل دانلود است.

سلام خدمت تمامی کاربران عزیز پی سی اسکیل!

امروز قصد داریم با هم نحوه ساخت منو کناری یا Sidebar Navigation رو با استفاده از html , CSS و چی کوئری آموزش بدیم، پس با ما همراه باشید.

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

اگه درحال طراحی قالب داشبورد ادمین هستید، حتما به یکی از این منوی های عمودی بزرگ احتیاج خواهید داشت، همچنین باید این منو دارای زیر منو هم باشه! البته اگه قابلیت واکنشگرا بودن رو هم داشته باشه که دیگه خیلی عالیه 🙂 کاری که میخوایم الان انجام بدیم دقیقا همین مورده! ما توی این پست یک نمونه از این منو رو ایجاد میکنیم که شما میتونید بسته به سلیقه خودتون اون رو توسعه بدید و باب میل خودتون درش بیارید…

ایجاد ساختار اصلی

ساختار HTML این پروژه دارای ۲ المنت اصلی هستش، اولی تگ <header> که شامل لوگو وبسایت، فرم سرچ و منوی نویگشین بالایی (کلاس cd-nav-trigger تنها برای نسخه موبایل استفاده شده) و دومی تگ <main> که شامل محتوای اصلی صفحه (div.content-wrapper) و منوی کناری (nav.cd-side-nav) هست.

<header class="cd-main-header">
	<a href="#0" class="cd-logo"><img src="img/cd-logo.svg" alt="Logo"></a>
	
	<div class="cd-search">
		<form action="#0">
			<input type="search" placeholder="Search...">
		</form>
	</div> <!-- cd-search -->
 
	<a href="#0" class="cd-nav-trigger">Menu<span></span></a>
 
	<nav class="cd-nav">
		<ul class="cd-top-nav">
			<li><a href="#0">Tour</a></li>
			<li><a href="#0">Support</a></li>
			<li class="has-children account">
				<a href="#0">
					<img src="img/cd-avatar.png" alt="avatar">
					Account
				</a>
 
				<ul>
					<li><a href="#0">My Account</a></li>
					<!-- other list items here -->
				</ul>
			</li>
		</ul>
	</nav>
</header> <!-- .cd-main-header -->
 
<main class="cd-main-content">
	<nav class="cd-side-nav">
		<ul>
			<li class="cd-label">Main</li>
			<li class="has-children overview">
				<a href="#0">Overview</a>
				
				<ul>
					<li><a href="#0">All Data</a></li>
					<!-- other list items here -->
				</ul>
			</li>
			<li class="has-children notifications active">
				<a href="#0">Notifications<span class="count">3</span></a>
				
				<ul>
					<li><a href="#0">All Notifications</a></li>
					<!-- other list items here -->
				</ul>
			</li>
 
			<!-- other list items here -->
		</ul>
 
		<!-- other unordered lists here -->
	</nav>
 
	<div class="content-wrapper">
		<!-- main content here -->
	</div> <!-- .content-wrapper -->
</main> <!-- .cd-main-content -->

 

 

در حالت عادی بخش های cd-search و cd-top-nav داخل تگ و المنت <header> قرار دارند، در حالی که در نسخه موبایل به داخل بخش cd-side-nav هدایت میشن تا نمایش بهتری از اجزای صفحه داشته باشیم. (توضیحات بیشتر در بخش بررسی رویداد ها)

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

ما سه نوع تنظیمات بر اساس اندازه و ابعاد صفحه برای منوی کناریمون (Sidebar) ایجاد کردیم. روی دستگاه های کوچیک سایدبار دارای عرض ۱۰۰% و پُـزیشین absolute هست که به صورت پیشفرض hidden شدن.(visibility: hidden)

وقتی که کاربر بر روی cd-nav-trigger کلیک میکنه، سایدبار از حالت hidden به visible تغییر میکنه تا نمایش داده بشه. (با استفاده از کلاس nav-is-visible)

.cd-side-nav {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s 0s, visibility 0s 0.2s;
}
.cd-side-nav.nav-is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s 0s, visibility 0s 0s;
}

بر روی دستگاه هایی با عرض صفحه نمایش بیشتر از ۷۶۸ پیکسل، به صورت پیشفرض یک نسخه کوچیک شده سایدبار با وضعیت visible قرار دارد. این سایدبار دارای پُزیشن relative و عرض ثابت ۱۱۰ پیکسل هست. همچنین خاصیت float: left باعث میشه تا این سایدبار در قسمت سمت چپ عنصر <main> قرار بگیره.

@media only screen and (min-width: 768px) {
  .cd-side-nav {
    position: relative;
    float: left;
    width: 110px;
    /* reset style */
    visibility: visible;
    opacity: 1;
  }
}
 
@media only screen and (min-width: 768px) { 
 .cd-main-content .content-wrapper { 
 margin-left: 110px; 
 } 
} 

 

 

و در آخر بر روی دستگاه های بزرگ (عرض صفحه نمایش بیشتر از ۱۱۷۰ پیکسل) نسخه عریض یا به اصطلاح پهن نمایش داده خواهد شد.

بررسی رویداد ها

اگر یادتون باشه توی بخش ساختار HTML گفتیم که عناصر cd-search و cd-top-nav به صورت عادی داخل تگ <header> قرار دارن. همچنین گفتیم که برای داشتن ظاهر بهتر باید اون هارو به داخل کلاس cd-side-nav انتقال بدیم که کد اون به صورت زیر خواهد شد:

var resizing = false;
moveNavigation();
$(window).on('resize', function(){
 if( !resizing ) {
 	window.requestAnimationFrame(moveNavigation);
 	resizing = true;
 }
});
 
function moveNavigation(){
 var mq = checkMQ(); //this function returns mobile,tablet or desktop 
 
 if ( mq == 'mobile' && topNavigation.parents('.cd-side-nav').length == 0 ) { //topNavigation = $('.cd-top-nav')
 detachElements();
 topNavigation.appendTo(sidebar); //sidebar = $('.cd-side-nav')
 searchForm.prependTo(sidebar);
 } else if ( ( mq == 'tablet' || mq == 'desktop') && topNavigation.parents('.cd-side-nav').length > 0 ) {
 detachElements();
 searchForm.insertAfter(header.find('.cd-logo')); //header = $('.cd-main-header')
 topNavigation.appendTo(header.find('.cd-nav'));
 }
 resizing = false;
}
 
function detachElements() {
 topNavigation.detach();//topNavigation = $('.cd-top-nav')
 searchForm.detach();//searchForm = $('.cd-search')
}

 

 

*نکته: لازم به ذکر هست که ما در این آموزش در بخش جی کوئوری از پلاگین jQuery-menu-aim برای یکپارچه سازی و شناسایی دستگاه کاربران استفاده کردیم.

دیدگاه ها: 2
۱۳۹۴/۰۸/۰۳