آموزش ساخت منو چند سطحی با css

یکی از مباحث مهم در css که خود ما نیز در ابتدای دوره های آموزشی خیلی دنبالش بودیم آموزش ساخت منو چند سطحی با css بود . منو چند سطحی چیه ؟ البته منوی چند سطحی رو گاها با نام منو آکاردئونی هم خطاب می کنن ، به این تصویر دقت کنید :

منو آکاردئونی

این تصویر بخشی از منو وب سایت سئو 90 هستش که نشون میده ما سه سطح منو داریم . سطح اول همون منو بالایی هستند که این آیتم ها داخلش هستند : ( صفحه اصلی ، مقالات آموزشی ، محصولات ، طراحی سایت ، سبد خرید ، حساب کاربری ، آموزش )

سطح دوم منو که اصطلاحا به اونها زیرمنو هم گفته می شه سطح دومی هستند که زیر منوهای سطح اول قرار می گیرند  .اگر به تصویر دقت کنید می بینید که بخش آموزش خودش یک سطح دوم هم داره که این آیتم ها داخلش هستند : ( دوره CSS ، دوره WordPress ) ، پس این هم سطح دوم منوی سایت ما هستش . اما حالا ما یک سطح سوم هم داریم که زیر منوهای همین بخش دوم هستن .

یعنی هرکدوم از بخش های دوره CSS ، دوره WordPress هم می تونن خودشون یک زیرمنو دیگه هم داشته باشن که همونطور که توی تصویر می بینید منو دوره WordPress خودش باز یک زیر منو و سطح دیگه داره که این آیتم ها داخلش هستند : ( قدم اول وردپرس ، ترفندهای WordPress ) ، پس حالا ما سه تا سطح داریم حالا میشه بیشتر از اینم طراحی کرد اما الگوی استاندارد برای ساخت منو های چند سطحی همون 3 سطح هستند .

شروع کد زنی سطح اول

حالا مفهوم منو چند سطحی رو خیلی خوب می تونید درک کنید . پس ما می تونیم Level ب Level منو هارو بسازیم و برای اونها زیرمنو قرار بدیم .

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

<ul>
       <li><a href="#">خانه</a></li>
       <li><a href="#">محصولات</a></li>
       <li><a href="#">تماس با ما</a></li>
       <li><a href="#">درباره ما</a></li>
</ul>

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

*{
margin:0;
padding:0;
}
body{
direction:rtl;
padding:50px;
text-align:center;
}
ul {
	background-color:#eee;
}
ul li{
	display:inline-block;
	list-style:none;
	margin: 0px 15px;
}
ul li a{
	text-decoration:none;
	color:#222;
	display:inline-block;
	padding:15px 0;
}

تا این بخش ما کدهامون به شکل زیر هستند و منوی سطح اول خودمون رو ساختیم :

البته ما فونت رو هم به پروژمون اضافه کردیم و ممکنه که شما فونتتون همون فونت معمولی باشه پس ازاون لحاظ مشکلی نیست . اما طبق کد هامون اگر پیش برید ساختار و شکل کلی منو ما به این شکل خواهد بود .

ساخت زیر منو برای سطح اول

حالا فرض می کنیم که برای یکی از منو های ردیف اول یک زیرمنو یا همون منو سطح دوم ایجاد کنیم . برای هرکدوم که بود فرق نداره مثلا برای بخش محصولات می خواهیم که منو سطح دوم بسازیم . دوستان مگر سطوح یعدی خودشون همون ساختار منو رو ندارن ؟ خودشون هم همون ساختار ul و li رو دارن پس ما باید داخل هر یک از li هایی که می خواهیم داخلش زیر منو بسازیم باز همون ساختار ul و li رو بسازیم . دقیقا به کد زیر دقت کنید :

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

دوستان خیلی خوب به این کد دقت کنید ، ما می خواستیم داخل بخش محصولات یک زیر منو داشته باشیم پس داخل تگ li مربوط به محصولات و قبل از اینکه تگ li بسته بشه اومدیم و دوباره یک ساختار ul و li رو اضافه کردیم .

ساختار Html منو برای تمامی بخش ها به یک شکل هست فقط تفاوت استایل دارند !

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

ul li{
	display:inline-block;
	list-style:none;
	margin: 0px 15px;
	position:relative;
}
ul li a{
	text-decoration:none;
	color:#222;
	display:inline-block;
	padding:15px 0;
	font-size:13px;
}
ul li ul{
	position: absolute;
    top: 50px;
    right: 0;
    width: 180px;
    background-color: #f7f6f6;
}
ul li ul li{
	width:100%;
	margin:5px 0;
	text-align: right;
}
ul li ul li a{
	padding: 8px;
    display: block;
}

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

منو سطح دوم

اگر کدهارو دست اجرا کنید مشاهده می کنید که به چه زیبایی ما تونستیم سطح دوم رو هم ایجاد کنیم . حالا برای اینکه سطح سوم رو هم ایجاد کنیم بازهم کارمون راحت تره . برای مثاال می خواهیم برای بخش هدفون هم یک زیر منو داشته باشیم که سطح سوم ما میشه . بازهم عین سطح دوم چون میخواهیم که داخل بخش هدفون یک منو جدید داشته باشیم پس داخل li بخش هدفون یک ساختار ul و li جدیدایجاد میکنیم :

<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> 
			<li><a href="#">فلش مموری</a></li> 
			<li><a href="#">هدفون</a>
					<ul> 
						<li><a href="#">هدفون برند One</a></li> 
						<li><a href="#">هدفون برند Be</a></li> 
						<li><a href="#">هدفون Iph</a></li> 
						<li><a href="#">هدفون Smmt</a></li> 
					</ul>
			</li> 
		</ul>
	</li> 
	<li><a href="#">تماس با ما</a></li> 
	<li><a href="#">درباره ما</a></li> 
</ul>

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

ul li ul li ul{
	right:100%;
	top:0;
}

در این حال منو ما دقیقا باید به شکل زیر باشه :

سطح سوم منو آکاردئونی

آموزش ساخت منو چند سطحی با css ( مهم ترین نکته )

خب تا ایجا با با چند خط Html و Css تونستیم آموزش ساخت منو چند سطحی با css رو تا اینجا پیش ببریم اما نکته مهمی که لازم به اون توجه کنید اینه که فعلا همه منو های ما دارن نشون داده میشن و ما قرار هست که وقتی روی منو ها رفتیم اگر زیر منو داشتن اونهارو برای ما نشون بده و باید زیرمنو های سطح های یعدی بجز سطح اول برای ما مخفی باشند . پس ما باید تغییراتی رو کدهای مربوط به ul هامون قرار بدیم . ما باید ویژگی های opacity و visibility رو برای ul ها تنظیم کنیم و موقع hover شدن li ها اگر  داخل اونها ul بود یا همان زیرمنو بودبرای ما اونهارو نشون بده پس در قدم اول کد زیر رو به ul اضافه می کنیم و مقدار transition رو هم تنظیم می کنیم تا حالت ظاهر شدن و محو شدن با حالت آرام انجام بشه :

ul li ul{
	position: absolute;
        top: 50px;
        right: 0;
        width: 180px;
        background-color: #f7f6f6;
	opacity:0;
	visibility:hidden;
	transition: all 0.3s ease;
}

بعد ار این کد زیر منو ها برای ما مخفی میشن و حالا لازم هستش که ما تعیین کنیم که وقتی روی تگ li رفتیم اگر زیر منو داشت برای ما نشون داده بشن پس کافیه یک بخش دیگه یه کدهامون اضافه کنیم تا وفتی روی li ها در هر سطحی رفتیم اگر داخلش ul بود برای ما نشون بده ، پس :

ul > li:hover > ul{
	opacity:1;
	visibility:visible;
	transition: all 0.3s ease;	
}

دوستان بعد از قرار دادن این بخش ، منو چند سطحی ما آماده هستش و فقط با چند خط Html و Css تونستیم یک منو آکاردئونی بسیار زیبا برای سایتمون طراحی کنیم .

به این راحتی تونستیم آموزش ساخت منو چند سطحی با css رو باهم یاد بگیریم .

دانلود سورس پروژه