ساخت منو آبشاری با css ,html و وردپرس

سالار تیر ۲۳, ۱۳۹۷ css/html, مقالات, وردپرس ارسال دیدگاه 67 بازدید

ساخت منو آبشاری با css ,html و وردپرسReviewed by سالار on Jul 14Rating: 4.5

سلام به همه ی همراهان

امروز میخواهیم راجع به ساخت منو در css و html صحبت کنیم. همانطور که میدانید فهرست وب سایت بخش بسیار مهمی از وب سایت را تشکیل می دهد پس باید دارای طراحی مناسب زیبا و کارآمد باشد .

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

*البته اگر در مرحله طراحی هستید به index.html مراجعه کنید .

<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>

<nav>

<ul>

<li><a href="#">آموزش</a>

<ul>

<li><a href="#">فتوشاپ</a></li>

<li><a href="#">طراحی وب</a>

<ul>

</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 میرویم.

قطعه کدی که در زیر گذاشته می شود css کد html بالا است

nav ul ul {
	display: none;
}

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

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 {

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 {

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%;

}

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'); ?>

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

شاد باشید .

ساخت منو آبشاری با css ,html و وردپرس

سلام به همه ی همراهان

مرتبط

در خبرنامه ما عضو شوید

تبریک ! شما عضو خبرنامه ما شدید

شاید این مطالب برایتان مفید باشد

مطلب پیشنهادی

پاسخ دهید لغو پاسخ

در خبرنامه ما عضو شوید

تبریک ! شما عضو خبرنامه ما شدید