ساخت منوی حرفه ای برای موبایل و تبلت
دسته‌ها : گرافیک, وکتور سه شنبه, بهمن ۱۳, ۱۳۹۴ admin دیدگاه ها3

۱۰۲۱۵۴۸۴

سلام به تمام کاربران بلاگ تم

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

از آنجا که هدف ما موبایل و تبلت است باید عرض ویوپرت و سطح زوم اولیه را تعیین کنیم برای این کار از متاتگی به نام viewport به صورت زیر استفاده می کنیم.

<head>
<meta name="viewport" content="initial-scale=1, width=device-width" />
</head>

برای بررسی بیشتر این متاتگ به این لینک مراجعه کنید.

ساختار اصلی شامل یک منو است که fixed شده و پشت لایه قسمت محتوا قرار گرفته است.

<body>
<menu class="menu">
  <!-- آیتم های منو -->
</menu>
<div class="content-wrapper">
  <!-- محتوای سایت -->
</div>
</body>

توجه داشته باشید که ما کدهای اصلی و پایه ای را اینجا نمایش می دهیم. جزییات را در دموها بررسی کنید.

html,
body {
  height: 100%;  
}

.menu {
  position: fixed;
  top: 0;
  right: 0;
}

.content-wrapper {
  min-height: 100%;  
}

 

ما در اینجا برای آیکون های منو از آیکون فونت ها استفاده می کنیم. اگر با آیکون فونت ها آشنا نیستید سه لینک زیر آدرس بهترین آیکون فونت های حال حاضر هستند:

Font Awesome

Icomoon

Material Icons

حال نیاز به یک دکمه برای نمایش و مخفی کردن منو داریم. قرار است که هر با بر روی دکمه کلیک شد کلاس open به body داده شده و دفعه بعد از آن گرفته شود. و ما از این کلاس جهت تعیین وضعیت استفاده می کنیم.

از آنجا که هدف این سایت طرح مباحث javascript نیست ما از javascript فقط برای کار راه اندازی به صورت inline و به مختصرترین روش استفاده می کنیم. پس به این نکته توجه کنید که به هیچ عنوان توصیه نمی شود به این سبک در پروژه خود کلاس را اضافه و حذف کنید.

<div class="content-wrapper">
  <a  onclick="document.getElementById('body').classList.toggle('open');" class="fa fa-bars menu-btn"></a>
</div>

حال کافی است تا با استفاده از کلاس open عنصر نگهدارنده محتوای سایت یعنی content-wrapper را جا به جا کنیم تا منوی پشتش دیده شود.

.content-wrapper {
  transform: translate3d(0,0,0);
  transition: transform .3s;
}

body.open .content-wrapper {
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform: translate3d(-46px,0,0);
}

به تغییر ویژگی transition-timing-function در هنگام باز شدن دقت کنید. این تغییر باعث بهبود افکت باز شدن می شود و البته کاملا سلیقه ای می باشد.

از آنجایی که این عنصر تمام عرض صفحه را گرفته است وقتی در راستای محور افقی جا به جا شود باعث نمایش اسکرول بار صفحه می شود برای این جلوگیری از این موضوع به صورت زیر عمل می کنیم:

body {
  overflow-x: hidden;
}

و در مرحله آخر کافی است که هر آیتم از منو را به ترتیب نمایش دهیم. برای این کار دوباره از کلاس open استفاده می کنیم. توجه کنید که هر آیتم را با transition وارد صفحه می کنیم و برای هر آیتم یک تاخیر زمانی در نظر می گیریم تا به ترتیب نمایش داده شوند.

.menu a {    
  opacity: 0;
  transform: translate3d(48px, -48px, 0) scale(0);
  transition: .4s .3s all;
}

body.open .menu a {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
}

body.open .menu li:nth-child(0) a {
  transition :  0.2s .1s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
}

body.open .menu li:nth-child(1) a {
  transition :  0.2s .2s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
}

body.open .menu li:nth-child(2) a {
  transition :  0.2s .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all;
}

/* همین کار را تا آخرین عنصر منو ادامه می دهیم */

و در نهایت منوی ما هم آماده است:)

زمانی که خواستید خروجی نهایی منو را داشته باشید حتما برای تمام transform و transition ها prefixهای لازم مثل -webkit- و-moz- و غیره را بنویسید تا بهترین پشتیبانی مرورگرها و پلتفرم ها را داشته باشید.

سعی ما بر ساده سازی مطلب بود شما می توانید با تغییر مقادیر transformها و تغییر شتاب و زمان transitionها قطعا دموهای بهتری آماده کنید.

 

منبع:css tiket

 

دانلود با لینک مستقیم پیشنمایش

 

امیر رضائی وبسایت


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

مطالب مشابه با این موضوع

بالا رفتن