{"id":207286,"date":"2015-09-01T13:31:40","date_gmt":"2015-09-01T20:31:40","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=207286"},"modified":"2021-09-02T07:20:51","modified_gmt":"2021-09-02T14:20:51","slug":"apple-com-hamburger-bun-menu","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/snippets\/css\/apple-com-hamburger-bun-menu\/","title":{"rendered":"Apple.com Hamburger Bun Menu"},"content":{"rendered":"<p>Apple made some noise when they <a href=\"http:\/\/thenextweb.com\/apple\/2015\/08\/07\/apple-merges-product-pages-and-online-store-in-website-redesign\/\" rel=\"noopener\">released an updated site<\/a>, including an all-new responsive navigation. While the redesign was focused on other things, one thing that stuck out was the use of a <a href=\"http:\/\/www.theatlantic.com\/product\/archive\/2014\/08\/the-hamburger-menu-debate\/379145\/\" rel=\"noopener\">hamburger menu icon<\/a> in a newly designed responsive navigation. And, not just any hamburger, a meatless one&mdash;just the buns. It could be a statement on simplicity or whatever, but here&#8217;s how we can recreate it with the same animated effect that transforms the icon from a hamburger to an \u00d7.<\/p>\n<p>The following code assumes the use of autoprefixer.<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.hamburger {\r\n  cursor: pointer;\r\n  position: absolute;\r\n  width: 48px;\r\n  height: 48px;\r\n  transition: all 0.25s;\r\n}\r\n\r\n.hamburger__top-bun,\r\n.hamburger__bottom-bun {\r\n  content: '';\r\n  display: block;\r\n  position: absolute;\r\n  left: 15px;\r\n  width: 18px;\r\n  height: 1px;\r\n  background: #fff;\r\n  transform: rotate(0);\r\n  transition: all 0.25s;\r\n}\r\n\r\n.hamburger:hover [class*=\"-bun\"] {\r\n  background: #999;\r\n}\r\n\r\n.hamburger__top-bun {\r\n  top: 23px;\r\n  transform: translateY(-3px);\r\n}\r\n\r\n.hamburger__bottom-bun {\r\n  bottom: 23px;\r\n  transform: translateY(3px);\r\n}\r\n\r\n.open {\r\n  transform: rotate(90deg);\r\n}\r\n\r\n.open .hamburger__top-bun {\r\n  transform: \r\n    rotate(45deg) \r\n    translateY(0px);\r\n}\r\n\r\n.open .hamburger__bottom-bun {\r\n  transform: \r\n    rotate(-45deg) \r\n    translateY(0px);\r\n} <\/code><\/pre>\n<pre rel=\"jQuery\"><code class=\"language-javascript\">$('.hamburger').click (function(){\r\n  $(this).toggleClass('open');\r\n});<\/code><\/pre>\n<p data-height=\"190\" style=\"height: 190px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"bVboyY\" data-default-tab=\"result\" data-user=\"css-tricks\" class='codepen'>See the Pen <a href=\"http:\/\/codepen.io\/team\/css-tricks\/pen\/bVboyY\/\" rel=\"noopener\">Apple&#8217;s Hamburger Buns Menu<\/a> by CSS-Tricks (<a href=\"http:\/\/codepen.io\/css-tricks\" rel=\"noopener\">@css-tricks<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<h3>Other Examples<\/h3>\n<p>If you&#8217;re interested in other examples of a lined menu icon, there is <a href=\"http:\/\/codepen.io\/collection\/IDwnG\/\" rel=\"noopener\">a big collection on CodePen<\/a> you can browse.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Apple made some noise when they released an updated site, including an all-new responsive navigation. While the redesign was focused on other things, one thing that stuck out was the use of a hamburger menu icon in a newly designed responsive navigation. And, not just any hamburger, a meatless one&mdash;just the buns. It could be [&hellip;]<\/p>\n","protected":false},"author":2508,"featured_media":0,"parent":3222,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-snippet.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/207286"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=207286"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/207286\/revisions"}],"predecessor-version":[{"id":207472,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/207286\/revisions\/207472"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/3222"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=207286"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=207286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}