آموزش ساخت منوی آبشاری

سلام.

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

<nav>
	<ul>
		<li><a href="#">خانه</a></li>
		<li><a href="#">آموزش</a>
			<ul>
				<li><a href="#">فتوشاپ</a></li>
				<li><a href="#">طراحی وب</a>
					<ul>
						<li><a href="#">HTML</a></li>
						<li><a href="#">CSS</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="#">وردپرس</a>
			<ul>
				<li><a href="#">پوسته</a></li>
				<li><a href="#">پلاگین</a></li>
			</ul>
		</li>
		<li><a href="#">توسعه</a></li>
	</ul>
</nav>

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

اما این چیزی نیست که ما دنبالش هستیم، بنابراین برای فرم دهی و زیبا سازی به سراغ کدهای css میریم.
اولین کارمون اینه که به شیوه نامه قالبمون مراجعه میکنیم (style.css) و قطعه کد زیر رو در انتهای کدهای موجود قرار میدیم.
* البته بهتره که سری کد های زیر رو در زیر جاهایی مثل header یا wrapper قرار بدید، این بیشتر برای مرتب بودن شیوه نامه ی قالبتونه، اما چیز واجبی نیست و اگه با css  آشنایی ندارید میتونید تو همون آخر کدهای موجود  قرار بدید.

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

nav ul ul {
	display: none;
}

	nav ul li:hover > ul {
		display: block;
	}

خوب، حالا کد زیر رو که تنظیم کننده ی استایل کلی قالب منوی ماست ، در ادامه ی کد بالا قرار بدید.

	nav ul {
	background: #efefef; 
	background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
	background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
	background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	padding: 0 20px;
	border-radius: 10px;  
	list-style: none;
	position: relative;
	display: inline-table;
}
	nav ul:after {
		content: ""; clear: both; display: block;
	}

	nav ul li {
	float: right;
}
	nav ul li:hover {
		background: #4b545f;
		background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
		background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
	}
		nav ul li:hover a {
			color: #fff;

		}

	nav ul li a {
		display: block; padding: 25px 40px;
		color: #757575; text-decoration: none;
	}

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

nav ul ul {
	background: #5f6975; border-radius: 0px; padding: 0;
	position: absolute; top: 100%;
}
	nav ul ul li {
		float: none; 
		border-top: 1px solid #6b727c;
		border-bottom: 1px solid #575f6a;
		position: relative;
	}
		nav ul ul li a {
			padding: 15px 40px;
			color: #fff;
		}	
			nav ul ul li a:hover {
				background: #4b545f;
			}

حالا منوهای ما شکل بهتری رو گرفتن…
اما باز یه چیزی کم داره…
اونم اینه که زیر منوی، زیر منوهای ما، در زیر دسته ی بالاترشون قرار میگیرن که این حالت، شکل و نظم خوبی رو نداره.
پس در ادامه این کد زیر رو هم قرار میدیم و کار رو تموم میکنیم.

			nav ul ul ul {
	display: none;margin: 0;padding: 0;width: 185px;position: absolute;top: 0;right:100%;

}

راستی اگه خواستید موضوعات مطالب سایتتون (در سایتهای وردپرسی) رو هم به نمایش در بیارید، با قرار داد قطعه کد  زیر در در کنار کدهای html بالا در header.php فهرست مطالب  هم به صورت اتوماتیک و آبشاری به نمایش در میاد.

در ضمن تمام کدهای بالا قابل ویرایشن و میتونید منوهاتون رو به هرشکلی که خواستید در بیارید.

<?php wp_list_cats('sort_column=NAME&optioncount=0&hierarchical=1'); ?>

 منبع : line25.com & alimir.ir