منوی Accordion چند سطحی

امروز در این پست میخوایم طریقه ایجاد یک منویی آکاردئون ( Accordion ) چندسطحی رو بهتون یاد بدیم امیدوارم مورد استفاده اتون قرار بگیره . این منو تنها با css کار میکنه ، و با استفاده از شبه کلاس checked بر روی input عمل چک رو انجام میدیم . با این حال ما یک نسخه همراه با jquery هم آماده کردیم برای افرادی که انیمیشن های ظریف رو به css خالی ترجیح میدن اما تمرکز ما در این پست بر روی ساخت این منو با css است . 

دانلود فایل | نمایش آنلاین 

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

ساختار HTML

ساختار HTML این منو بسیار سادست . بصورتی که از یک لیست نامرتب ( unordered list ) اصلی تشکیل میشه و اگر یکی از آیتم های لیست شامل زیرشاخه بود اون وقت یک input با نوع checkbox و یک label به اون آیتم اضافه میشه . همچنین ما با اضافه کردن کلاس has-children میفهمیم که آیتمی دارای فرزنده و آیتم های که فرزند نداشته باشن دارای این کلاس نیستن . 

<ul class="cd-accordion-menu">
	<li class="has-children">
		<input type="checkbox" name ="group-1" id="group-1" checked>
		<label for="group-1">Group 1</label>
 
  		<ul>
  			<li class="has-children">
  				<input type="checkbox" name ="sub-group-1" id="sub-group-1">
				<label for="sub-group-1">Sub Group 1</label>
 
				<ul>
					<li><a href="#0">Image</a></li>
					<li><a href="#0">Image</a></li>
					<li><a href="#0">Image</a></li>
				</ul>
  			</li>
  			<li><a href="#0">Image</a></li>
			<li><a href="#0">Image</a></li>
  		</ul>
	</li>
 
	<li><a href="#0">Image</a></li>
	<li><a href="#0">Image</a></li>
</ul> <!-- cd-accordion-menu -->

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

ما از یک روش استاندارد برای تشخیص کلیک استفاده میکنیم تا با css کاری کنیم که محتوایی زیر منو ها به سادگی نمایش داده بشه : از جمله استفاده از ورودی چک باکس ، ما میتونیم از شبه کلاس checked و از انتخاب کننده برادر و خواهر (div + div) برای تغییر display المنت <ul> از “none” به “block” استفاده کنیم .

مرحله به مرحله : اول از همه ، ما باید مطمئن بشیم که عنصر ورودی چک باکس کل list item زیر منو رو تحت پوشش قرار میده . به عبارت دیگه ، ما نیاز به بوجود آوردن چک باکس های سفارشی داریم . بنابراین، در مرحله اول، شما نیاز به این دارید ، زمانی که روی یک چک باکس کلیک میکنید مطمئن بشید که عمل checked/unchecked بخوبی انجام میشه و بعد با استفاده از یک label و اتصال label به input با استفاده از صفت "for" که میتونید در کد HTML بالا این ارتباط رو ببینید . به این ترتیب شما می تونید به سادگی چک باکس رو پنهان کنید و به label بجای چک باکس استایل بدید . 

.cd-accordion-menu input[type=checkbox] {
	/* hide native checkbox */
	position: absolute;
	opacity: 0;
}
.cd-accordion-menu label, .cd-accordion-menu a {
	position: relative;
	display: block;
	padding: 18px 18px 18px 64px;
	background: #4d5158;
	box-shadow: inset 0 -1px #555960;
	color: #ffffff;
	font-size: 1.6rem;
}

حالا به ساختار HTML ورودی input و label و لیست نامرتب دقت کنید که با هم برادر هستن . با استفاده از شبه کلاس checked ، شما میتونید بصورت زیر عمل کنید : وقتی که ورودی چک باکس علامت زده میشه ( با کلیک روی label ) عنصر <ul> و برادر و خواهرانش ، Display اونها از none به block تغییر میکنه . 

.cd-accordion-menu ul {
	/* by default hide all sub menus */
	display: none;
}
 
.cd-accordion-menu input[type=checkbox]:checked + label + ul,
.cd-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul {
	/* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/
	/* show children when item is checked */
	display: block;
}

اگر شما میخواید که انیمیشن های آروم و زیبایی به این منو اضافه کنید به راحتی میتونید فایل های .js داخل این کتابخونه رو به Html اضافه کنید و در نهایت کلاس animate رو به المنت cd-accordion-menu اضافه کنید تا این انیمیشن ها مورد استفاده قرار بگیرن.

امیدوارم لذت برده باشید .