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

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

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

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

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

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

آموزش طراحی سایت ریسپانسیو قسمت دوم:

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

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

<"meta name="viewport" content="width=device-width, initial-scale=1.0>

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

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

<nav>
    <a href="#" id="main-menu"></a>
    <ul id="top-menu">
    <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>
<li><a href="#">پشتیبانی </a></li>
<li><a href="#">آموزش</a></li>
<li><a href="#">فروشگاه</a></li>
    </ul>
 </nav>

 

تا اینجای کار که یک منو بدون استایل داریم,بهتر یه مقدار به زیبا سازی منو بپردازیم, پس کدهای 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;}

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

 

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

<a href=”#” id=”main-menu “></a>

برای این عنصر استایل زیر را در نظر میگیریم.

#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;}

}

در کد بالا ما گفتیم برای رزولوشن های کمتر از ۱۰۲۴ پیکسل ، آیکون منوی ریسپانسیو نمایان بشه و منوی عادی مخفی بشه . حالا شما یک منوی ریسپانسیو دارید که در موبایل و تبلت قابل مشاهده هست.

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

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

 

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

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

 

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