Apple membuat beberapa kebisingan ketika mereka melancarkan laman web yang dikemas kini, termasuk navigasi responsif yang baru. Walaupun reka bentuk semula difokuskan pada perkara lain, satu perkara yang menonjol adalah penggunaan ikon menu hamburger dalam navigasi responsif yang baru dirancang. Dan bukan hanya hamburger, roti tanpa daging - roti sahaja. Ini boleh menjadi pernyataan mengenai kesederhanaan atau apa sahaja, tetapi inilah cara kita dapat membuatnya dengan kesan animasi yang sama yang mengubah ikon dari hamburger menjadi ×.
Kod berikut mengandaikan penggunaan 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'); ));Lihat Menu Roti Hamburger Pen Apple oleh CSS-Tricks (@ css-tricks) di CodePen.
Contoh lain
Sekiranya anda berminat dengan contoh lain dari ikon menu berjajar, terdapat koleksi besar di CodePen yang boleh anda lihat.