ایجاد منوی های کشوئی با استفاده از HTML و CSS

یکی از امکاناتی که خیلی از وب سایت ها از اون بهره مند هستند و خیلی از طراح های وب از اون توی کارهاشون استفاده می کنند، ایجاد منوی های کشوئی یا DropDown Menu می باشد. در این مقاله آموزشی به صورت قدم به قدم خدمت دوستان نحوه ایجاد این منوها رو بوسیله HTML و CSS آموزش خواهم داد.در مرحله اول باید کد HTML مربوط به منوی اصلی رو بنویسیم. اصول طراحی منوها در HTML و CSS بوسیله تگ ul انجام میشه. برای ایجاد منوی اصلی وب سایت کد HTML زیر رو در یک فایل با پسوند html (برای مثال dropdown.html) ذخیره کنید:

<!DOCTYPE html>
<head>
	<title>DropDown Menu with HTML and CSS</title>
</head>
<body>
	<div id="nav">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Community</a></li>
			<li><a href="#">Blog</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>
</body>
</html>

خوب تا اینجا یک کد HTML ساده هست و با باز کردن فایل html در مرورگر، تنها یک لیست ساده نمایش داده می شود. برای ادامه باید با کمک CSS منوی اصلی را استایل دهی کنیم. برای این کار در بخش head داخل تگ style کدهای CSS زیر را اضافه می کنیم:

*{
	margin: 0;
	padding: 0;
}

.clear-fix{
	clear: both;
}

a{
	text-decoration: none;
}

#nav{
	background-color: black;
	border-bottom: 2px solid darkred;			
}

#nav ul{
	list-style: none;
}

#nav li{
	position: relative;
}

#nav > ul > li{
	float: left;			
}

#nav > ul > li > a{
	display: inline-block;
	color: white;
	padding: 0 10px;
	line-height: 30px;
}

#nav > ul > li:hover > a{
	background-color: darkred;
	color: white;
}

خوب تا اینجای کار ساخت منوی اصلی ما به پایان رسید. تصویر کار شما باید به صورت زیر باشه:

Step1

در مرحله بعد باید برای منوی های مورد نظرمون زیر منو تعریف کنیم. برای اینکار باید داخل تگ های li مربوطه یک تگ ul دیگه برای منوها تعریف کنیم. برای مثال، فرض کنیم در نظر داریم برای منوی Community زیر منوهای Forum، PodCasts و Videos رو ایجاد کنیم. برای اینکار کد HTML مربوط به بخش Community رو به شکل زیر تغییر می دیم:

<li><a href="#">Home</a></li>
<li>
	<a href="#">Community</a>
	<ul class="sub-menu">
		<li><a href="#">Forum</a></li>
		<li><a href="#">PodCasts</a></li>
		<li><a href="#">Videos</a></li>
	</ul>
</li>
<li><a href="#">Blog</a></li>

دقت کنید که برای ul زیر منو کلاس sub-menu تخصیص داده شده تا بتونیم در تگ style، استایل های مربوطه رو اعمال کنیم. حالا باید کد CSS مربوط به زیر منو رو بنویسیم. برای اینکار کدهای زیر را به تگ style اضافه می کنیم:

/* styles for sub menu */
#nav .sub-menu{
	display: none;
	position: absolute;			
}

#nav .sub-menu > li > a{
	display: block;
	width: 120px;
	background-color: darkred;
	color: white;
	padding: 5px 10px;
}

#nav .sub-menu > li:hover > a{
	background-color: orange;
}

#nav li:hover > .sub-menu{
	display: block;
}		

با افزودن کد بالا و باز کردن صفحه، نتیجه کار باید به صورت زیر باشد:

Step2

در اینجا باید به یک نکته مهم توجه کرد که position تمام تگ های li به حالت relative و position تمام ul هایی که کلاس sub-menu رو دارند (زیر منوها) از نوع absolute تعریف شده. دلیل اینکار اینکه که تگ ul زیر منو داخل li فضایی رو اشغال نکنه و بتونیم داخل تگ li جایگاهش رو تغییر بدیم. در صورتی که position ها رو اعمال نمی کردیم، نتیجه به صورت زیر می شد:

Wrong positioning

خوب تا اینجا ما تونستیم یک مرحله زیر منو به منوهای اصلی اضافه کنیم. حالا فرض کنیم بخواییم به هر یک زیر منوها هم یک زیر منوی دیگه اضافه کنیم و این کار به صورت درختی تا هر مرحله ای که خواستیم ادامه بدیم. برای مثال، فرض کنید تصمیم داریم زیر منوی Videos در منوی Community دارای زیر منوی های Programming، Database و Network باشه و خود زیر زیر منوی Database دارای زیر منوهای SQL Server، Oralce و MySQL باشه. برای اینکار ابتدا کد HTML بخش Community رو به صورت زیر تغییر می دیم:

<li>
	<a href="#">Community</a>
	<ul class="sub-menu">
		<li><a href="#">Forum</a></li>
		<li><a href="#">PodCasts</a></li>
		<li>
			<a href="#">Videos</a>
			<ul class="sub-menu">
				<li><a href="#">Programming</a></li>
				<li>
					<a href="#">Database</a>
					<ul class="sub-menu">
						<li><a href="#">SQL Server</a></li>
						<li><a href="#">Oracle</a></li>
						<li><a href="#">MySQL</a></li>
					</ul>
				</li>
				<li><a href="#">Network</a></li>
			</ul>
		</li>
	</ul>
</li>

اگر صفحه html رو داخل مرورگر باز کنیم، نتیجه به صورت زیر خواهد بود:

Step4

اما نتیجه هنوز مورد نظر ما نیست، برای اینکه زیر منوهایی که زیر مجموعه یک زیر منوی دیگه هستند، باید جلوی منو باز بشوند، زیر زیر آن. برای اینکار باید موقعیت sub-menu هایی داخل یک sub-menu هستند رو تنظیم بکنیم. برای اینکار کد CSS زیر رو به تگ style صفحه اضافه می کنیم:

/* styles for sub-menu under sub-menu */
#nav .sub-menu > li > .sub-menu{
	left: 140px;
	top: 0;
}

با افزودن کد بالا و باز کردن صفحه در مرورگر، نتیجه به صورت زیر خواهد بود:

Step5

خوب تا اینجای کار تونستیم یک DropDown منوی ساده بوسیله HTML و CSS ایجاد کنیم. با استفاده از تکنیک آموزش داده شده به هر میزان که مایل باشیم میتونیم زیر منو به منوهامون اضافه کنیم. فقط کافیه تگ ul ای که به عنوان زیر منو استفاده میشه کلاس sub-menu رو داشته باشه.

کد کامل صفحه html ایجاد شده به صورت زیر می باشد:

<!DOCTYPE html>
<head>
	<title>DropDown Menu with HTML and CSS</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}

		.clear-fix{
			clear: both;
		}

		a{
			text-decoration: none;
		}

		#nav{
			background-color: black;
			border-bottom: 2px solid darkred;			
		}

		#nav ul{
			list-style: none;
		}

		#nav li{
			position: relative;
		}

		#nav > ul > li{
			float: left;			
		}

		#nav > ul > li > a{
			display: inline-block;
			color: white;
			padding: 0 10px;
			line-height: 30px;
		}

		#nav > ul > li:hover > a{
			background-color: darkred;
			color: white;
		}
		
		/* styles for sub menu */
		#nav .sub-menu{
			display: none;
			position: absolute;			
		}

		#nav .sub-menu > li > a{
			display: block;
			width: 120px;
			background-color: darkred;
			color: white;
			padding: 5px 10px;
		}

		#nav .sub-menu > li:hover > a{
			background-color: orange;
		}

		#nav li:hover > .sub-menu{
			display: block;
		}
		
		/* styles for sub-menu under sub-menu */
		#nav .sub-menu > li > .sub-menu{
			left: 140px;
			top: 0;
		}
	</style>
</head>
<body>
	<div id="nav">
		<ul>
			<li><a href="#">Home</a></li>
			<li>
				<a href="#">Community</a>
				<ul class="sub-menu">
					<li><a href="#">Forum</a></li>
					<li><a href="#">PodCasts</a></li>
					<li>
						<a href="#">Videos</a>
						<ul class="sub-menu">
							<li><a href="#">Programming</a></li>
							<li>
								<a href="#">Database</a>
								<ul class="sub-menu">
									<li><a href="#">SQL Server</a></li>
									<li><a href="#">Oracle</a></li>
									<li><a href="#">MySQL</a></li>
								</ul>
							</li>
							<li><a href="#">Network</a></li>
						</ul>
					</li>
				</ul>
			</li>
			<li><a href="#">Blog</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
		<div class="clear-fix"></div>
	</div>
</body>
</html>

امیدوارم که این آموزش مورد استفاده دوستان عزیز واقع شده باشد.

موفق، پیروز و سربلند باشید.

نویسنده : حسین احمدی

منبع : جزیره طراحی و توسعه وب وب سایت توسینسو

هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی است

#پیشنهاد_طراحی_منوی_تودرتو #ایجاد_منوی_فارسی_در_asp.net #چگونه_در_css_منوی_کشویی_ایجاد_کنیم #چگونه_در_html_منوی_کشویی_ایجاد_کنیم #ایجاد_منوی_کشویی_در_css #آموزش_ایجاد_منوی_کشویی #ایجاد_menu_های_تودرتو #ایجاد_منوی_کشویی_در_html #طراحی_منوی_سایت
6 نظر
امیر حسین بقایی

البته بهتره که با سی اس اس 3 بهش انیمیشن هم بدید که کمی سرعت متعادل تر داشته باشه که زیاد سریع و بی روح نباشه...:)

این نظر توسط حسین احمدی در تاریخ دوشنبه, 8 تیر 1394 حذف شده است.

دلیل: سوال خود را در قالب یک سوال در انجمن مطرح بفرمایید.

test

این توسط test در تاریخ چهارشنبه, 20 آبان 1394 حذف شده است.

Reason: پیدا کردن پاسخ

سلام و سپاس بسیار بخاطر مطلب مفیدتون

یک سوال داشتم ممنون میشم اگه جواب بدین

من منوهام چون فارسی راست چین کردن ولی زیرمنوها کماکان چپ چین

یعنی زیر منوها بجایی این که جول منو باز بشه پشت سر منو باز میشه

باید چیکار کنم که جلو منو باز بشه؟

سیدرضا بازیار

بعد از خط اول نیاز نیست که ابتدا تگ html رو باز کنیم؟

به این صورت:

<!DOCTYPE html>
<html>

کاربرد clear-fix توی css چیه؟

zahra .m

سلام استاد وقت بخیر

استاد در بخش css یه جای کد هست که متوجه نمیشم

#nav li{
	position: relative;
}

#nav > ul > li{
	float: left;			
}

چرا اینا رو از هم جدا تعریف کردید؟نمیشه float:left رو بعد از position مقدار بدید؟

حسین احمدی

سلام، اگر دقت کنید، تو بخش اول کلیه li های زیر مجموعه ul استایل داده شده، یعنی شما اگر چندین ul دیگه داخل li هاتون داشته باشید، li های اون ها اهم استایل رو میگیرن.

اما بخش دوم، گفته شده تنها li های مربوط به ul ای که مستقیم داخل nav قرار دارن و به سایر li های زیر مجموعه اعمال نمیشه.

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....