در این مطلب قصد بررسی نحوه ساخت یک منوی ساده و کاربر پسند را برای دستگاه های موبایل و تبلت داریم. تلاش می کنیم که ساخت این دمو را به صورت مرحله ای انجام دهیم و برای هر مرحله کدهای آماده را برای بررسی کردن در دسترس شما قرار دهیم.
- ie
- Chrome
- Firefox
- Safari
- Opera
10+
از آنجا که هدف ما موبایل و تبلت است باید عرض ویوپرت و سطح زوم اولیه را تعیین کنیم برای این کار از متا تگی به نام 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%;
}
ما در اینجا برای آیکون های منو از آیکون فونت ها استفاده می کنیم. اگر با آیکون فونت ها آشنا نیستید سه لینک زیر آدرس بهترین آیکون فونت های حال حاضر هستند:
حال نیاز به یک دکمه برای نمایش و مخفی کردن منو داریم. قرار است که هر با بر روی دکمه کلیک شد کلاس 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;
}
دموی زیر حاصل کار تا اینجای کار است:
See the Pen Off-Canvas Menu (base) by Mojtaba Seyedi (@seyedi) on CodePen.
و در مرحله آخر کافی است که هر آیتم از منو را به ترتیب نمایش دهیم. برای این کار دوباره از کلاس 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;
}
/* همین کار را تا آخرین عنصر منو ادامه می دهیم */
و در نهایت منوی ما هم آماده است:)
See the Pen Off-Canvas Menu (final) by Mojtaba Seyedi (@seyedi) on CodePen.
زمانی که خواستید خروجی نهایی منو را داشته باشید حتما برای تمام transform و transition ها prefixهای لازم مثل -webkit- و -moz- و غیره را بنویسید تا بهترین پشتیبانی مرورگرها و پلتفرم ها را داشته باشید.
سعی ما بر ساده سازی مطلب بود شما می توانید با تغییر مقادیر transformها و تغییر شتاب و زمان transitionها قطعا دموهای بهتری آماده کنید.
شما هم می توانید مشارکت کنید.
سلام ممنون..خیلی کارآمد و جالب بود…
تشکر فراوان
چیکار کنیم که اگر هرجای صفحه کلیک کرد منو خودکار بسته بشه و نیازی به کلیک روی دکمه منو نباشه ؟
سپاس
من تازه با سایت عالی شما آشنا شدم واقعا عالی دمتون گرم خسته نباشید .
از اینکه در بازگو کردن مطالب بسیار مفهوم و ساده شده عمل میکنید سپاسگزارم .
سلام ممنون از مطلب خوبتون
بعضی از منو ها وقتی باز هستن روی صفحه اصلی که کلیک میشه منو بسته میشه.
اینو با چ زبونی میشه نوشت یا اسم اینکار چیه؟!
سلام، اون قسمت کلیکش باید با جاوااسکریپت نوشته بشه.
سلام چرا نمیشه سورس کد رو دانلود کرد ؟!
چطور دانلودش کنم ؟
سلام، مرسی که گفتین، الان باید درست شده باشه.