Η Apple έκανε θόρυβο όταν κυκλοφόρησε έναν ενημερωμένο ιστότοπο, συμπεριλαμβανομένης μιας ολοκαίνουργιας αποκριτικής πλοήγησης. Ενώ ο επανασχεδιασμός επικεντρώθηκε σε άλλα πράγματα, ένα πράγμα που ξεχώρισε ήταν η χρήση ενός εικονιδίου μενού χάμπουργκερ σε μια νέα σχεδιασμένη αποκριτική πλοήγηση. Και, όχι μόνο κανένα χάμπουργκερ, ένα χωρίς κρέας, μόνο τα ψωμάκια. Θα μπορούσε να είναι μια δήλωση σχετικά με την απλότητα ή οτιδήποτε άλλο, αλλά εδώ μπορούμε να το αναδημιουργήσουμε με το ίδιο κινούμενο εφέ που μετατρέπει το εικονίδιο από χάμπουργκερ σε ×.
Ο παρακάτω κώδικας προϋποθέτει τη χρήση του αυτόματου επιδιορθωτή.
.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'); ));Δείτε το Μενού Hamburger Buns του Pen Apple από CSS-Tricks (@ css-tricks) στο CodePen.
Άλλα παραδείγματα
Εάν ενδιαφέρεστε για άλλα παραδείγματα εικονιδίου με γραμμές, υπάρχει μια μεγάλη συλλογή στο CodePen που μπορείτε να περιηγηθείτε.