Apple, tamamen yeni bir duyarlı gezinme de dahil olmak üzere güncellenmiş bir site yayınladığında biraz gürültü yaptı. Yeniden tasarım başka şeylere odaklanırken, göze çarpan bir şey, yeni tasarlanmış duyarlı bir gezinmede bir hamburger menü simgesinin kullanılmasıydı. Ve sadece herhangi bir hamburger değil, etsiz bir tane - sadece çörekler. Sadelik veya her neyse üzerine bir ifade olabilir, ancak simgeyi hamburgerden ×'e dönüştüren aynı animasyon efektiyle onu nasıl yeniden oluşturabileceğimizi burada bulabilirsiniz.
Aşağıdaki kod, autoprefixer'ın kullanıldığını varsayar.
.hamburger ( cursor: pointer; position: absolute; width: 48px; height: 48px; transition: all 0.25s; ) .hamburger__top-bun, .hamburger__bottom-bun ( content: ''; display: block; position: absolute; left: 15px; width: 18px; height: 1px; background: #fff; transform: rotate(0); transition: all 0.25s; ) .hamburger:hover (class*="-bun") ( background: #999; ) .hamburger__top-bun ( top: 23px; transform: translateY(-3px); ) .hamburger__bottom-bun ( bottom: 23px; transform: translateY(3px); ) .open ( transform: rotate(90deg); ) .open .hamburger__top-bun ( transform: rotate(45deg) translateY(0px); ) .open .hamburger__bottom-bun ( transform: rotate(-45deg) translateY(0px); ) $('.hamburger').click (function()( $(this).toggleClass('open'); ));CodePen'de CSS-Tricks (@ css-tricks) tarafından Kalem Apple'ın Hamburger Çörekler Menüsüne bakın.
Diğer Örnekler
Çizgili menü simgesinin diğer örnekleriyle ilgileniyorsanız, CodePen'de göz atabileceğiniz büyük bir koleksiyon var.