آموزش ساخت منوی کشویی با CSS و HTML

آخرین بروزرسانی 26 اسفند 1400

در ادامه سری آموزش های HTML و CSS امروز تصمیم داریم که به مبحث ساخت منوی کشویی یا همان منوی دراپ داون با استفاده از CSS و HTML بپردازیم. شاید در نگاه اول ایجاد منوهای دراپ داون کمی پیچیده به نظر بیاید ولی در این آموزش متوجه خواهید شد که ساختن این منوها فقط با به کار گیری استایلهای ساده CSS امکان پذیر بوده و در واقع ساخت این نوع منوها نیاز به انجام هیچ عمل پیچیده ای ندارد. در این آموزش به صورت عملی بر روی یک پروژه کوچک کار میکنیم. در پایان آموزش شما، هم قادر خواهید بود که خودتان منوی کشویی بسازید و هم میتوانید کدهای نمونه ای که در همین آموزش در اختیار شما قرار میگیرد را به دلخواه خود ویرایش کنید تا به منوی دلخواهتان دست پیدا کنید. از شما دعوت میکنیم که در ادامه آموزش ساخت منوی کشویی CSS با مسترکد همراه شوید.

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

پیش از اینکه بخواهیم به سراغ آموزش نحوه ایجاد منوی دراپ داون با استفاده از CSS و HTML برویم، شاید بد نباشد که نگاهی به آنچه در پایان پروژه به آن دست پیدا میکنیم بیاندازیم تا حداقل بدانیم که در پایان کار، چه چیزی منتظرمان خواهد بود. تصویر زیر، منوی کشویی ما را در انتهای کار نمایش میدهد :

ساختار HTML منوی کشویی

پیش از هرچیز یک نکته را مشخص کنیم. در بعضی از قسمت ها از عبارت منوی کشویی و در بعضی قسمت ها از عبارت منوی دراپ داون استفاده کرده ایم، این دو نام هردو به یک نوع منو اشاره دارند. عبارت منوی کشویی معمولا بیشتر در زبان فارسی به گوشمان میخورد ولی این عبارت دقیقا معادل منوی دراپ داون (drop down) است که گاها از آن با عنوان منوی بازشونده هم یاد میکنیم.

منوی کشویی که امروز ایجاد میکنیم (و تقریبا هر منوی کشوی دیگری که هر روز در سایت های مختلف مشاهده میکنید) از لحاظ کد HTML ساختار بسیار ساده ای دارند. برای ایجاد این نوع منو ها عموما از تگ های ul و li استفاده میشود. ما هم در ساختار منوی خود از همین کدنویسی پیروی میکنیم. البته ما اینجا یک کار دیگر هم انجام میدهیم. کل ناحیه منو را با تگ nav که از تگ های html5 و مخصوص منوهای ناوبری است، احاطه میکنیم تا محل قرارگیری منو از لحاظ ساختار کدنویسی، کاملا مشخص باشد. در این حالت یک منوی ساده تک مرحله ای (فاقد هر نوع زیرمنو) دارای ساختاری مشابه زیر خواهد بود :

<nav>
	<ul>
		<li><a href="#">مسترکد</a></li>
		<li><a href="#">آموزش ها</a></li>
		<li><a href="#">دانلود</a></li>
		<li><a href="#">تماس با ما</a></li>
	</ul>
</nav>

<nav>

<ul>

<li><a href="#">مسترکد</a></li>

<li><a href="#">آموزش ها</a></li>

<li><a href="#">دانلود</a></li>

</ul>

</nav>

فکر میکنم نیازی به توضیح نباشد که کد بالا فقط یک مثال است و آیتم های منو میتوانند با توجه به نیاز شما متفاوت باشند. همچنین در کد بالا بجای لینک دلخواه در تگ a از نامبرساین یا # استفاده کرده ایم که شما میبایست آن را با لینک دلخواه خود جایگزین کنید.

تا اینجا کدی که ما در اختیار داریم تنها حاوی سطح اول منوهای ماست. حال برای اینکه بتوانیم به آیتم های دلخواه منو، زیر منو اضافه کنیم، کافی است دقیقا با پیروی از همان ساختار یک بلاک کامل ul و li به آیتم منوی دلخواهمان اضافه کنیم تا آیتم مورد نظر دارای زیر منو شود. به عنوان مثال حالا میخواهیم سه زیرمنوی “وردپرس، جوملا و متفرقه” را به آیتم منوی آموزش ها اضافه کنیم. در این حالت کد ما به شکل زیر در می آید :

<nav>
	<ul>
		<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>
			</ul>
		</li>
		<li><a href="#">دانلود</a></li>
		<li><a href="#">تماس با ما</a></li>
	</ul>
</nav>

<nav>

<ul>

<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>

</ul>

</li>

<li><a href="#">دانلود</a></li>

</ul>

</nav>

همانطور که مشاهده میکنید یک بلاک ul کامل به تگ li مربوط به آیتم آموزش ها اضافه کرده ایم. مجددا به همین ترتیب میتوانیم به زیرمنوی متفرقه هم دو زیرمنوی دیگر اضافه کنیم :

<nav>
	<ul>
		<li><a href="#">مسترکد</a></li>
		<li><a href="#">آموزش ها</a>
			<ul>
				<li><a href="#">وردپرس</a></li>
				<li><a href="#">جوملا</a></li>
				<li><a href="#">متفرقه</a>
					<ul>
						<li><a href="#">HTML</a></li>
						<li><a href="#">CSS</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="#">دانلود</a>
			<ul>
				<li><a href="#">قالب وردپرس</a></li>
				<li><a href="#">قالب جوملا</a></li>
			</ul>
		</li>
		<li><a href="#">تماس با ما</a></li>
	</ul>
</nav>

<nav>

<ul>

<li><a href="#">مسترکد</a></li>

<li><a href="#">آموزش ها</a>

<ul>

<li><a href="#">وردپرس</a></li>

<li><a href="#">جوملا</a></li>

<li><a href="#">متفرقه</a>

<ul>

</ul>

</li>

</ul>

</li>

<li><a href="#">دانلود</a>

<ul>

<li><a href="#">قالب وردپرس</a></li>

<li><a href="#">قالب جوملا</a></li>

</ul>

</li>

</ul>

</nav>

همانطور که مشاهده میکنید، حالا ما یک منوی سه سطحی داریم. در حال حاضر با توجه به اینکه برای این منو استایل css ای ننوشته ایم، نتیجه کد نوشته شده در بالا چیزی مشابه تصویر زیر خواهد بود :

نکته جالب این است که علیرغم اینکه برای کد بالا هیچ نوع استایلی تعریف نکرده ایم، اما با همین کد ساده هم در واقع منوها و زیرمنوها کاملا مشخص هستند و به سادگی میتوان تشخیص داد که کدام آیتم ها، زیرمجموعه ای از آیتم دیگر به شمار میروند. حالا بیایید با هم به سراغ تعریف استایل های مناسب برای آیتم های منوی کشویی مان برویم.

استایل CSS منوی کشویی

حالا که نوشتن کد html منوی کشویی ما به پایان رسیده، نوبت به نوشتن استایلهای CSS آن میرسد. در اینجا اولین قدم ما این است که کاری کنیم که اولا در حالت عادی، فقط آیتم های اصلی منو به نمایش در بیایند و دوما، هرگاه ماوس بر روی سردسته منویی قرار میگیرد که دارای زیرمنو است، زیرمنو های آن به نمایش گذاشته شوند. برای این کار کد زیر را به استایل های css خود اضافه میکنیم :

nav ul ul {
	display: none;
}

nav ul li:hover > ul {
	display: block;
}

nav ul ul {

display: none;

}

nav ul li:hover > ul {

display: block;

}

در خط اول ابتدا ul های فرزند را نشانه گرفته ایم و گفته ایم که این ul ها باید مخفی شوند. سپس در خط 5 ام با استفاده از علامت < مشخص کرده ایم که استایل نوشته شده در این بخش فقط مربوط به ul ای است که در حال حاضر ماوس بر روی تگ والد آن قرار گرفته. این کار را به این دلیل انجام دادیم که از به نمایش گذاشته شدن همزمان همه ul های فرزند در زمان قرارگیری ماوس روی یکی از سرمنوها جلوگیری شود. (این مورد را میتوانید خودتان تست کنید تا دقیقا متوجه تاثیر قراردادن علامت بزرگتر در این بخش بشوید. چرا که در صورت عدم موجود بودن این علامت، وقتی ماوس را روی یکی از منوهای دارای زیرمنو قرار میدهید، کلیه سطوح زیرین آن با هم به نمایش در خواهند آمد که این مسئله برای ما ایده آل نیست)

در ادامه تصمیم داریم نحوه نمایش و رنگ منو را تعیین کنیم :

nav ul {
	background: #f1f4f7;
	box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
	padding: 0 20px;
	border-radius: 10px;
	list-style: none;
	position: relative;
	display: inline-table;
}
nav ul:after {
	content: "";
	clear: both;
	display: block;
}

nav ul {

background: #f1f4f7;

box-shadow: 0px 0px 9px rgba(0,0,0,0.15);

padding: 0 20px;

border-radius: 10px;

list-style: none;

position: relative;

display: inline-table;

}

nav ul:after {

content: "";

clear: both;

display: block;

}

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

سپس نوبت به تعریف استایل های آیتم های رده اول منو میرسد :

nav ul li {
	float: right;
	position: relative;
	font-weight: bold;
}

nav ul li:hover {
	background: #a70101;
}

nav ul li:hover a {
	color: #fff;
}

nav ul li a {
	display: block;
	padding: 15px 32px;
	color: #4e4e4e;
	text-decoration: none;
}

nav ul li {

float: right;

position: relative;

font-weight: bold;

}

nav ul li:hover {

background: #a70101;

}

nav ul li:hover a {

color: #fff;

}

nav ul li a {

display: block;

padding: 15px 32px;

color: #4e4e4e;

text-decoration: none;

}

در ابتدا محل شناوری آیتم li را بر روی right تنظیم کرده ایم تا آیتم های منو در کنار هم از راست به چپ و متناسب با زبان فارسی نشان داده شوند. و سپس در خط هفتم مشخص کرده ایم که در زمان قرارگیری ماوس روی یکی از آیتم های منو، پس زمینه آن به چه رنگی در بیاید. و در بخش بعدی نیز رنگ لینک های تگ a را در زمان شناور شدن ماوس روی آنها مشخص کرده ایم.

تا اینجا آیتم های رده اول منو دارای استایل های مناسب هستند. حالا نوبت آیتم های سطح دوم منو است. باید برای این آیتم ها هم استایل های مناسبی تعریف کنیم :

nav ul ul {
	background: #9c0000;
	border-radius: 0px;
	padding: 0;
	position: absolute;
	top: 100%;
	right: 0;
	width: 200px;
}
nav ul ul li {
	float: none;
	border-top: 1px solid #940000;
	border-bottom: 1px solid #940000;
	position: relative;
}
nav ul ul li a {
	padding: 15px 40px;
	color: #fff;
}	
nav ul ul li a:hover {
	background: #112f44;
}

nav ul ul {

background: #9c0000;

border-radius: 0px;

padding: 0;

position: absolute;

top: 100%;

right: 0;

width: 200px;

}

nav ul ul li {

float: none;

border-top: 1px solid #940000;

border-bottom: 1px solid #940000;

position: relative;

}

nav ul ul li a {

padding: 15px 40px;

color: #fff;

}

nav ul ul li a:hover {

background: #112f44;

}

استایل هایی که در این بخش تعریف کرده ایم در واقع استایلهای ساده ای هستند. در خط پنجم حالت absolute را برای قرارگیری ul های زیرمنو تعریف کرده ایم تا بتوانیم موقعیت آنها را نسبت به آیتم والد تعیین کنیم. همانطور که مشاهده میکنید این کار را با تعیین فاصله 100 درصد از بالا و 0 از سمت راست انجام داده ایم. سپس برای زیبایی بیشتر، عرض زیرمنو را نیز تعیین کرده ایم. طبعا این مقدار را میتوانید با توجه به نیاز خود تغییر دهید.

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

nav ul ul ul {
	position: absolute;
	right: 100%;
	top:0;
}

nav ul ul ul {

position: absolute;

right: 100%;

top:0;

}

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

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

دانلود نمونه تکمیل شده

حالا که به پایان کار رسیدیم و منوی ما آماده است، اگر هنوز نتوانستید خودتان کدهای بالا را در کنار هم قرار داده و منوی مناسبی ایجاد کنید، جای هیچ نگرانی نیست. شما میتوانید نمونه آماده شده همین پروژه را با استفاده از دکمه زیر دریافت کرده و با بررسی کد های موجود در آن، نحوه در کنار هم قرار دادن کدهای بالا را بیاموزید.

دریافت نمونه تکمیل شده منوی دراپ داون CSS

توجه داشته باشید که در نمونه بالا برخی استایلها و کدهای html اضافه نیز جهت تکمیل استایلهای صفحه و … موجود هستند.

سخن پایانی

به عنوان یک تمرین پایانی حالا میتوانید سعی کنید به آیتم های منوی دراپ داون ای که با هم ایجاد کردیم، آیکن اضافه کنید. (برای این کار میتوانید سری به آیکن های فونتی Font Awesome بزنید)

امیدواریم از این آموزش لذت برده باشید. راستی فراموش نکنید که تجربه تان را از دنبال کردن این آموزش در بخش دیدگاه ها با ما به اشتراک بگذارید.

دسترسی آسان به این مطلب لینک کوتاه :

91 دیدگاه

سینا می گوید 5 سال پیش
لطفا آموزش ساخت یک منوی کشویی واکنش گرا بزارید.
پاسخ
ارمین می گوید 5 سال پیش
توی گوشی بد نشون میده
پاسخ
1. MrCode می گوید 5 سال پیش
  چون ریسپانسیو نیست. این آموزشو چک کنید :
  https://mrcode.ir/?p=5983
  پاسخ
ابوالفضل می گوید 5 سال پیش
سلام ممنون بابت مقالات اموزشی عالیتون
پاسخ
شکیب می گوید 5 سال پیش
سلام
ممنون عالی توضیح دادین
پاسخ
Saba می گوید 4 سال پیش
خیلی ممنون خیلی عالی بود فقط برای من همه چیز رو نمایش میده ولی زیر منو هارو نمایش نمی ده چیکار کنم؟
پاسخ
شیما می گوید 4 سال پیش
خیلی ممنونم عالی بود سالم باشید
پاسخ
amir mohammad می گوید 4 سال پیش
خیلی عالیه ممنون از اموزشتون
پاسخ
معین می گوید 4 سال پیش
من میخوام این کد منو رو برای ورد پرس اجرا کنم
راهنمایی کنید چگونه باید اجراش کنم همین کد
پاسخ
sahar می گوید 4 سال پیش
باید دیسپلی رو نان بزارید و وقتی روش هور شد دیسپلی رو بلاک کنید
پاسخ
Pouria می گوید 3 سال پیش
سلام من یک زیر منو تو تگ table تعریف کردم و زیر این تگ یه عکس گذاشتم اما وقتی رو زیر منو خا hover میکنم زیر عکس قرار میگیره و کامل نشون داده نمیشه چیکار کنم ؟؟ ??فقط html و css کار میکنم
پاسخ
1. یک فرانت اند کار می گوید 1 سال پیش
  سلام باید برای عکس یکم استایل بدی مثلاً طول و عرض و اینا رو تعریف کنی
  پاسخ
علی می گوید 3 سال پیش
مرسی از مقاله خوبتون و همیم طور سایر مطالب مفید سایتتون
پاسخ
Mbynas می گوید 2 سال پیش
چرا برای من زیر منو هارو نمایش نمیده
پاسخ
ابوالفضل می گوید 2 سال پیش
سلام، نمونه آنلاین منو را در http://codepen.io قرار دهید.
پاسخ
محمد سجاد می گوید 1 سال پیش
عالی خیلی مفید بود😊😊😊
پاسخ

دیدگاه های قبلی صفحه 2 از 2

ارسال پاسخ