انجمن سایت کلیدستان


رتبه موضوع:
  • 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
آیا شما با همبرگر منو در طراحی سایت آشنایی دارید؟

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

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

[عکس: hamburger-menu-website-design.jpg]
اولین چیزی که یک طراحی سایت را از سایت ها دیگر متمایز می کند ظاهر سایت هست و زیبایی سایت هست اگر شما که برنامه نویس هستید همیشه از یک منویی استفاده کنید که دیگر تکراری و قدیمی شده است کارهای شما تکراری می شود یک طراح سایت باید همیشه از آخرین تکنیک های طراحی سایت در سایت هایی که برنامه نویسی می کند و طراحی می کند استفاده کند مشتریان سایت وقتی برایشان یک سایتی جذاب تر می شود که آن تکنیک و آن ویژگی را در سایتی مشاهده نکرده باشند از خلاقیت و دانش برنامه نویسی و تکنیک های طراحی سایت باید بهره برد هدف ما در ساین وب این هست که بتوانیم سایتی را طراحی کنیم که هم از لحاظ گرافیک هم از لحاظ افکت های جذاب و جذابیت های سایت تکراری نباشد کسی که از قالب آماده استفاده می کند نه اسمش برنامه نویس هست نه طراح سایت طراح سایت کسی که اوج خلاقیت و توانایی خود در هر سایتی پیاده سازی کند  
همبرگر منو در طراحی سایت چیست؟
یکی از راههایی که شما می توانید از آخرین تکنیک های طراحی سایت برای مشتریان خود برای اینکه سایتی جذاب را تحویل دهید هم در حالت دستکتاپ هم حالت موبایلی استفاده از همبرگر منو هست شاید شما وقتی می خواهید منو سایتی را باز کنید با سه خط موازی روی هم روبرو شده اید این همان همبرگر منو هست چون شکلش شبیه همبرگر هست به همین دلیل اسمش هبرگر منو هست
چرا باید از همبرگر منو در طراحی سایت استفاده کنیم
در زمان قدیم و منوهای قدیمی برای اینکه منو موبایلی باز شود از آیکن استفاده می شود که حجم سایت رو به دلیل اینکه png بود کمی بالا می برد و هیج انیمیشن و جذابیتی نداشت برای کاربر نداشت ولی امروزه شما می توانید شکلهای جذابی از انیمیشن های همبرگر را مشاهده کنید چون واقعا برای مشتری سایت شما جذاب است به همه توصیه می کنم از این تکنیک طراحی سایت در طراحی سایت تهران خود استفاده کنید تا متفاوت باشید ما هم در ساین وب در سایت های جدید خود از این تکنیک استفاده کرده ایم

[عکس: hamburger-menu-sample.jpg]

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

[عکس: hamburger-menu--example.jpg]
در طراحی سایت شرکت سولفور سدیم ایران منو در حالت عادی هست ولی وقتی شما سایت را در حالت موبایلی مشاهده می کنید از همبرگر منو استفاده کرده ایم این دو نمونه کار را می توانید در نمونه کارهای سایت ما مشاهده کنید
[عکس: hamburger-menu.jpg]

ساخت یک همبرگر منو در طراحی سایت
برای اینکه بتوانیم یک همبرگر منو ساده طراحی کنیم برای طراحی سایت php خود برنامه نویسی کنیم سه مرحله وجود دارد که شما می توانید از کدهای زیر استفاده کنیداینکار بسیار آسان هست اول باید فایل های html  را کدنویسی کنیم <div class="container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div> مرحله دوم کدنویسی فایل های css  هست
کد پی‌اچ‌پی:
.container displayinline-blockcursorpointer; } .bar1, .bar2, .bar3 width35pxheight5pxbackground-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"); } 
امیدواریم شما هم از این منو جذاب در سایت های خود استفاده کنید و لذت ببرید

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

ایده و خلاقیت اتفافی نیست

021-66467942
پاسخ
 سپاس شده توسط شماره مجازی امارات ، تلگرام ضد فیلتر 2023


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان