مشاوره رایگان
دریافت لینک های دانلود
دریافت پستی درب منزل
مبلغ کل:
تومان
جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید
طراحی منوی همبرگری
طراحی منوی همبرگری
به زبان ساده در طراحی وب مدرن ، "منوی همبرگری" یک منوی ساده به صورت افقی یا عمودی است که با کلیک روی دکمه همبرگری باز و بسته می شود. دکمه همبرگری در حالت بسته دارای یک نماد سه خطی (شبیه نان های همبرگر) و در حالت باز دارای یک نماد ضربدری X است.
این نماد با سه خط افقی شبیه یک همبرگر است و نام "منوی همبرگری" را به این نوع منو می دهد.
معمولاً هنگام باز یا بسته کردن ، این منو دارای انیمیشن های مناسبی است که می تواند با CSS3 ، JavaScript یا ترکیبی از این دو ایجاد شود ، مانند موردی که امروز خواهیم دید. بنابراین ، همانطور که از عنوان حدس می زدید، امروز خواهیم دید که چگونه می توان یک منوی همبرگری دارای انیمیشن ایجاد کرد.
در اینجا منویی که با دکمه همبرگری باز می شود یک نوار ناوبری یا منوی افقی است.
فهرست مطالب
- پیش نمایش نتیجه نهایی قبل از شروع
- ساختار صفحه - کد HTML
- استایل دادن به منو و انیمیشن ها - کد CSS
- مدیریت حالتهای باز و بسته منو با jQuery
- واکنش گرا کردن طراحی با Media Query ها
- نتیجه گیری
پیش نمایش نتیجه نهایی قبل از شروع
در لینک زیر می توانید نتیجه کار را ببینید:
توجه: در هنگام مشاهده نتیجه عرض مرورگر خود را تغییر دهید و تغییر حالت منو را در اندازه های مختلف صفحه نیز ببینید.
در اندازه صفحه کوچک مثلاً در موبایل ، منو در ابتدا بسته است و با کلیک روی دکمه همبرگری باز می شود ولی در صفحه های بزرگتر مثل تبلت و رایانه منو در ابتدا باز است.
منوی بسته در صفحات با عرض کم مثل موبایل:
منوی باز در صفحات با عرض کم مثل موبایل:
منوی بسته در صفحات با عرض زیاد مثل کامپیوتر:
منوی باز در صفحات با عرض زیاد مثل کامپیوتر:
ساختار صفحه - کد HTML
برای ایجاد منو از HTML ، CSS و jQuery استفاده خواهیم کرد. انیمیشن ها با CSS3 ایجاد می شوند و تغییر بین دو حالت باز و بسته با jQuery انجام می شود.
ما همچنین از برخی media query های CSS برای سفارشی کردن ظاهر صفحه در تلفن های همراه استفاده خواهیم کرد.
با ساختار صفحه و عناصر آن در HTML شروع خواهیم کرد. در زیر کد HTML ، فایل "index.html" است ، برای کوتاه کردن آموزش فقط قسمتهای مرتبط با موضوع را نشان می دهم:
<body>
<nav class="top-menu active">
<div class="components">
<div class="logo">
<a href="index.html">Hamburger Top Menu</a>
</div>
<ul class="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Prices</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<div class="hamburger-button">
<button type="button">
<span></span>
<span></span>
<span></span>
</button>
</div>
<div class="page-content">
<h1>Hamburger Top Menu with Animation</h1>
<p>Clicksite</p>
<p><a href="mailto:clicksite.ir@gmail.com">clicksite.ir@gmail.com</a></p>
</div>
<!-- ... -->
</body>
همانطور که مشاهده می کنید ، ما یک منوی ساده (برچسب "nav") با لوگو و لیستی از موارد منو ایجاد کرده ایم. برای تمایز بین حالتهای باز و بسته از کلاس active استفاده می کنیم. همچنین دکمه همبرگری را در خارج از منو قرار داده ایم ، به این ترتیب اداره کردن آن و قرار دادن آن در موقعیت مطلوب درون صفحه آسان تر است.
نماد همبرگر (سه خط افقی) داخل دکمه با سه برچسب span ایجاد می شود. ما از سه تگ جداگانه span استفاده می کنیم تا بتوانیم آنها را به صورت جداگانه "متحرک" کنیم تا با باز یا بسته شدن دکمه ، جلوه خوبی ایجاد کنیم.
بعد از آن ، محتوای صفحه را داریم و برای اینکه ایده ای از جلوه ی کار در یک صفحه واقعی بدست آید فقط چند سطر متن نمایشی نیز به صفحه اضافه کرده ام.
استایل دادن به منو و انیمیشن ها - کد CSS
اکنون به منو استایل می دهیم و انیمیشن ها را با چند کد CSS ایجاد می کنیم. این کد را می توانید در فایل "style.css" درون پوشه /assets/css/ ذخیره کنید.
در این قسمت فقط کد منو و نماد همبرگری را می بینید. کد CSS سایر قسمت های صفحه برای خلاصه کردن در اینجا نیامده است.
با استایل های منو شروع می کنیم:
/* Menu code */
.top-menu {
position: fixed;
top: -65px;
left: 0;
width: 100%;
padding: 10px 0;
background: #333;
box-shadow: 0 2px 5px 1px rgba(51, 51, 51, 0.5);
transition: all .5s cubic-bezier(0.250, 0.250, 0.750, 0.750);
}
.top-menu.active {
top: 0;
}
.top-menu .components {
max-width: 1140px;
margin: 0 auto;
overflow: hidden;
}
.top-menu .logo {
float: left;
width: 20%;
text-align: left;
}
.top-menu .logo a {
display: inline-block;
width: 123px;
height: 40px;
background: url(../img/logo.png) left center no-repeat;
border: 0;
text-indent: -999999px;
}
.top-menu .navigation {
float: left;
width: 70%;
text-align: right;
}
.top-menu .navigation li {
display: inline-block;
}
.top-menu .navigation li a {
display: inline-block;
padding: 5px 10px;
color: #fff;
border: 0;
}
.top-menu .navigation li a:hover,
.top-menu .navigation li a:focus {
color: #ccc;
border: 0;
outline: 0;
}
کد آن بسیار ساده است. چند توضیح که باید در مورد منو و کد بالا ذکر شود:
- این منو در قسمت بالای صفحه نمایش موقعیت "ثابت" (position: fixed) دارد.
- این منو در ابتدا 65 پیکسل بالا تر از صفحه است (top: -65px) ، بنابراین به طور پیش فرض قابل مشاهده نیست. ما با استفاده از کلاس active که دارای موقعیت بالایی 0px است ، آن را قابل مشاهده می کنیم.
- با استفاده از ویژگی transition در CSS برخی از انیمیشن ها را به منو اضافه می کنیم. من از این ابزار مفید برای ایجاد انیمیشن های باز و بسته شدن استفاده کرده ام.
حالا اجازه دهید با استایل های دکمه همبرگری ادامه دهیم:
/* Hamburger button code */
.hamburger-button {
position: relative;
max-width: 1140px;
margin: 0 auto;
}
.hamburger-button button {
position: absolute;
top: 10px;
right: 0;
width: 40px;
height: 40px;
background: none;
border: 0;
box-shadow: none;
cursor: pointer;
vertical-align: middle;
z-index: 999;
}
.hamburger-button button:focus {
outline: 0;
}
.hamburger-button button span {
display: block;
width: 80%;
height: 2px;
margin: 5px auto;
background: #fff;
transition: all .8s cubic-bezier(0.250, 0.100, 0.250, 1.000);
}
.hamburger-button button:hover span,
.hamburger-button button:focus span {
background: #ccc;
}
/* rotate first span */
.hamburger-button button span:first-of-type {
transform: rotate(45deg) translate(5px, 5px);
}
/* hide second span */
.hamburger-button button span:nth-of-type(2) {
opacity: 0;
}
/* rotate third span */
.hamburger-button button span:last-of-type {
transform: rotate(-45deg) translate(5px, -5px);
}
.hamburger-button button.menu-closed span {
transform: none;
opacity: 1;
}
دکمه ما دارای عرض 40 پیکسل ، یک موقعیت مطلق (position: absolute) و z-index: 999 است تا همیشه قابل مشاهده باشد.
در مرحله بعدی ، سه تگ span خود را استایل می دهیم ، عرض ، ارتفاع ، حاشیه و غیره را تنظیم می کنیم و از ویژگی transition در CSS برای افزودن انیمیشن همانند منو استفاده می کنیم.
پس از آن ، به یکی از مهمترین قسمتهای این آموزش می رسیم: تغییر شکل ظاهر تگ های span ، ما سه خط افقی در یک حالت داریم (منوی بسته) و یک علامت "X" در حالت دیگر (منوی باز) ) برای این منظور ، از ویژگی transform در CSS استفاده می کنیم. برای ایجاد علامت "X" ، تگ span اول و سوم را می چرخانیم وتگ span دومی را پنهان می کنیم.
برای تمایز بین دو حالت ، از کلاس menu-closed استفاده می کنیم که به دکمه اضافه می کنیم. وقتی دکمه این کلاس را دارد ، همه تغییرات را حذف می کنیم و تمام "span" ها را قابل مشاهده می کنیم ، بنابراین به نماد همبرگری (سه خط افقی) برمی گردیم.
مدیریت حالتهای باز و بسته منو با jQuery
کد jQuery کوچکی نیاز است که فقط برای اضافه کردن و حذف کلاس های active و menu-closed در هنگام کلیک دکمه همبرگری است. این کد درون "scripts.js" در پوشه /assets/js/ است:
$('.hamburger-button button').on('click', function(){
$('.top-menu').toggleClass('active');
$(this).toggleClass('menu-closed');
});
واکنش گرا کردن طراحی با Media Query ها
در دستگاه های تلفن همراه ، مانند تلفن های هوشمند ، منو به طور پیش فرض بسته می شود. برای مشاهده صفحه در تلفن همراه به اینجا بروید. اگر از کامپیوتر استفاده می کنید برای مشاهده نتیجه در تلفن همراه می توانید با تغییر اندازه پنجره عرض صفحه را به اندازه گوشی موبایل کوچک کنید و نتیجه را ببینید.
ما برای رسیدگی به همه این موارد از Media Query های CSS استفاده خواهیم کرد. در اینجا استایل های درون فایل "media-queries.css" که در پوشه /assets/css/ است ، را می بینید به طور معمول من فقط بخشی از کد که مربوط به این قسمت است را نشان می دهم:
@media (min-width: 992px) and (max-width: 1199px) {
.top-menu .components {
max-width: 992px; padding-left: 15px; padding-right: 15px;
}
.hamburger-button { max-width: 992px; }
.hamburger-button button { right: 15px; }
}
@media (min-width: 768px) and (max-width: 991px) {
.top-menu .components {
max-width: 768px; padding-left: 15px; padding-right: 15px;
}
.hamburger-button { max-width: 768px; }
.hamburger-button button { right: 15px; }
}
@media (max-width: 767px) {
.top-menu { top: 0; }
.top-menu.active {
top: -300px;
transition: all 1.2s cubic-bezier(0.250, 0.250, 0.750, 0.750);
}
.top-menu .components { max-width: 100%; padding-top: 50px; }
.top-menu .logo { float: none; width: 100%; text-align: center; }
.top-menu .navigation { float: none; width: 100%; text-align: center; }
.hamburger-button { width: 40px; }
.hamburger-button button span:first-of-type { transform: none; opacity: 1; }
.hamburger-button button span:nth-of-type(2) { transform: none; opacity: 1; }
.hamburger-button button span:last-of-type { transform: none; opacity: 1; }
.hamburger-button button.menu-closed span:first-of-type {
transform: rotate(45deg) translate(5px, 5px);
}
.hamburger-button button.menu-closed span:nth-of-type(2) {
opacity: 0;
}
.hamburger-button button.menu-closed span:last-of-type {
transform: rotate(-45deg) translate(5px, -5px);
}
.page-content { padding-top: 80px; padding-bottom: 60px; }
}
ابتدا ، برای تبلت ها و سایر دستگاه های با صفحه نمایش کوچکتر از desktop ، تغییرات کوچکی در منو انجام می دهیم.
سپس ، به قسمت دستگاه های تلفن همراه می رسیم: صفحه های نمایش (viewport) کوچکتر از 767 پیکسل.
برای تنظیم منوی بسته به عنوان حالت پیش فرض در نمایشگر های کوچک ، کلاس های active و menu-closed تغییر می کنند: کلاس active که قبلاً هنگام باز کردن منو برای آن استفاده می کردیم ، اکنون با بسته شدن منو استفاده می شود . بهترین روش برای رسیدن به هدف مان نیست ، اما کار می کند.
ما همین کار را برای کلاس "menu-closed" (که دکمه همبرگری را کنترل می کند) انجام می دهیم و استایل های اولیه CSS را بازنویسی می کنیم ، البته فقط برای این اندازه های صفحه نمایش (767px=>). همچنین ، برای پنهان کردن منو به طور پیش فرض ، موقعیت بالایی 300- پیکسل را به کلاس active می دهیم (top: -300px).
سپس ، دکمه همبرگری را در وسط صفحه قرار می دهیم. این کار را با دادن عرض 40 پیکسل به کلاس hamburger-button که تگ والد دکمه است و حاشیه چپ و راست آن روی "auto" تنظیم شده است ، انجام می دهیم. بنابراین ، دکمه همبرگری همیشه در مرکز صفحه باقی می ماند.
نتیجه
ما یک منوی بالایی زیبا با یک دکمه "باز/بسته" همبرگری ایجاد کردیم که با چند انیمیشن زیبا نیز همراه است. اکنون می توانید آن را در وب سایت ، برنامه وب یا پروژه خود ادغام کنید. نسخه نمایشی را می توانید در اینجا ببینید.
فصلِ:
5
,
تعداد قسمت ها:
176
,
سطح:
صفر تا صد
این فصل در یک نگاه:
در این فصل پس از بررسی سیستم مسیریابی و طراحی صفحه نمایش ویدیو ها، به سراغ پنل کاربری خواهیم رفت و مباحث Model Binding و…
توجه: این دوره آموزشی به صورت پیوسته بر اساس آخرین نسخه ی ASP.NET Core بروزرسانی خواهد شد. آموزش صفر تا صد طراحی سایت اشتراک ویدیو مشابه آپارات با استفاده از ASP.NET CORE MVC 3.0 و V…
فصلِ:
5
,
تعداد قسمت ها:
135
,
سطح:
صفر تا صد
این فصل در یک نگاه:
…
توضیحات کلی مجموعه: در این مجموعه آموزشی، با استفاده از جدیدترین تکنولوژی ها و ابزار های مایکروسافت (دات نت)، به یک پروژه جذاب مدیریت آگهی مشابه دیوار می پردازیم. این آموزش در دو بخش کلی و…
فصلِ:
2
,
تعداد قسمت ها:
13
,
سطح:
صفر تا صد
موضوعات:
آموزش Bootstrap
این فصل در یک نگاه:
مباحث ریسپانسیو سازی شامل نقاط شکست مختلف - گرید سیستم - فلکس باکس - …
توجه : این دوره هیچ پیش نیازی ندارد و تمام مطالب از صفر آموزش داده شده است. از این رو شما برای شروع این دوره به هیچ مقدمه یا دوره دیگری نیاز ندارید. ویژگی های دوره آموزش بوت استرپ ۵ : - آم…
فصلِ:
6
,
تعداد قسمت ها:
23
,
سطح:
صفر تا صد
موضوعات:
آموزش Bootstrap
این فصل در یک نگاه:
فصل ششم: پروژهپروژه ا : ساخت یک قالب واکنشگرای گروه موسیقیپروژه 2 : ساخت قالب واکنشگرای سایت 5040…
سرفصل دوره آموزش فریم ورک بوت استرپ فصل اول : معرفی بوت استرپ طراحی واکنشگرا ( Responsive Design ) چیست ؟ با مفهوم طراحی واکنشگرا آشنا خواهید شد و تفاوت بین سایت واکنشگرا و سایت نسخه ی …
فصلِ:
4
,
تعداد قسمت ها:
78
,
سطح:
متوسط
موضوعات:
آموزش ASP.NET
آموزش ASP.NET MVC
آموزش JQUERY
آموزش HTML5
آموزش Ajax
آموزش Bootstrap
آموزش JAVASCRIPT
این فصل در یک نگاه:
…
در این دوره آموزشی، وبسایت ورزش3 را با استفاده از ASP.NET Core پیاده سازی می کنیم و همچنین اپ اندروید آن را هم با Xamarin متصل به سرور سایت طراحی و در نهایت نحوه انتشار آن در مارکت هایی مثل …
فصلِ:
4
,
تعداد قسمت ها:
240
,
سطح:
صفر تا صد
موضوعات:
آموزش PHP
آموزش Bootstrap
آموزش CSS
آموزش JQUERY
آموزش HTML
آموزش PHP MVC
آموزش Ajax
آموزش HTML5
این فصل در یک نگاه:
طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…
توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap و به صورت تضمینی و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…
فصلِ:
5
,
تعداد قسمت ها:
201
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش JQUERY
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش Bootstrap
آموزش برنامه نویسی آندروید
این فصل در یک نگاه:
ایجاد پروژه آژانس مسافرتی.....…
فصل اول: آشنایی با مبانی برنامه نویسی اندروید آشنایی با معماری برنامه های اندرویدی ساخت شبیه ساز جهت تست پروژه اندروید آشنایی با دستور Toast و حلقه for در برنامه های اندروی…
فصلِ:
1
,
تعداد قسمت ها:
2
,
سطح:
متوسط
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش PHP
آموزش Ajax
آموزش Bootstrap
آموزش Laravel
آموزش PHP MVC
آموزش ایمیل مارکتینگ
آموزش وردپرس
این فصل در یک نگاه:
بهترین و پر بازده ترین روش تبدیل بازدیدکننده سایت به مشتری تبلیغات هدفمند و برند سازی هوشمندانه با ایمیل می باشد. ایمیل…
وبینار(سمینار آنلاین) آموزش تکنیک های ایمیل مارکتینگ اگر تا انتها این متن را مطالعه کنید نظر شما در مورد ایمیل مارکتینگ 180 درجه عوض می شود!! بر هیچکس پوشیده نیست که از سال 1972 که ای…
فصلِ:
4
,
تعداد قسمت ها:
368
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش HTML
آموزش ساخت فروشگاه اینترنتی
آموزش Bootstrap
آموزش Laravel
این فصل در یک نگاه:
مباحث تکمیلی فریم ورک لاراول…
فصل اول :آموزش مقدماتی فریم ورک لاراول معرفی فریم ورک لاراول و پیشنیازهای انجام کار انجام کانفیگ های اولیه برای نصب و راه اندازی فریم ورک معرفی روش های نصب پروژه لاراولی از طریق سایت گی…
فصلِ:
1
,
تعداد قسمت ها:
155
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش JQUERY
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش HTML
آموزش NodeJs
آموزش Bootstrap
آموزش Laravel
آموزش Symphony
این فصل در یک نگاه:
مباحث مقدماتی فریم ورک react.js…
توضیحات کلی مجموعه: فصل اول : آشنایی با مباحث مقدماتی فریم ورک react.js نصب و راه اندازی node.js و کلیه پیش نیازهای لازم نصب فریم ورک react روی لوکال و انجام تست های لازم آغاز آشنایی …
