Spoločnosť Apple urobila určitý hluk, keď vydala aktualizovanú stránku vrátane úplne novej responzívnej navigácie. Zatiaľ čo sa redizajn zameriaval na iné veci, vytŕčala jedna vec: použitie ikony hamburgerovej ponuky v novo navrhnutej responzívnej navigácii. A nielen akýkoľvek hamburger, bezmäsitý, iba buchty. Môže to byť vyjadrenie k jednoduchosti alebo k čomukoľvek, ale tu je postup, ako ho môžeme vytvoriť s rovnakým animovaným efektom, ktorý transformuje ikonu z hamburgeru na ×.
Nasledujúci kód predpokladá použitie autoprefixeru.
.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'); ));Prezrite si Pen's Hamburger Buns Menu od CSS-Tricks (@ css-tricks) na CodePen.
Ostatné príklady
Ak vás zaujímajú ďalšie príklady ikony s riadkom v ponuke, v aplikácii CodePen je veľká zbierka, ktorú môžete prehliadať.