دوره آموزش طراحی منو ریسپانسیو با css و jQuery

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

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

زمانی که ساختار منو چیزی بجز ساختار های اولیه html بوده و دارای کلاس هاص اضافی باشد ، نمی توان داینامیک سازی مناسبی روی این منو انجام داد . اما زمانی که ساختار منو ساده بوده و ویژگی های منو توسط کلاس های css کنترل شوند ، می توانیم به راحتی در وردپرس و حتی سایر سیستم های اختصاصی ، برنامه نویسی منو های داینامیک را انجام دهیم چرا که وابسته به کلاس های داخل html نیستیم و تمام ویژگی های منو از طریق فایل های css و کلاس های اصلی منو تکمیل می شود . به مثال زیر توجه نمائید :

<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
    <li><a class="dropdown-item" href="#">item 1</a></li>
    <li><a class="dropdown-item" href="#">item 2</a></li>
    <li>
        <hr class="dropdown-divider">
        <a class="dropdown-item" href="#">Something else</a>
    </li>
</ul>

این مثال منو بوت استرپ در نسخه 5 است . شما می توانید به راحتی از این منو در طراحی قالب استفاده کنید و ظاهر سایت خود را در حالت منو های موبایل ایجاد کنید . اما زمانی که این قالب در اختیار برنامه نویس قرار گیرد ، با مشکلات زیادی در داینامیک سازی مواجه خواهد شد . پس لازم است تا به عنوان یک طراح ماهر و کار درست ، در فکر همه جوانب باشیم . اگر به روش طراحی منو های رسپانسیو آشنا باشید ، می توانید در کمتر از 1 ساعت ، منو رسپانسیو فوق العاده کاملی برای قالب طراحی کنید . ضمن اینکه با یکبار طراحی منو و یادگیری روش طراحی ، دیگر نیازی به طراحی مجدد آن نیست و می توانید برای تمامی قالب ها از کد نوشته شده استفاده نموده و مطابق با ساختار قالب ، این منو را تغییر دهید . اما نمونه کد html منو طراحی شده توسط ما در این دوره به این شکل است :

<ul>
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">Something else</a></li>
</ul>

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

آموزش ساخت منو رسپانسیو بدون بوت استرپ

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

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

در این دوره از فریمورک بوت استرپ تنها برای تنظیم ستون بندی های صفحه و آیکون فونت ها استفاده شده است ( به دلیل نظم پروژه ) و کوچکترین استفاده از این فریمورک برای طراحی منو ها نشده است . تمامی ساختار منو و تمامی افکت ها و انیمیشن ها و …. تنها توسط css و jQuery اجرا شده است .

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

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

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

آموزش ویدئویی طراحی منو موبایلی

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

آموزش هایی که به شکل متنی ارائه می شوند معمولا برای دانشجویان مبتدی سخت تر هستند و درک نحوه ساخت این منو ها برای آنها دشوار است . اما در دوره های ویدئویی امکان توضیح بسیار بیشتر و مناسب تر ، به همراه مثال های دقیق و عملی و البته رفع اشکالات بسیار راحت تر است .

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

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

پیش نمایش بخش هایی از دوره آموزش طراحی منو موبایلی

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