ساخت آیکون همبرگر با css

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

ساختار html به صورت زیر می باشد:

<a class="navicon-button x">
  <span class="navicon"></span>
</a>

برای ساخت این آیکون نیاز به سه خط داریم که خط وسط همان عنصر span با کلاس navicon می باشد. برای ساخت دو خط دیگر از انتخابگرهای after و before استفاده می کنیم.

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

.navicon-button {
  font-size: 13px;
}

یک مورد استفاده از این آیکون در مثال زیر نشان داده شده است:
 

See the Pen NqXpmZ by Mojtaba Seyedi (@seyedi) on CodePen.

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

 
در ادامه بررسی این صفحه خالی از لطف نخواهد بود.