عنوان مقاله :

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

گردآوری و تالیف : حسام موسوی
تاریخ انتشار : 17 مهر 1394
دسته بندی ها : کتابخانه , آموزشی

امروز در این پست میخوایم طریقه ایجاد یک منویی آکاردئون ( 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 اضافه کنید تا این انیمیشن ها مورد استفاده قرار بگیرن.

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

مقالات پیشنهادی

ابزاری برای ساخت سایت های چندزبانه در لاراول

laravel-translatable یک پکیج لاراولی برای مدل های قابل ترجمه است. هدفش حذف پیچیدگی دریافت و ذخیره سازی نمونه های مدل چندزبانه است. با این پکیج شما کمت...

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

یکی از سخت ترین قسمت زمانی که شما روی یک پروژه کار میکنین اینکه با تعداد زیادی محتوا رو به رو هستین و شما باید یه راه ساده برای ارائه این محتوا به کار...

چگونه یک منوی موبایلی را به قالب وردپرس اضافه کنیم

با یقین می‌شود گفت که مناسب کردن کارایی و وضعیت دیداری وبسایت برای دستگاه‌های موبایل نمی‌تواند یک انتخاب اختیاری باشد. موبایل ها در سال 2017 بیشتر از...

امنیت وردپرس در چند قدم – قسمت اول

سیستم مدیریت محتوا وردپرس در کل یک سیستم امن به حساب می آید و همواره تیم پشتیبانی این سیستم مشغول برطرف کردن مشکلات امنیتی و … وردپرس هستند اما گاهی ا...

دیدگاه های ارزشمند شما

برای ارسال نظر لازم است ابتدا وارد سایت شوید
mohammad hosein | 2 سال پیش

thanks :)