Аппле је направио мало буке када су објавили ажурирану веб локацију, укључујући потпуно нову навигацију која одговара. Иако је редизајн био усредсређен на друге ствари, једна ствар која је испала је употреба иконе менија за хамбургере у ново дизајнираној одзивној навигацији. И то не било који хамбургер, безмесни - само лепиње. То би могла бити изјава о једноставности или било шта друго, али ево како је можемо поново створити са истим анимираним ефектом који икону претвара из хамбургера у ×.
Следећи код претпоставља употребу аутопрефиксера.
.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'); ));Погледајте мени за пециво са хамбургерима оловке Аппле компаније ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.
Остали примери
Ако сте заинтересовани за друге примере постављене иконе менија, на ЦодеПену постоји велика колекција коју можете да прегледате.