Apple издадоха известен шум, когато пуснаха актуализиран сайт, включително изцяло нова адаптивна навигация. Докато редизайнът беше фокусиран върху други неща, едно нещо, което изпъкна, беше използването на икона на меню за хамбургер в новопроектирана отзивчива навигация. И не какъвто и да е хамбургер, безмесен - само кифличките. Може да е изявление за простота или каквото и да е, но ето как можем да го пресъздадем със същия анимиран ефект, който превръща иконата от хамбургер в ×.
Следващият код предполага използването на автопрефиксър.
.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'); ));Вижте Менюто за хамбургери на ябълката на Pen от CSS-Tricks (@ css-tricks) на CodePen.
Други примери
Ако се интересувате от други примери за подредена икона на меню, в CodePen има голяма колекция, която можете да разглеждате.