آیا شما با همبرگر منو در طراحی سایت آشنایی دارید؟

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

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

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

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

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

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

این دو نمونه کار را می توانید در نمونه کارهای سایت ما مشاهده کنید.

برای اینکه بتوانیم یک همبرگر منو ساده طراحی کنیم سه مرحله وجود دارد که شما می توانید از کدهای زیر استفاده کنید

اینکار بسیار آسان هست اول باید فایل های html  را کدنویسی کنیم

<div class=”container” onclick=”myFunction(this)”>
<div class=”bar1″></div>
<div class=”bar2″></div>
<div class=”bar3″></div>
</div>

.container { display: inline-block; cursor: pointer; } .bar1, .bar2, .bar3 { width: 35px; height: 5px; background-color: #333; margin: 6px 0; transition: 0.4s; } /* برای چرخش */ .change .bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px) ; transform: rotate(-45deg) translate(-9px, 6px) ; } /* محو کردن منو */ .change .bar2 { opacity: 0; } /* چرخش دوباره */ .change .bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px) ; transform: rotate(45deg) translate(-8px, -8px) ; }

مرحله سوم باید چند خط کد java  بنویسیم

/* این تکه کد را در فایل هدر خود اضافه کنید */ function myFunction(x) { x.classList.toggle("change"); }

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