درخواست های ارتباط
جستجو
لیست دوستان من
صندوق پیام
همه را دیدم
  • در حال دریافت لیست پیام ها
صندوق پیام
رویدادها
همه را دیدم
  • در حال دریافت لیست رویدادها
همه رویدادهای من
تخفیف های وب سایت
همه تخفیف ها

عضویت در

کانال تلگرام

توسینسو

اطلاعات مطلب
مدرس/نویسنده
حسین احمدی
امتیاز: 215942
رتبه:3
344
265
416
2833
حسین احمدی ، بنیانگذار TOSINSO ، توسعه دهنده وب و برنامه نویس ، بیش از 12 سال سابقه فعالیت حرفه ای در سطح کلان ، مشاور ، مدیر پروژه و مدرس نهادهای مالی و اعتباری ، تخصص در پلتفرم دات نت و زبان سی شارپ ، طراحی و توسعه وب ، امنیت نرم افزار ، تحلیل سیستم های اطلاعاتی و داده کاوی ... پروفایل کاربر

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

تاریخ 62 ماه قبل
نظرات 4
بازدیدها 24289
یکی از امکاناتی که خیلی از وب سایت ها از اون بهره مند هستند و خیلی از طراح های وب از اون توی کارهاشون استفاده می کنند، ایجاد منوی های کشوئی یا 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>

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

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

نویسنده : حسین احمدی
منبع : جزیره طراحی و توسعه وب وب سایت توسینسو
هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی است
برچسب ها
مطالب مرتبط

در حال دریافت اطلاعات

نظرات
  • البته بهتره که با سی اس اس 3 بهش انیمیشن هم بدید که کمی سرعت متعادل تر داشته باشه که زیاد سریع و بی روح نباشه...:)
  • این پست حذف شده است
    دلیل حذف: سوال خود را در قالب یک سوال در انجمن مطرح بفرمایید.

  • این پست حذف شده است
    دلیل حذف: پیدا کردن پاسخ

  • بعد از خط اول نیاز نیست که ابتدا تگ html رو باز کنیم؟
    به این صورت:
    <!DOCTYPE html>
    <html>
    

    کاربرد clear-fix توی css چیه؟
  • سلام استاد وقت بخیر
    استاد در بخش css یه جای کد هست که متوجه نمیشم
    #nav li{
    	position: relative;
    }
    
    #nav > ul > li{
    	float: left;			
    }
    
    چرا اینا رو از هم جدا تعریف کردید؟نمیشه float:left رو بعد از position مقدار بدید؟
  • سلام، اگر دقت کنید، تو بخش اول کلیه li های زیر مجموعه ul استایل داده شده، یعنی شما اگر چندین ul دیگه داخل li هاتون داشته باشید، li های اون ها اهم استایل رو میگیرن.
    اما بخش دوم، گفته شده تنها li های مربوط به ul ای که مستقیم داخل nav قرار دارن و به سایر li های زیر مجموعه اعمال نمیشه.

برای ارسال نظر ابتدا به سایت وارد شوید