زمان کنونی: ۱۰-۱-۱۴۰۳, ۰۴:۵۱ عصر درود مهمان گرامی! (ورودثبت نام)


ارسال پاسخ 
 
امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش ایجاد منوی ریسپانسیو
۱۵-۱۰-۱۳۹۳, ۰۳:۲۲ صبح
ارسال: #1
آموزش ایجاد منوی ریسپانسیو
با استفاده از 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
خوب دوستان مقاله ی آموزشی به اتمام رسید ، امیدوارم که براتون مفید واقع شده باشه .
موفق و پیروز باشید :)
منتشر شده در دومین شماره ماهنامه طراحی وب ( مدرسه مجازی ایرانیان )
امضاء sb7842
به امید سرافرازی ایران عزیز
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
 سپاس شده توسط Reza Ganji ، محمدسلیمانی ، mahan
۱۵-۱۰-۱۳۹۳, ۰۷:۳۰ صبح
ارسال: #2
RE: آموزش ایجاد منوی ریسپانسیو
درود بر شما
اگر چند اسکرین شات هم از مراحل کار به مقاله اضافه می شد بهتر بود
امضاء mahan

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

[تصویر:  mahan.gif]
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ بازگشت به بالا
ارسال پاسخ 


پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان