آموزش ایجاد منوی ریسپانسیو
|
۱۵-۱۰-۱۳۹۳, ۰۳:۲۲ صبح
ارسال: #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 خوب دوستان مقاله ی آموزشی به اتمام رسید ، امیدوارم که براتون مفید واقع شده باشه . موفق و پیروز باشید :) منتشر شده در دومین شماره ماهنامه طراحی وب ( مدرسه مجازی ایرانیان ) |
|||
|
۱۵-۱۰-۱۳۹۳, ۰۷:۳۰ صبح
ارسال: #2
|
|||
|
|||
RE: آموزش ایجاد منوی ریسپانسیو
درود بر شما
اگر چند اسکرین شات هم از مراحل کار به مقاله اضافه می شد بهتر بود |
|||
|
کاربرانِ درحال بازدید از این موضوع: 1 مهمان