Apple ga litt bråk da de ga ut et oppdatert nettsted, inkludert en helt ny responsiv navigasjon. Mens redesignet var fokusert på andre ting, var en ting som stakk ut bruken av et hamburgermenyikon i en nydesignet responsiv navigasjon. Og ikke bare en hamburger, en kjøttfri en-bare boller. Det kan være en uttalelse om enkelhet eller hva som helst, men her kan vi gjenskape den med den samme animerte effekten som forvandler ikonet fra en hamburger til en ×.
Følgende kode forutsetter bruk av autofrefixer.
.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'); ));Se Penn Apples Hamburger Buns Menu av CSS-Tricks (@ css-tricks) på CodePen.
Andre eksempler
Hvis du er interessert i andre eksempler på et foret menyikon, er det en stor samling på CodePen du kan bla gjennom.