ساخت منو همبرگری با بوت استرپ
ساخت منو همبرگر (Hamburger Menu) با استفاده از فریمورک بوت استرپ، یکی از راه‌حل‌های اصلی برای طراحی وبسایت‌های ریسپانسیو و کاربرپسند است. منو همبرگر به طور معمول در وبسایت‌های موبایلی استفاده می‌شود تا فضای صفحه را بهینه کند و تجربه کاربری را بهبود بخشد. با استفاده از بوت استرپ، می‌توانید به راحتی منویی با طراحی زیبا و کاربرپسند ایجاد کنید که شامل انیمیشن‌ها، انتقال‌های صاف و تنظیمات مختلفی مانند رنگ و فونت باشد.
بوت استرپ به طراحان وب ابزارها و کامپوننت‌های آماده‌ای را ارائه می‌دهد که به ساخت منوهای همبرگر با طراحی حرفه‌ای کمک می‌کند. از جمله این کامپوننت‌ها می‌توان به Navbar و Dropdowns اشاره کرد که با استفاده از کلاس‌ها و تنظیمات مختلف، به شما این امکان را می‌دهند که منوی همبرگر خود را با سبک و ظاهر دلخواه شخصی‌سازی کنید.
آموزش ریسپانسیو در مجتمع فنی تهران
مجتمع فنی تهران با تجربه‌ی بیش از ۲۰ سال در آموزش مهارت‌های طراحی و توسعه وب، دوره‌های آموزش ریسپانسیو وبسایت‌ها را با استفاده از تکنولوژی‌ها و رویکردهای پیشرفته برگزار می‌کند. این دوره‌ها شامل آموزش نحوه طراحی وبسایت‌هایی است که به طور خودکار و با واکنشگرایی (Responsive) در هر نوع دستگاهی، از جمله کامپیوترهای رومیزی، تبلت‌ها و موبایل‌ها، به درستی نمایش داده می‌شوند. با شرکت در این دوره‌ها، شما می‌توانید مهارت‌های لازم برای ایجاد وبسایت‌هایی با طراحی ریسپانسیو و مناسب برای هر نوع دستگاه را به دست آورید و به یک طراح وب حرفه‌ای تبدیل شوید.
به‌صورت پیش‌فرض با کلیک کردن بر روی منوها گزینه‌هایی برای شما بازخواهند شد که این موضوع کاملاً عادلانه است اما خب در برخی موارد دیگر ممکن است بعضی از طراحان بخواهند یک منوی بازشونده با استفاده از hover بسازند. اگر شما جزء این دسته از افراد هستید پیشنهاد می‌کنیم این مقاله آموزشی را دنبال کنید. شاید این موضوع در وهله اول ازنظر بسیاری از شما سخت به‌نظر بیاید اما در این آموزش، ما روش آسانی را برای شما خواهیم گفت. نقل قولی از طرف یکی از سازندگان بوت استرپ در این‌باره:
Mark Otto
آنچه در این مقاله می‌خوانید
ساخت منوی باز شونده در بوت استرپ
فایل‌های اصلی بوت استرپ را اضافه کنید.
در گام اول کدهایی که در زیر برای شما قرار داده‌ایم را در سایت خود قرار دهید.
ابتدا یک منوی ساده بسازید
با استفاده از کدهایی که ما در این قسمت برای شما قرار می‌دهیم می‌توانید به‌راحتی یک منوی ساده بسازید.
اضافه کردن یک سری استایل برای زیبایی بیشتر
در گام بعدی شما باید 3 قانون اساسی CSS را برای مؤلفه خود مشخص کنید. درواقع این موارد کار بسیار مهم و زیادی را انجام نمی‌دهدند و تنها یک سری فواصل بین سبک‌های منوی شما می‌دهدند که باعث زیبایی سایت شما می‌شود.
.navbar .nav-item:not(:last-child) {
margin-right: 35px;
}
.dropdown-toggle::after {
transition: transform 0.15s linear;
}
.show.dropdown .dropdown-toggle::after {
transform: translateY(3px);
}
سفارشی کردن باز شونده‌ها
در این قسمت می‌خواهیم نحوه سفارشی‌سازی کردن dropdown ها را برای شما شرح دهیم.
این منو بر روی صفحات نمایشگر کوچک یعنی کمتر از 768 پیکسل با کلیک کردن بر روی لینک‌ها نمایش داده می‌شوند. در صفحات متوسط یعنی 768 پیکسل و بالاتر از آن نیز با استفاده از Hover هدف را مشخص می‌کنیم.
.dropdown-menu {
margin-top: 0;
}
در مرحله بعدی ما یک کد jQuery را برای شما خواهیم گفت که یک سری اقدامات را برای شما انجام خواهد داد. این کد با بارگذاری صفحه و تغییر اندازه پنجره اجرا می‌شود.
هر بار که روی منو کلیک می‌‌کنید یک کلاس جدید سی‌‌اس‌‌اس به منو اضافه خواهد شد که شما با استفاده از آن این امکان را خواهید داشت که منوی باز شونده سایت خود را با سی اس اس‌های بیشتر ویرایش کنید.
آیا شما به دنبال کسب اطلاعات بیشتر در مورد "ساخت منو همبرگری با بوت استرپ" هستید؟ با کلیک بر روی تکنولوژی, کسب و کار ایرانی، اگر به دنبال مطالب جالب و آموزنده هستید، ممکن است در این موضوع، مطالب مفید دیگری هم وجود داشته باشد. برای کشف آن ها، به دنبال دسته بندی های مرتبط بگردید. همچنین، ممکن است در این دسته بندی، سریال ها، فیلم ها، کتاب ها و مقالات مفیدی نیز برای شما قرار داشته باشند. بنابراین، همین حالا برای کشف دنیای جذاب و گسترده ی محتواهای مرتبط با "ساخت منو همبرگری با بوت استرپ"، کلیک کنید.