जब उन्होंने एक अद्यतन साइट जारी की, तो ऑल-न्यू रेस्पॉन्सिव नेविगेशन सहित एप्पल ने कुछ शोर किया। जबकि रीडिज़ाइन अन्य चीजों पर केंद्रित था, एक चीज जो बाहर अटक गई थी वह एक नए डिजाइन किए गए उत्तरदायी नेविगेशन में हैमबर्गर मेनू आइकन का उपयोग था। और, कोई हैमबर्गर नहीं, एक मांसहीन-सिर्फ बन्स। यह सादगी पर या जो भी हो, एक बयान हो सकता है, लेकिन यहां हम इसे उसी एनिमेटेड प्रभाव से फिर से बना सकते हैं जो आइकन को हैमबर्गर से × में बदल देता है।
निम्नलिखित कोड ऑटोप्रेफिक्सर के उपयोग को मानता है।
.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'); ));CodePen पर CSS- ट्रिक्स (@ सीएसएस-ट्रिक्स) द्वारा पेन ऐप्पल हैमबर्गर बन्स मेनू देखें।
अन्य उदाहरण
यदि आप एक पंक्तिबद्ध मेनू आइकन के अन्य उदाहरणों में रुचि रखते हैं, तो CodePen पर एक बड़ा संग्रह है जिसे आप ब्राउज़ कर सकते हैं।