Apple a fait du bruit en publiant un site mis à jour, y compris une toute nouvelle navigation réactive. Alors que la refonte était axée sur d'autres choses, une chose qui ressortait était l'utilisation d'une icône de menu hamburger dans une navigation réactive nouvellement conçue. Et pas n'importe quel hamburger, mais sans viande - juste les petits pains. Cela pourrait être une déclaration sur la simplicité ou autre, mais voici comment nous pouvons le recréer avec le même effet animé qui transforme l'icône d'un hamburger en ×.
Le code suivant suppose l'utilisation de l'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'); ));Voir le menu Hamburger Buns de Pen Apple par CSS-Tricks (@ css-tricks) sur CodePen.
Autres exemples
Si vous êtes intéressé par d'autres exemples d'icône de menu ligné, il existe une grande collection sur CodePen que vous pouvez parcourir.