Apple gjorde lite buller när de släppte en uppdaterad webbplats, inklusive en helt ny responsiv navigering. Medan redesignen fokuserades på andra saker var en sak som stod ut användningen av en hamburgarmenyikon i en nydesignad responsiv navigering. Och inte bara någon hamburgare, en köttfri en-bara bullar. Det kan vara ett uttalande om enkelhet eller vad som helst, men så här kan vi återskapa det med samma animerade effekt som förvandlar ikonen från en hamburgare till en ×.
Följande kod förutsätter användning av 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 av CSS-Tricks (@ css-tricks) på CodePen.
Andra exempel
Om du är intresserad av andra exempel på en fodrad menyikon finns det en stor samling på CodePen du kan bläddra bland.