تا %60 تخفیف خرید برای 2 نفر با صدور مدرک فقط تا
00 00 00

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

حسین احمدی
حسین احمدی
12 پسند
30792 بازدید
4 نظر
83 ماه قبل

چگونه منوی کشویی با 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>

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

نظر شما
برای ارسال نظر باید وارد شوید.
6 نظر