ساخت منو با دکمه همبرگری (Nav Menu)
از انجایی که کاربران موبایل بخش مهمی از بازدیدکنندگان صفحات وب را در بر می گیرند استفاده از آیتم هایی که علاوه بر زیبایی در دستگاه های کوچک هم قابل استفاده باشند محبوبیت زیادی بین کاربران و طراحان وب دارد استفاده از یک منوی ریسپانسیو یا واکنش گرا می تواند زیبایی و کارایی سایت را تا حد زیادی بالا ببرد. افزونه هایزیادی برای منوهای ریسپانسیو وجود دارد که می توانید با کمی جستجو در اینترنت آنها را دانلود و استفاده کنید ولی اگر می خواهید خودتان منوهای زیبایی بسازید آنها را بهبود دهید در این اموزش ساخت منو ما همراه باشید.(نمایش دمو در صفحه کدپن)
در این اموزش قصد داریم با راه اندازی یک منوی زیبا با استفاده از HTML5 و Css3 آشنا شویم.ناو منو (nav menu) یکی از پرطرفدارترین روش های ایجاد منو است چراکه هم در دسکتاپ و هم در دستگاه های کوچک نظیر تلفن همراه بسیار زیبا و کاربردی دیده می شود. از این رو تصمیم گرفتیم که با ساده ترین روش ها شروع کنیم به ساخت یک منوی همبرگری زیبا.(تمامی کدهای استفاده شده در این آموزش در دوره های اموزشی html5 و Css3 به صورت کامل تدریش شده اند.)
برای شروع کار ابتدا کدهای html5 زیر را وارد پروژه میکنیم،ما از یک Checkbox برای ایجاد دکمه منو و از ul برای لیست آیتم های منو استفاده کرده ایم.
<body> <label> <input type='checkbox'> <span class='menu'> <span class='hamburger'></span> </span> <ul> <li> <a href='#'>Home</a> </li> <li> <a href='#'>About</a> </li> <li> <a href='#'>Contact</a> </li> </ul> </label> <h1>CodeFriend.ir Fullscreen Hamburger Menu</h1> </body>
در ادامه استایل دهی به منوی همبرگری رو در فایل Style.css شروع می کنیم.
label .hamburger:after, label .hamburger:before { transition: .5s ease-in-out; content: ""; position: absolute; display: block; width: 100%; height: 100%; background: #000; } label .hamburger:before { top: -10px; } label .hamburger:after { bottom: -10px; } label input { display: none; } /* ایجاد انیمیشن حرکت صفحه سفید و نمایش آیتم های منو */ label input:checked + .menu { box-shadow: 0 0 0 100vw #FFF, 0 0 0 100vh #FFF; border-radius: 0; } /*تغییر زاویه علامت نشانگر منو*/ label input:checked + .menu .hamburger { transform: rotate(45deg); } label input:checked + .menu .hamburger:after { transform: rotate(90deg); bottom: 0; } label input:checked + .menu .hamburger:before { -webkit-transform: rotate(90deg); transform: rotate(90deg); top: 0; } label input:checked + .menu + ul { opacity: 1; }
زمانی که بر روی دکمه منو کلیک می شود باید آیتم های لیستی که ایجاد کردیم نمایش داده شود،پس برای این کار کافیه که کد های زیر رو به ادامه فایل Style.css اضافه کنیم.دقت داشته باشید ویژگی z-index وظیفه اصلی رو به دوش داره.
/* نمایش آیتم های منو */ label ul { z-index: 200; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: .25s 0s ease-in-out; } label a { margin-bottom: 5px; display: block; color: #000; text-decoration: none; }
و در نهایت تمامی کدهای Css به کار رفته در این آموزش:
/* Created on : May 13, 2017, 8:59:46 PM Author : CodeFriend.ir */ /* افزودن فونت از آدرس گوگل فونت*/ @import url("https://fonts.googleapis.com/css?family=Lato"); *, *:before, *:after { box-sizing: border-box; } html { font-size: 18px; } body { font-family: "Lato", serif; font-size: 28px; line-height: 1.6; background: #61B2A0; overflow-x: hidden; } label .menu { position: absolute; right: -100px; top: -100px; z-index: 100; width: 200px; height: 200px; background: #FFF; border-radius: 50% 50% 50% 50%; transition: .5s ease-in-out; box-shadow: 0 0 0 0 #FFF, 0 0 0 0 #FFF; cursor: pointer; } label .hamburger { position: absolute; top: 135px; left: 50px; width: 30px; height: 2px; background: #000; display: block; transform-origin: center; transition: .5s ease-in-out; } /* ایجاد نشان گر منو در قسمت بالای سمت راست */ label .hamburger:after, label .hamburger:before { transition: .5s ease-in-out; content: ""; position: absolute; display: block; width: 100%; height: 100%; background: #000; } label .hamburger:before { top: -10px; } label .hamburger:after { bottom: -10px; } label input { display: none; } /* ایجاد انیمیشن حرکت صفحه سفید و نمایش آیتم های منو */ label input:checked + .menu { box-shadow: 0 0 0 100vw #FFF, 0 0 0 100vh #FFF; border-radius: 0; } /*تغییر زاویه علامت نشانگر منو*/ label input:checked + .menu .hamburger { transform: rotate(45deg); } label input:checked + .menu .hamburger:after { transform: rotate(90deg); bottom: 0; } label input:checked + .menu .hamburger:before { -webkit-transform: rotate(90deg); transform: rotate(90deg); top: 0; } label input:checked + .menu + ul { opacity: 1; } /* نمایش آیتم های منو */ label ul { z-index: 200; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: .25s 0s ease-in-out; } label a { margin-bottom: 5px; display: block; color: #000; text-decoration: none; } h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; text-align: center; color: #f2f2f2; }
اما واحدهای اندازه گیری استفاده شده در ساخت این منو:
vw و vh چیست ؟
واحد vh برابر با یک صدم (۰/۰۱) ارتفاع مرورگر و vw برابر با یک صدم (۰/۰۱) پهنای مرورگر می باشد . پس مثلا اگر مانیتور ما 1920 در 1080 باشد , 1vw مساوی 19.2 پیکسل و 1vh مساوی 10.8 پیکسل خواهد بود.این واحد با متاتگ viewport عمل بهتری را انجام میدهند.
برای نمایش دمو منوی ساخته شده برای این لینک کلیک کنید.امیدوارم از این آموزش استفاده کرده باشید.
برچسب:nav menu, vw و vh چیست, آموزش, آیتم های لیستی, اموزش ساخت منو, زیبا, ساخت منو برای موبایل, ساخت منوی همبرگری, ساخت منوی همبرگری با css, ساخت منوی همبرگری برای سایت, ساخت منوی همبرگری به کمک CSS, ساخت منوی همبرگری در css, ساخت منوی همبرگری در html, کدهای Css, منوی موبایل, منوی همبرگری, نمایش دمو, ویژگی z-index
1 نظر
سلام
یک سوال چگونه کاری کنیم که منو از سمت راست باز شود مانند دیجی کالا