پارس جوم :: انجمن های تخصصی جوملا

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

1
2
3
<meta name="apple-mobile-web-app-capable" content="yes" >

<meta name="viewport" content="width=device-width, initial-scale=1.0">
در صورتی که از این متاتگ ها استفاده نکنید صفحه ی زیر رو در مرورگر به شکلی که در تصویر مشاهده می کنید ، میبینید:
1
در صورتی که استفاده کنید به شکل زیر میبینید:
2
برای ایجاد منو کد html زیر رو پیاده می کنیم :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<nav>

<a href="#" id="menu-icon"></a>

<ul id="TopMenu">

<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>

</nav>
حالا ما یک منو بدون استایل داریم برای زیباتر کردن منو بهش یه استایل هم میدیم :

1
2
3
4
5
6
7
8
9
nav{ width: 100%; height: 40px; background-color: #171C20; margin: 0; padding: 0 30px 5px; position: relative;}

nav ul{display: block; width: auto; background-color: #171C20; }

nav ul li{display: inline-block; position: relative;}

nav ul li>a{display: inline-block; font: 12px/27px tahoma; color: #fff; padding: 5px 15px 6px 8px;}

nav ul li>a:hover{color: #FEEF00;}
تا اینجا منوی ما بصورت عادی نمایش داده میشه :
1
اگر دقت کرده باشید ما یک عنصر a با شناسه ی menu-icon در کدمون قرار دادیم :

1
<a href="#" id="menu-icon"></a>
برای این عنصر استایل زیر رو در نظر میگیریم :

1
#menu-icon{display: inline-block; width: 40px; height: 40px; background: url(../img/menu.png) center;}
حالا عنصر a ما به این شکل 2 نمایان میشه . (میتونید با استفاده از فونت ها که در ماهنامه ی نسخه ی اول آموزش دادیم ، این آیکن رو پیاده کنید و دیگه از تصویر استفاده نکنید)
حالا دلیل ما از گذاشتن این آیکن چیه ؟
زمانی که ما بخوایم با موبایل یا تبلت صفحه ی وب رو مشاهده کنیم ، منوی اصلی مخفی میشه و این آیکن نمایان میشه ، و شما با کلیک بر روی این آیکن میتونید گزینه های منو رو بصورت زیر منو و منوی کشویی مشاهده کنید .
پس در حالت عادی ما این آیکن رو نیاز نداریم و اون رو hidden می کنیم .

1
#menu-icon{display: hidden; width: 40px; height: 40px; background: url("../img/menu.png") center;}
کد html ما آمادست و css ما هم برای رزولوشن های بالا آماده و قابل استفادست . حالا میخوایم تعریف کنیم زمانی که این صفحه با موبایل یا تبلت باز میشه، منوی ما از حالت عادی خارج بشه و به حالت ریسپانسیو تبدیل بشه . برای این کار از media query زیر استفاده می کنیم :

1
@media only screen and (max-width : 1024px) { }
با این مدیا کوئری ما شرطی رو برای css تعریف می کنیم و میگوییم اگر رزولوشن صفحه ی نمایش از ۱۰۲۴ پیکسل پایین تر بود (یعنی انواع موبایل و تبلت) ، کد css دیگری رو لود کن . به کد زیر دقت کنید :

1
2
3
4
5
6
7
8
9
10
11
12
13
@media only screen and (max-width : 1024px) {

#menu-icon { display:inline-block;}

.topMenu nav{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;}

}
در کد بالا ما گفتیم برای رزولوشن های کمتر از ۱۰۲۴ پیکسل ، آیکن منوی ریسپانسیو نمایان بشه و منوی عادی مخفی بشه . حالا شما یک منوی ریسپانسیو دارید که در موبایل و تبلت قابل مشاهده هست .
حالت عادی نمایش منو :
1
حالت ریسپانسیو منو :
2
حالت نمایش منوی کشویی در ریسپانسیو :
3
خوب دوستان مقاله ی آموزشی به اتمام رسید ، امیدوارم که براتون مفید واقع شده باشه .
موفق و پیروز باشید :)
منتشر شده در دومین شماره ماهنامه طراحی وب ( مدرسه مجازی ایرانیان )

درود بر شما
اگر چند اسکرین شات هم از مراحل کار به مقاله اضافه می شد بهتر بود