Apple lavede noget støj, da de udgav et opdateret websted, inklusive en helt ny responsiv navigation. Mens redesignet var fokuseret på andre ting, var en ting, der stak ud, brugen af et hamburger-menuikon i en nydesignet responsiv navigation. Og ikke bare en hamburger, en kødfri en-bare boller. Det kan være en erklæring om enkelhed eller hvad som helst, men her kan vi genskabe det med den samme animerede effekt, der omdanner ikonet fra en hamburger til en ×.
Den følgende kode antager brugen af autoprefixer.
.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 Pen Apples Hamburger Buns Menu af CSS-Tricks (@ css-tricks) på CodePen.
Andre eksempler
Hvis du er interesseret i andre eksempler på et foret menuikon, er der en stor samling på CodePen, du kan gennemse.