Izlaižot atjauninātu vietni, Apple radīja nelielu troksni, ieskaitot pilnīgi jaunu atsaucīgu navigāciju. Kaut arī pārprojektēšana bija vērsta uz citām lietām, viena lieta, kas iestrēga, bija hamburgera izvēlnes ikonas izmantošana jaunizveidotajā atsaucīgajā navigācijā. Un ne tikai jebkurš hamburgers, bez gaļas - tikai maizītes. Tas varētu būt paziņojums par vienkāršību vai jebko citu, bet lūk, kā mēs to varam atjaunot ar tādu pašu animētu efektu, kas ikonu pārveido no hamburgera uz ×.
Šis kods pieņem, ka tiek izmantots automātiskais labotājs.
.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'); ));Skatiet Code Apple pildspalvveida pilnšļirces izvēlni Hamburger Buns by CSS-Tricks (@ css-tricks).
Citi piemēri
Ja jūs interesē citi izvēlnes ikonas piemēri, CodePen ir plaša kolekcija, kuru varat pārlūkot.