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

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

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

در مرحله بعد باید برای منوی های مورد نظرمون زیر منو تعریف کنیم. برای اینکار باید داخل تگ های 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;
}

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

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

خوب تا اینجا ما تونستیم یک مرحله زیر منو به منوهای اصلی اضافه کنیم. حالا فرض کنیم بخواییم به هر یک زیر منوها هم یک زیر منوی دیگه اضافه کنیم و این کار به صورت درختی تا هر مرحله ای که خواستیم ادامه بدیم. برای مثال، فرض کنید تصمیم داریم زیر منوی 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 رو داخل مرورگر باز کنیم، نتیجه به صورت زیر خواهد بود:

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

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

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

خوب تا اینجای کار تونستیم یک 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>

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

حسین احمدی

بنیانگذار توسینسو و برنامه نویس و توسعه دهنده ارشد وب

حسین احمدی ، بنیانگذار TOSINSO ، توسعه دهنده وب و برنامه نویس ، بیش از 12 سال سابقه فعالیت حرفه ای در سطح کلان ، مشاور ، مدیر پروژه و مدرس نهادهای مالی و اعتباری ، تخصص در پلتفرم دات نت و زبان سی شارپ ، طراحی و توسعه وب ، امنیت نرم افزار ، تحلیل سیستم های اطلاعاتی و داده کاوی ...

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

نظرات