سئوالات متداول درباره این دوره

در این دوره آموزشی مهم ترین پیش نیاز های شما ، آشنایی با زبان نشانه گذاری Html و مهم تر از آن کمی آشنایی با آموزش css می باشد . چرا که در این دوره فرض مدرس بر این است که شما تا حدی که بتوانید کد های ارائه شده را درک کنید ، ذهنیتی از html و css دارید و صفر مطلق نیستید .

باید گفت بله ! در داخل این دوره آموزشی شما علاوه بر یادگیری 30 نکته طلایی و 3 روش کلی ، یک روش اصولی و کامل را نیز آموزش خواهید دید تا بتوانید به کمک آن در هر نوع قالب و وب سایتی ، منو های خود را در بی نهایت سطح بدون مشکل پیاده کنید .

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

مسیر خود را با این دوره ها ادامه دهید

20 %

نابغه CSS – آموزش CSS جامع و تضمینی

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

595,000 تومان
476,000 تومان     17 فروش
15 %

آموزش جامع بوت استرپ 5 ، 4 ، 3 ، صفر تا صد و پروژه محور

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

675,000 تومان
575,000 تومان     8 فروش

آموزش جامع جی کوئری – تضمینی ، ویژه بازار کار ، صفر تا صد

در این دوره آموزشی شما یکبار برای همیشه سیر تا پیاز جی کوئری به همراه تمامی جوانب آن را یاد خواهید گرفت . آموزش مقدماتی جاوا اسکریپت ، اموزش کاربردی ترین پلاگین های جی کوئری ، مبحث jQuery Ui ، بوت استرپ ، Ajax و ... در قالب ده ها پروژه عملی و واقعی در دوره نابغهjQuery .

635,000 تومان     4 فروش

آموزش طراحی منو های آبشاری با Css

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

در این دوره آموزشی که به صورت ویدئویی می باشد شما روش اصولی و استاندارد ساخت منو های آبشاری یا اصطلاحا منو های چند سطحی را یاد خواهید گرفت . دوستان ساختار Html برای تمامی منو ها در تمامی سطوح به یک شکل هستند اما نکته مهمی که وجود دارد در نحوه استایل نویسی این منو ها می باشد . دوستان عزیزی که در سطح مبتدی تا نسبتا متوسط آموزش Css قرار دارند معمولا به ساخت یک سطح از منو عادت نموده اند و در سطح اینترنت هم متاسفانه آموزش ها یا کامل نیستند و یا بخوبی آموزش داده نمی شوند و اصول محکمی برای ساخت منو ارائه نمی گردد و هر مدرسی به یک روش ساخت منو با Css را آموزش داده است ( که البته مدرسین با تجربه از این موضوع خارج و بسیار قابل احترام هستند ) .

آموزش ساخت منو باز شونده با css

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

منو آبشاری ، منو بازشونده یا منو چند سطحی ؟

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

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

جلسات دوره آموزشی طراحی منو با Css
 1

بررسی ساختار منو در Css ، پروژه اول با خاصیت Float

00:21:50
 2

ساخت منو با Display ، بررسی مزایا و معایب ، راهکارهای طراحی

00:22:11
 3

ساخت منو های پیشرفته تر به کمک تکنولوژی FlexBox

00:20:25
 4

روش اصولی طراحی منو در بی نهایت سطح

00:21:08
 5

اعمال افکت های مختلف بر منو های زیر سطحی

00:18:26
 6

طراحی منو های آکاردئونی عمودی و نکات مهم در مورد این منو ها

00:26:00

آموزش متنی ساخت منو آبشاری با 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;
}

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

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

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

اکنون فرض می کنیم که برای یکی از منو های ردیف اول یک زیرمنو یا همان منو سطح دوم ایجاد کنیم . برای هرکدام که بود فرقی ندارد . مثلا برای بخش محصولات قصد داریم تا منو سطح دوم را بسازیم . دوستان کمی دقت کنید !! سطوح بعدی که قصد داریم ایجاد کنیم خودشان همان ساختار منو های سطح اول را دارند یعنی خودشان همان ساختار 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 را اضافه کردیم .

در این حالت کار ما به شکل نامرتب است و منو سطح دوم نامرتب می باشد به این دلیل که 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;
}

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

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

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

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

خب تا این قسمت با چند خط Html و Css توانستیم تا یک منو 3 سطحی با 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 را باهم یاد بگیریم . اما این تنها یکی از روش های ساخت منو های آبشاری با Css بود که در داخل ویدئو های آموزشی چندین و چند روش مختلف و امروزی تر و استاندارد تر برای طراحی منو ها در بی نهایت سطح خدمتتان ارائه شده است .

رایگان – خرید