0

عرصه طراحی سایت یکی از عرصه های کاربردی در عصر حاضر می باشد و روز بروز بر تکنیک ها و ابزارهای این عرصه افزوده می شود و تمامی افرادی که در این زمینه فعالیت می کنند حتما باید زمانی رو جهت آموزش کنار بگذارند تا بتوانند در زمینه وب رقابت کنند ما در این بلاگ سعی بر آن داریم مطالب روز طراحی وب را به شما عرضه کنیم. که می توان آنها را به دسته بندی های کلی زیر تقسیم کرد.

آموزش css

آموزش html

آموزش انواع cms از قبیل joomla و wordpress

ساخت یک منوی drop-down با استفاده از css

15 ارديبهشت 1393

ساخت یک منوی drop-down با استفاده از css

نحوه ساخت منوی دراپ دان

منو ها قسمت مهمی از هرسایت می باشند. که نه تنها باعث دسترسی آسان و سریع به قسمت های مختلف سایت را فراهم می کنند بلکه می توان از آنها برای دسته بندی مطالب سایت و هدایت کاربر به صفحه مورد نظر خود استفاده کرد.

مثلا یک سایت فروشگاه دیجیتال  را در نظر بگیرید دارای بخش های مختلفی مانند موبایل، لب تاپ، تبلت و ... می باشد باز این بخش ها دارای زیر مجموعه می باشند مثلا بخش موبایل می تواند شامل زیر مجموعه های  htc , apple, sony, smsong  باشد و باز هم هریک از این ها می توانند داری زیر مجموعه هایی مثل   صفحه نمایش 3 اینچی، صفحه نمایش 4 اینچی و صفحه نمایش بزرگتر از 4 اینچ و ... باشد. اینجاست که ما با استفاده از یک منوی دراپ دان می توانند این سلسه مراتب را به کاربر نشان دهیم و کاربر رو به صفحه مورد نظر هدایت کنیم.

ساخت منوی اصلی

ابتدا منوی اصلی را ساخته سپس زیر منوها را اضافه می کنیم برای این کار از لیست استفاده می کنیم بدین صورت:

 html
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Drop-down menu</title>
	<link rel="stylesheet" href="/css.css">
</head>
<body>
	<!-- Start Menu -->
	<div id="menu" class="fullwidth">
		<div class="wrapper">
			<ul class="menu">				
				<li><a href="#">صفحه نخست</a></li>
				<li><a href="#">موبایل</a></li>
				<li><a href="#">لپتاپ</a></li>
				<li><a href="#">تبلت</a></li>
				<li><a href="#">تماس با ما</a></li>
				<li><a href="#">درباره ما</a></li>
			</ul>
		</div>
	</div>
	<!-- End Menu -->
</body>
</html>

 سپس css  کار را به آن اضافه می کنیم به این علت که منوی ما راست چین میباشد لیست ها را از سمت راست چیدمان می کنیم. بدین صورت:

css
body{
	padding: 0px;
	margin: 0px;
	font-family: tahoma;
	font-size: 12px;
	direction: rtl;
}
.fullwidth{
	width: 100%
}
.wrapper{
	width: 600px;
	margin: 0 auto;
}
#menu {
	margin-top: 20px;
}
#menu .wrapper{
	background: #333333;
	height: 40px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
#menu ul.menu{
	padding: 0 20px;
}
#menu ul.menu > li{
	float: right;
	margin: 0 10px;
}
#menu ul.menu li{
	padding: 0 10px;
	line-height: 40px;
}
#menu li a{
	color: #fff;
	list-style: none;
	text-decoration: none;
}
#menu ul{
	padding: 0px;
	margin: 0px;
	list-style: none;
}

 

نتیجه

 

 

 اضافه کردن زیر منو

برای اضافه کردن زیر منو،  به منوی موبایل یک لیست به li  آن اضافه می کنیم بدین صورت :

html
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Drop-down</title>
	<link rel="stylesheet" href="/css.css">
</head>
<body>
	<!-- Start Menu -->
	<div id="menu" class="fullwidth">
		<div class="wrapper">
			<ul class="menu">				
				<li><a href="#">صفحه نخست</a></li>
				<li><a href="#">موبایل</a>
					<ul>
						<li><a href="#">اچ تی سی</a></li>
						<li><a href="#">اپل</a></li>
						<li><a href="#">سامسونگ</a></li>
						<li><a href="#">سونی اریکسون</a></li>
					</ul>
				</li>
				<li><a href="#">لپتاپ</a></li>
				<li><a href="#">تبلت</a></li>
				<li><a href="#">تماس با ما</a></li>
				<li><a href="#">درباره ما</a></li>
			</ul>
		</div>
	</div>
	<!-- End Menu -->
</body>
</html>

 سپس کد css زیر را به فایل css خود اضافه میکنیم

css
#menu ul.menu ul{
	width: 200px;
	background: #242424;
}

 

نتیجه

 

به نتیجه حاصله نگاه کنید. مشاهده می کنید مشکلی اساسی وجود دارد می بینید که زیر منو به اندازه عرض خود بین منوها فاصله می اندازد.ما برای رفع این مشکل به زیر منو پوزیشن absolute را اضافه می کنیم بدین صورت:

css
#menu ul.menu ul{
	width: 200px;
	background: #242424;
	position: absolute;
	top: 40px;
	right: 0px;
}

نتیجه

میبینیم که باز  مشکل دیگری پیش می آید زیر منو از جای خود خارج شده و درجای نامناسبی قرار می گیرد میبینیم که مقادیر top  و right را که به زیر منو دادیم از لبه مرورگر حساب شده است در حالی که می خواهیم از منوی بالای خود مورد محاسبه قرار گیرد .
برای اینکار به منوی بالای انها پوزییشن relative را اعمال می کنیم بدین صورت:

css
#menu ul.menu li{
	padding: 0 10px;
	line-height: 40px;
	position: relative;
}

 

نتیجه

 

میبینیم که زیر منو در جای مورد نظر خود قرار گرفت ولی ما میخواهیم که تنها زمانی که موس روی منوی بالای قرار گرفت زیر منو نمایش داده شود برای اینکا ر زیر منو را در حالت عدم نمایش قرار می دهیم به این صورت:

css
#menu ul.menu ul{
	width: 200px;
	background: #242424;
	position: absolute;
	top: 40px;
	right: 0px;
	display: none;
}

و با اضافه کد زیر تنها درحالی که موس روی منوی اصلی قرار گرفت زیر منو را نمایش میدهیم

css
#menu ul.menu li:hover ul{
	display: block;
}

 

 نتیجه

 

می بینیم تنها زمانی که موس بر روی منوی mobile قرار می گیرد زیر منوی آن نمایش داده می شود. حالا می خواهیم به منو اپل  این زیر منو باز هم زیر منو اضافه کنیم بدین صورت:

html
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Drop-down</title>
	<link rel="stylesheet" href="/css.css">
</head>
<body>
	<!-- Start Menu -->
	<div id="menu" class="fullwidth">
		<div class="wrapper">
			<ul class="menu">				
				<li><a href="#">صفحه نخست</a></li>
				<li><a href="#">موبایل</a>
					<ul>
						<li><a href="#">اچ تی سی</a></li>
						<li><a href="#">اپل</a>
							<ul>
								<li><a href="#">صفحه 3 اینچی</a></li>
								<li><a href="#">صفحه 4 اینچی</a></li>
								<li><a href="#">صفحه 5 اینچی</a></li>
							</ul>
						</li>
						<li><a href="#">سامسونگ</a></li>
						<li><a href="#">سونی اریکسون</a></li>
					</ul>
				</li>
				<li><a href="#">لپتاپ</a></li>
				<li><a href="#">تبلت</a></li>
				<li><a href="#">تماس با ما</a></li>
				<li><a href="#">درباره ما</a></li>
			</ul>
		</div>
	</div>
	<!-- End Menu -->
</body>
</html>

و کد css زیر را نیز اضافه می کنیم:

css
#menu ul.menu ul ul{
	right: 200px;
	top: 0px;
	display: none;
}

 

 نتیجه

 

منوی drop-down ما آماده است. دیدیم که به راحتی می توان به وسیله  css یک منوی دراپ دان ساده درست کرد ولی خوب این منو داری هیچ افکتی نیست.
در مطالب بعد با استفاده از css3 و jquery  کمی به این منو افکت اضافه می کنیم . منتظر مطالب بعدی ما باشید.

 
صادق جعفری

صادق جعفری

متخصص طراحی و اجرای انواع قالب وب سایت برای انواع cms (جوملا ، وردپرس و ...)

با بیش از 4 سال سابقه و بیش از 35 پروژه موفق

دیدگاه‌ها

امین فراست
امین فراست یکشنبه, 27 مهر 1393 19:38 پاسخ دادن
اگر بخوام رو به بالا باز بشه باید چه کنم؟؟
می خوام رو به پایین باز نشه و رو به بالا باز بشه
ممنون
صادق جعفری
صادق جعفری دوشنبه, 28 مهر 1393 01:48 پاسخ دادن
کافیه که به جای top:40 از مقدار bottom:40 استفاده کنید
محمد رضا
محمد رضا جمعه, 18 تیر 1395 08:06 پاسخ دادن
ممنون از توضیحات کاملتون
خدا خیرتون بده
فقط من نمیدونم این css و html و کجا باید ذخیره کنم؟
سایت من با پرستا شاپ آوردم بالا و منو افقط بالا رو میخوام درست کنم
کجا باید کد های شما رو ذخیره کنم با چه پسوندی

نوشتن دیدگاه