Apple.com Hamburger Bun Menu - CSS-tricks

Anonim

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.