آموزش ساخت منوی واکنش گرای موبایل با استفاده از جی کوئری
نحوه ی ایجاد منوی دراپ داون با استفاده از HTML و CSS را قبلا به شما آموزش داده ایم. اما منویی که در آن آموزش به همراه هم ایجاد کردیم، منویی ساده و فاقد ویژگی های واکنش گرایی بود. یکی از مهم ترین ویژگی هایی که منوی دراپ داون ساده ی ما فاقد آن بود، امکان تبدیل به نسخه ی موبایل در زمان استفاده در نمایشگر های کوچکتر بود. بنابراین امروز تصمیم داریم در یک آموزش تکمیلی، نحوه ساخت منوی وانش گرای موبایل با استفاده از جی کوئری (و یک افزونه ی کوچک) را به شما آموزش بدهیم. از شما دعوت میکنیم که در ادامه ی این آموزش با مسترکد همراه شوید و نحوه ی ایجاد یک منوی ریسپانسیو ساده موبایل را به همراه ما بیاموزید.
منوی موبایل چیست؟ در این آموزش چه کاری انجام میدهیم؟
منظور از منوی موبایل، منویی است که استفاده از آن در دیوایس های لمسی و دیوایس هایی که صفحات نمایش کوچکتری دارند آسان باشد. در واقع از این نوع منو وقتی استفاده میکنیم که مایلیم منوی سایت ما در کلیه ی دیوایس هایی که توسط کاربران جهت مرور وب مورد استفاده قرار میگیرند، قابل نمایش و استفاده بوده و زمانی که اندازه ی نمایشگر از حد معینی کوچکتر میشود، شکل و کارایی مناسب خود را از دست ندهد. لازم به ذکر است که منوهای موبایل شکل های گوناگونی دارند و آنچه ما امروز در این آموزش به آن میپردازیم، فقط یکی از این حالات است.
آموزش ساخت منوی موبایل
پیش نیاز ها
پیش نیاز اصلی دنبال کردن این آموزش، این است که یک منوی کشویی یا همان دراپ داون در اختیار داشته باشید. با توجه به اینکه قبلا نحوه ایجاد منوی کشویی با استفاده از HTML و CSS را به شما آموزش داده ایم، آموزش امروز را نیز بر اساس همان آموزش قبلی پیش خواهیم برد و برای ایجاد منوی منوی واکنش گرای موبایل از فایل های نمونه ی همان آموزش بهره خواهیم گرفت. بنابراین اگر هنوز منوی کشویی خود را آماده نکرده اید، میتوانید با کلیک روی اینجا، کارتان را آغاز کنید و سپس بازگردید و در ادامه با ما همراه شوید.
آیتم بعدی که به آن نیاز داریم جی کوئری است. جی کوئری را میتوانید با مراجعه به سایت رسمی اش دریافت کرده و در پروژه ی خود مورد استفاده قرار دهید. توجه داشته باشید که برای این آموزش نیاز به جی کوئری ورژن 1.7 به بعد داریم. بنابراین اگر قبلا جی کوئری را در پروژه ی خود فراخوانی کرده و مورد استفاده قرار داده اید، اطمینان حاصل کنید که ورژن آن 1.7 یا بالاتر باشد.
و در نهایت همانطور که در ابتدا هم اشاره کردیم، منوی امروز را با استفاده از یک افزونه ی جی کوئری ایجاد خواهیم کرد. این افزونه SlickNav نام دارد. بنابراین آخرین پیش نیاز این است که به سایت رسمی افزونه مراجعه کرده و فایل های مربوط به آن را دانلود کنید.
فراخوانی جی کوئری و فایل های مربوط به SlickNav را در طول آموزش با هم مرور خواهیم کرد، بنابراین اگر سه شرط بالا برقرار است، وقت آن رسیده که کارمان را شروع کنیم.
ساخت منو موبایلی
همانطور که در ابتدا هم ذکر کردیم، آموزش را بر اساس منوی کشویی که از پیش ایجاد کرده بودیم ادامه خواهیم داد. در بخش پیش نیاز ها نیز ذکر کردیم که برای ایجاد این منوی موبایل نیاز به jQuery و افزونه SlickNav دارید. بنابراین لازم است که فایل استایل مربوط به SlickNav را به همراه دو فایل js مربوطه (یکی جی کوئری و دیگری فایل جاوااسکریپت اسلیک نو) فراخوانی کنیم. مثلا در منوی نمونه، ما سه خط کد زیر را به بخش head فایل ایندکسمان اضافه کرده ایم :
1 2 3 | <link rel="stylesheet" href="assets/slicknav/slicknav.min.css" /> <script src="assets/jquery.min.js"></script> <script src="assets/slicknav/jquery.slicknav.min.js"></script> |
توجه داشته باشید که در مثال بالا، فایل جی کوئری و فایل های مربوط به slicknav را از پیش دانلود کرده ایم و در محل دلخواه قرار داده ایم. بنابراین بسته به محلی که برای ذخیره ی این فایل ها انتخاب میکنید، مسیر دهی فایل ها در کد بالا برای شما متفاوت خواهد بود.
حال لازم است که یک id به ul دربرگیرنده ی منوی کشویی مان اضافه کنیم تا slicknav بداند کدام عنصر را قرار است به منوی موبایل تبدیل کند. مثلا :
1 | <ul id="menu"> |
و در آخر SlickNav را با مقادیر زیر، قبل از بسته شدن تگ body فراخوانی کرده ایم :
1 2 3 4 5 6 7 8 | <script> $(function(){ $('#menu').slicknav({ label: 'منوی اصلی', closedSymbol:"◀" }); }); </script> |
در کد بالا در خط سوم، id منو را مشخص کرده ایم. شما میتوانید این id را بر حسب شناسه ای که برای منوی خود در نظر گرفته اید تغییر دهید. همچنین در خط چهارم، عنوان منوی موبایل را سفارشی سازی کرده ایم. شما میتوانید با تغییر این مقدار، هر عنوان دیگری را برای منوی خود قرار دهید. اگر این خط را حذف کنید، به صورت پیشفرض عبارت Menu در کنار آیکن برگر به نمایش در خواهد آمد. (آیکن burger همان آیکنی است که در زمان تبدیل منو به حالت موبایلی، به نمایش در می آید)
و اما نیاز به اعمال تغییراتی کوچک و اضافه کردن چند استایل به فایل css مان نیز خواهیم داشت :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .slicknav_menu { display:none; } @media screen and (max-width: 768px) { /* #menu is the original menu */ #menu { display:none; } .slicknav_menu { display:block; } } |
در استایل های بالا تعیین کرده ایم که منوی اسلیک نو در حالت عادی نشان داده نشود. سپس مشخص کرده ایم که هر گاه عرض صفحه کمتر از 768 پیکسل بود، منوی اصلی مخفی شده و مجای آن منوی slicknav که همان منوی موبایلی ماست به نمایش در بیاید.
راستی برای نمایش راست چین slicknav در فایل استایل به تگ body استایل direction:rtl را اضافه کرده ایم. شما میتوانید در صورت تمایل این استایل را مستقیما بر روی li های موجود در slicknav اعمال کنید. اما از آنجا که قصد ما ایجاد یک منو در محیطی فارسی زبان بوده است، اضافه کردن جهت گیری راست به چپ به تگ بدنه، کار منطقی ای به نظر میرسید.
به همین سادگی. حالا کافی است منوی خود را در مرورگر باز کرده و اندازه ی پنجره را تا حد دلخواه کوچک کنید. خواهید دید که هر گاه عرض پنجره کمتر از 768 پیکسل باشد، منوی سایت به صورت اتوماتیک تبدیل به منوی موبایل میشود. البته بدیهی است که عرض دلخواه جهت تبدیل منوی دسکتاپ به منوی موبایل را نیز میتوانید با تغییر استایل های ذکر شده در بالا، سفارشی سازی کنید.
دریافت نمونه تکمیل شده
فایل های نمونه ی این آموزش را میتوانید با کلیک روی دکمه ی زیر دانلود کرده و پیش نمایش نتیجه ی نهایی آموزش را با باز کردن فایل index موجود در بسته ی دانلودی، مشاهده کنید.
در پایان
در اینجا بد نیست به این نکته اشاره کنیم که استفاده از افزونه جی کوئری SlickNav تنها یکی از چندین روش (و افزونه) متنوعی است که با استفاده از آن میتواند منو های موبایلی واکنش گرا ایجاد کرد. بنابراین شما را به تست کردن روش های دیگر و افزونه های دیگری که برای این کار موجود هستند تشویق میکنیم. در پایان امیدواریم از این آموزش لذت برده باشید.
سلام.ببخشیدمیشه خواهش کنم کد منوی این سایتوبدین.من اصن پیداش نکردم.ممنون میشه اگه ب ایمیلم ارسال کنید.خواهش میکنم راهنمایی کنید.
سلام من یه منو مثل این البته با css ساختم آیا تفاتی داره؟
سلام من یه منو مثل این البته با css ساختم آیا تفاوتی داره؟