طراحی سایت | طراحی سایت تهران | طراحی سایت ارزان

با ما تماس بگیرید : 5-44251104-021
به نام بهترین طراح دنیا
  • طراحی سایت

امتیاز کاربران

ستاره غیر فعالستاره غیر فعالستاره غیر فعالستاره غیر فعالستاره غیر فعال
 

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

 مرحله دوم کدنویسی فایل های css  هست
.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"); }

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

 

 

درباره نويسنده

رضا رجب پور هستم کارشناسي رشته فناوري اطلاعات و ارتباطات 4 سال تجربه کاري در زمينه طراحي سايت و بهينه سازي سايت را دارم و به زبانهاي Html , CSS , CSS3 , Jquery , JavaScript , PHP تسلط کافي را دارم و مدير تيم مهندسين ساين وب که با چند تن از دوستان رشته نرم افزار و گرافيک يک تيم خلاق و با تجربه را ايجاد کرده ايم و بيش از 80 نمونه کار طراحي سايت و بهينه سازي سايت در ايران و خارج از ايران انجام داده ايم و خوشحال مي شويم که اطلاعات و تجربيات خود را در اختيار ديگران و هموطنان عزيز قرار دهيم لطفا ما را در شبکه هاي اجتماعي دنبال کنيد تا از مطالب جديد ما اطلاع پيدا کنيد با تشکر و احترام







لطفا نظر خود را بنویسید

لطفا نظر خود را بنویسید

0

نظرات کاربران

  • نظری وجود ندارد


نظرات مشتریان در مورد ما

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

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

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

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

لطفا مارا در گوگل محبوب کنید