آموزش طراحی منو رسپانسیو Responsive

با آموزش منو ریسپانسیو Responsive واکنش گرا از تیم وب یار خدمت شما هستیم,اگر اصول کلی در مورد کدهای ریسپانسیو را نمیدانید و میخواهید صحفه ای ریسپانسیو بسازید حتما مطلب آموزش کدهای طراحی سایت ریسپانسیوResponsive را بخوانید.

آموزش طراحی منو ریسپانسیو Responsive

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

برای این کار ما از هیچ فریم ورکی استفاده نمیکنیم . خودمون با Media Query ها این کار رو به راحتی انجام میدیم .

اول از همه بذارید با منطق این موضوع آشناتون کنم . ما با استفاده از Media Queries میتونیم تعیین کنیم که صفحه ی وبمون تو هر رزولوشن به چه شکلی نمایش داده بشه . برای منویی که قراره ایجاد کنیم هم به همین صورت عمل می کنیم . یک منو طراحی می کنیم و با استفاده از media query و کدهای css تعیین می کنیم که در رزولوشن های بالا منو بصورت عادی نمایش داده بشه و در رزولوشن های پایین مثل موبایل و تبلت بصورت ریسپانسیو نمایش داده بشه . حالا باید این کار رو در کد پیاده کنیم .

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

همانند آموزش قبل متا تگ viewport را در قسمت head فایل html خود بنویسید.

پس از نوشتن متا تگ های ضروری بالا در فایل html خود نوبت به کدهای اصلی منو در html میرسد.

ایجاد منو در کدهای html:

 

تا اینجای کار که یک منو بدون استایل داریم,بهتر یه مقدار به زیبا سازی منو بپردازیم, پس کدهای CSS زیر را برای استایل دهی به منو خود می‌نویسیم.
nav{ width: 100%; height: 40px; background-color: #324E8D; margin: 0; padding: 0 30px 5px; position: relative;}
nav ul{display: block; width: auto; background-color: #324E8D; }
nav ul li{display: inline-block; position: relative;}
nav ul li>a{display: inline-block; font: 12px/27px BYekan; color: #fff; padding: 5px 15px 6px 8px;}
nav ul li>a:hover{color: #FEEF00;}

تا اینجای کار همانند کدنویسی های گذشته یک منو ساده به شکل زیر خواهیم داشت.

 

برای این عنصر استایل زیر را در نظر میگیریم.
#main-menu{display: inline-block; width: 40px; height: 40px; background: url (“../img/icon.jpg”) center;}

حالا عنصر a ما که در اولین خط از کدهای html نوشتیم به این شکل نمایش داده می‌شود.

چرا این آیکون را میگذاریم؟

زمانی که ما بخوایم با موبایل یا تبلت صفحه ی وب رو مشاهده کنیم ، منوی اصلی مخفی میشه و این آیکون نمایان میشه ، و شما با کلیک بر روی این آیکون میتونید گزینه های منو رو بصورت زیر منو و منوی کشویی مشاهده کنید .

پس در حالت عادی ما این آیکون رو نیاز نداریم و اون رو hidden می کنیم.
# main-menu {display: hidden; width: 40px; height: 40px; background: url(“../img/icon.jpg “) center;}
حالا دیگه همه چیز آماده است.از این مرحله به بعد میخواهیم تعریف کنیم :

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

برای این کار از media query زیر استفاده می کنیم :

ایجاد منو ریسپانسیو – کدهای منو :

@media only screen and (max-width : 1024px) {
# main-menu { display:inline-block;}
#top-menu {position: relative; z-index: 100000; padding-top: 9px;}
nav ul {display: none; position: absolute; padding: 5px 0; z-index: 100000; border: 5px solid #444; right: 28px; top: 45px; width: 150px; border-radius: 4px 0 4px 4px;}
nav li { text-align: right; width: 120px; padding:0; margin: 0;}
nav:hover ul , nav:active ul { display: block;}
}
در کد بالا ما گفتیم برای رزولوشن های کمتر از ۱۰۲۴ پیکسل ، آیکون منوی ریسپانسیو نمایان بشه و منوی عادی مخفی بشه . حالا شما یک منوی ریسپانسیو دارید که در موبایل و تبلت قابل مشاهده هست.

پس در نهایت یه جمع یندی کلی از کدهامون داریم:

حالت عادی منو:

 

حالت ریسپانسیو منو:

منو کشویی در ریسپانسیو:

 

امیدواریم نهایت استفاده رو از این آموزش کرده باشید و یک منو ریسپانسیو زیبا ساخته باشید, با آموزش های بعدی از تیم وب یار همراه ما باشید.برای آگاهی از قسمت های بعدی این آموزش ما را در اینستاگرام وب یار همراهی کنید. تا اولین نفراتی باشید که از آموزش ها و اخبار جدید سایت وب یار بهره مند می شوید.