Apple maakte wat lawaai toen ze een bijgewerkte site uitbrachten, inclusief een geheel nieuwe responsieve navigatie. Hoewel het herontwerp op andere dingen was gericht, was een ding dat opviel het gebruik van een hamburgermenupictogram in een nieuw ontworpen responsieve navigatie. En niet zomaar een hamburger, een vleesloze, alleen de broodjes. Het kan een statement zijn over eenvoud of wat dan ook, maar hier is hoe we het kunnen recreëren met hetzelfde geanimeerde effect dat het pictogram transformeert van een hamburger in een ×.
De volgende code gaat uit van het gebruik van 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'); ));Zie het Hamburger Buns-menu van Pen Apple door CSS-Tricks (@ css-tricks) op CodePen.
Andere voorbeelden
Als u geïnteresseerd bent in andere voorbeelden van een gelijnd menupictogram, is er een grote verzameling op CodePen die u kunt doorbladeren.