بهترین فرصت برای یادگیری در قسمت Vip سئو نود هم اکنون برای دانشجوبان عزیز فراهم شده است
جزئیات بیشتربر روی خودت سرمایه گذاری کن
در این دوره آموزشی شما با انواع روش های مختلف ساخت منو های آبشاری آشنا خواهید شد تا بتوانید در تمامی پروژه های طراحی وب ، بدون مشکل و با داشتن یک الگوی کامل ، منو های دلخواه خودتان را با هر استایل و در بی نهایت سطح پیاده سازی کنید . در این آموزش رایگان و جذاب همراه ما باشید .
در این پکیج که از بخش های تکمیلی آموزش فرانت اند می باشد ، قصد داریم تا یکبار برای همیشه ، بخشی بسیار مهم که پیمایش در هر وب سایتی را برای ما ممکن می کنند ( منو ) را به شکل اصولی یاد بگیریم . دوستان این آموزش به شکل یک دوره آموزش ویدئویی می باشد اما در ادامه همین صفحه ، یک آموزش متنی هم برای آن دسته از دوستان که نیاز به یک سورس سریع دارند هم قرار داده شده است که بتوانید به سرعت یک منو برای خودتان طراحی کنید .
در این دوره آموزشی که به صورت ویدئویی می باشد شما روش اصولی و استاندارد ساخت منو های آبشاری یا اصطلاحا منو های چند سطحی را یاد خواهید گرفت . دوستان ساختار Html برای تمامی منو ها در تمامی سطوح به یک شکل هستند اما نکته مهمی که وجود دارد در نحوه استایل نویسی این منو ها می باشد . دوستان عزیزی که در سطح مبتدی تا نسبتا متوسط آموزش Css قرار دارند معمولا به ساخت یک سطح از منو عادت نموده اند و در سطح اینترنت هم متاسفانه آموزش ها یا کامل نیستند و یا بخوبی آموزش داده نمی شوند و اصول محکمی برای ساخت منو ارائه نمی گردد و هر مدرسی به یک روش ساخت منو با Css را آموزش داده است ( که البته مدرسین با تجربه از این موضوع خارج و بسیار قابل احترام هستند ) .
ساخت منو بازشونده با Css از اولیه ترین مسائلی است که هنر آموزان در ابتدای دوره های Css با آن مواجه می شوند و چقدر خوب می شود اگر از همان ابتدای راه بتوان به این افراد راه درست را نشان داد . این دوره در قالب چندین جلسه مختصر و بسیار مفید سعی دارد تا یک راه روشن و اصول کلی به شما ارائه نماید تا در هر نوع وب سایتی که در حال طراحی هستید بتوانید در عرض چند دقیقه منو های خودتان را در بی نهایت سطح پیاده سازی کنید و نگران مشکلات آینده قالب هم نباشید .
همانگونه که در تصویر هم مشاهده می کنید یک جمله تفکر آمیز نوشتیم که گفته شده منطق واحدی برای طراحی همه منو ها وجود دارد . حقیقتا این موضوع با عمل قابل اثبات است چرا که وقتی شما ماهیت منو ها را بخوبی درک کنید دیگر نیاز به هیچ آموزشی ندارید و می توانید بسیار راحت هر نوع منو با هر طراحی را پیاده کنید . نکته مهمی که در تمامی مراحل یادگیری طراحی سایت باید آن را رعایت کنید این است که هرگز کدی را حفظ نکنید . چرا که شما در مسیر یادگیری طراحی سایت با هزاران نمونه مختلف و چندین زبان طراحی و برنامه نویسی کار خواهید کرد . لذا همیشه سعی کنید تا ماهیت کاری که انجام می دهید را بخوبی درک کنید تا بتوانید هر زمان که به طراحی آن رسیدید بدون مشکل و سریع بخش مدنظر را پیاده کنید . در این دوره هم مدرس سعی می کند تا با تفهیم اصولی مطالب و همچنین توضیح روان ، خاصیت منو و نحوه رفتار با آن را خدمتتان توضیح دهد تا آموزش برای شما مفید باشد .
منو ها در زبان css و قسمت طراحی با نام های مختلف خطاب می شوند برای مثال ” منو های آبشاری ، منو های آکاردئونی ، منو های چند سطحی ، منو های بازشونده و … ” که نهایتا ساختار و ماهیت همه آنها یکی است . به همین خاطر یک بخش خوب هم در این دوره وجود دارد و آن هم اینکه ما تنها به یک نمونه اکتفا نکردیم و انواع مختلفی از منو ها را خدمتتان آموزش دادیم تا با مشاهده نمونه مثال های بیشتر ، دست شما به کد نویسی عادت کرده و به این بخش از طراحی صفحات وب تسلط مناسب داشته باشید . در دوره های کامل و جامع همچون دوره نابغه Css مثال های بسیار بیشتری و توضیحات جامع تری در رابطه با منو ها خدمتتان ارائه می شود . دوستانی که تمایل دارند تا به تمام مباحث در 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 در انتهای این مطلب و در ادامه برای شما آموزش داده شده که با دقت به آن می توانید تضمین کنید که منو های طراحی شده توسط شما کامل و بدون نقص هستند .
خب تا این قسمت با چند خط 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 بود که در داخل ویدئو های آموزشی چندین و چند روش مختلف و امروزی تر و استاندارد تر برای طراحی منو ها در بی نهایت سطح خدمتتان ارائه شده است .
این ویدئو بخشی از جلسات آموزشی در دوره آموزش طراحی منو با css است که جهت سنجش کیفیت آموزش و همچنین تصویر و صوت خدمتتان ارائه شده است . دوره های آموزشی وب سایت با حجم بسیار متناسب و کیفیت بالا ضبط شده است تا دانشجویان عزیز بتوانند به راحتی دوره ها را دانلود نموده و از محتوا آموزشی با کیفیت استفاده نمایند . این دوره کاملا رایگان است و جهت استفاده از محتوای ویدئو ها ، کافیست آن را خریداری نموده و لذت ببرید . توجه داشته باشید که این دوره چه پیشنیازی دارد . اصلی ترین مورد برای این دوره آشنایی مبتدی تا متوسط با css است که می توانید به راحتی و به سرعت ویدئو ها را مشاهده نموده و پروژه های خود را پیاده کنید .
آموزش نابغه css که اول این صفحه معرفی کردین همون زیر فیلم آیا این آموزش ها داخلش هستند ؟ یا بعد از خریدن و یادگرفتن باید اینا هم مطالعه بشه ؟
با سلام ، شما با شرکت در دوره نابغه css از هر منبعی بی نیاز خواهید شد . اما می توانید جهت تمرینات بیشتر در دوره های رایگان و تکمیلی نیز شرکت نمائید .
این منو که بالای سایت خودتان هست فکر میکنم همان اموزش دوم بود که گفتید من تقریبا کامل ساختم با فونت آسم اون آیکون هاشم گذاشتم اما نه کامل مثل شما فقط قسمت حرکت و رنگش نمیتونم بسازم که عین مال شما باشه کلا با margin خراب میشه اصلا درنمیاد
سلام دوست عزیز ساخت منو های پیشرفته تر نیاز به دانش کامل تری در مورد زبان css دارند . برای این مورد از دوره نابغه css می توانید کمک بگیرید . این دوره رایگان نیست اما یکبار برای همیشه تمام مشکلات شما در css را حل خواهد نمود .
برای اینکه منو ها از سمت راست باز شه مثل منو های وردپرس که وقتی روی اسم منو میری سمت چپ زیر منو ها میاد در اون قسمت منو که شما افقی گفتید زیر منو باز میشن من میخوام مثل وردپرس منو من سمت راست صفحه باشه و منو ها سمت چپ بیاد وقتی موس روی منو میره انگار که منو شما برعکس شده اینو یکم راهنمایی کنید
سلام خدمت شما در منو های وردپرس همان موضوع hover مطرح است و شما باید با همان دستورات position کار کنید . تنها تفاوت اینجاست که آیتم های منو کنار هم نیستند و باید همگی در زیر هم باشند . در کد های منو هیچ تفاوتی وجود ندارد فقط باید li های شما زیر هم باشند نه کنار هم .
اگر برای منو یک قالب فروشگاهی مثل دیجی کالا نیاز داشته باشم روش اون چجوری میشه ؟ اگر امکان داره راهنمایی کنید
این مورد یک مگا منو هست و موضوع این مورد فراتر از سطح دوره می باشد که پیاده کردن مگا منو در بخش های استاتیک مشکل است و معمولا در بخش های برنامه نویسی پیاده می شود . ساختار سطح سوم منو ها در مگا منو به دلیل ایندکس شدن لینک ها و سئو معمولا به شکل ایجکس هستند و داخل المان هایی همچون div قرار می گیرند که در این شرایط استایل نویسی متفاوتی خواهد داشت .
با سلام، لینک های دانلود بررسی شد و مشکلی در دانلود وجود ندارد در صورت وجود مشکل لطفا از طریق حساب کاربری و بخش تیکت با واحد پشتیبانی در ارتباط باشید