{"id":121,"date":"2015-11-26T22:19:42","date_gmt":"2015-11-27T06:19:42","guid":{"rendered":"http:\/\/jasonflaherty.com\/blog\/?p=121"},"modified":"2015-11-24T22:36:43","modified_gmt":"2015-11-25T06:36:43","slug":"material-design-tabs-with-htmlcss-and-jquery","status":"publish","type":"post","link":"https:\/\/jasonflaherty.com\/blog\/2015\/11\/26\/material-design-tabs-with-htmlcss-and-jquery\/","title":{"rendered":"Material Design Tabs with HTML\/CSS and jQuery"},"content":{"rendered":"<p>I love\u00a0the <a href=\"https:\/\/material.angularjs.org\">angularmaterial library<\/a>. It has a lot of great design and functionality built right in, but I am not working on an angular project and need the <a href=\"https:\/\/material.angularjs.org\/latest\/demo\/tabs\">rad tabs<\/a>!<\/p>\n<p>Working with the horizontal scrolling tab idea from the angular material library, I came up with a simple version you can <a href=\"http:\/\/codepen.io\/jasonflaherty\/pen\/qOGgmp\">check out on CodePen<\/a>\u00a0or right here:<\/p>\n<p>[codepen_embed height=300 theme_id=1 slug_hash=&#8217;qOGgmp&#8217; user=&#8217;arasdesign&#8217; default_tab=&#8217;html&#8217; animations=&#8217;run&#8217;][\/codepen_embed]<\/p>\n<p>Feel free to <a href=\"https:\/\/github.com\/jasonflaherty\/simple-material-design-tabs.git\">clone<\/a> or <a href=\"https:\/\/github.com\/jasonflaherty\/simple-material-design-tabs\">fork<\/a> the library to help make it great!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I love\u00a0the <a href=\"https:\/\/material.angularjs.org\">angularmaterial library<\/a>. It has a lot of great design and functionality built right in, but I am not working on an angular project and need the <a href=\"https:\/\/material.angularjs.org\/latest\/demo\/tabs\">rad tabs<\/a>!<\/p>\n<p class=\"excerpt-link\"><a href=\"https:\/\/jasonflaherty.com\/blog\/2015\/11\/26\/material-design-tabs-with-htmlcss-and-jquery\/\">&sim;&nbsp;Continue Reading&nbsp;&sim;<\/a><\/p>\n","protected":false},"author":1,"featured_media":123,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"footnotes":"","_jetpack_memberships_contains_paid_content":false,"jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[12,53,51,13],"tags":[25,62,63],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/jasonflaherty.com\/blog\/wp-content\/uploads\/2015\/11\/materialdesign_principles_metaphor.png?fit=720%2C720&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p5OfD9-1X","jetpack_likes_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/jasonflaherty.com\/blog\/wp-json\/wp\/v2\/posts\/121"}],"collection":[{"href":"https:\/\/jasonflaherty.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jasonflaherty.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jasonflaherty.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jasonflaherty.com\/blog\/wp-json\/wp\/v2\/comments?post=121"}],"version-history":[{"count":1,"href":"https:\/\/jasonflaherty.com\/blog\/wp-json\/wp\/v2\/posts\/121\/revisions"}],"predecessor-version":[{"id":124,"href":"https:\/\/jasonflaherty.com\/blog\/wp-json\/wp\/v2\/posts\/121\/revisions\/124"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jasonflaherty.com\/blog\/wp-json\/wp\/v2\/media\/123"}],"wp:attachment":[{"href":"https:\/\/jasonflaherty.com\/blog\/wp-json\/wp\/v2\/media?parent=121"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jasonflaherty.com\/blog\/wp-json\/wp\/v2\/categories?post=121"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jasonflaherty.com\/blog\/wp-json\/wp\/v2\/tags?post=121"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}