{"id":3074,"date":"2019-06-04T22:14:48","date_gmt":"2019-06-05T01:14:48","guid":{"rendered":"http:\/\/ashleychiasson.com\/blog\/?p=3074"},"modified":"2019-06-04T22:14:48","modified_gmt":"2019-06-05T01:14:48","slug":"e-learning-heroes-challenge-199-tabs-navigation","status":"publish","type":"post","link":"https:\/\/ashleychiasson.com\/blog\/e-learning-heroes-challenge-199-tabs-navigation\/","title":{"rendered":"E-Learning Heroes Challenge #199 &#8211; Tabs Navigation"},"content":{"rendered":"<p>Tonight I was feeling a little nostalgic for the E-Learning Heroes Challenges. For that reason, and the fact that David Anderson is probably going to nag me to participate more when we see each other this week (I KID!), I whipped something up in my evening wind down.<\/p>\n<p style=\"text-align: center;\"><strong>Challenge<\/strong><\/p>\n<p>This challenge was to create one of the most common of <a href=\"https:\/\/community.articulate.com\/articles\/tabs-interactions\/\" target=\"_blank\" rel=\"noopener noreferrer\">e-learning interactions: tabbed navigation<\/a>. Every e-learning developer has created a tabbed interaction, so it&#8217;s always nice to have a repository of suggestions to consult when you feel as though you need to freshen up your development approach. This is what I love about the E-Learning Heroes Challenge recaps &#8211; sometimes my brain is too tired to think!<\/p>\n<p style=\"text-align: center;\"><strong>Method<\/strong><\/p>\n<p>For this tabbed interaction, I first went to Pinterest, where I stumbled upon this <a href=\"https:\/\/fribly.com\/2015\/06\/26\/horizontal-tab-menu\/\" target=\"_blank\" rel=\"noopener noreferrer\">horizontal tab menu<\/a>, and I loved the look\/feel. Next, I opened Storyline to try and replicate the effect. It&#8217;s not perfect, but it&#8217;s close enough for me. I fiddled with the design size, consulted <a href=\"https:\/\/coolors.co\/083d77-ebebd3-da4167-f4d35e-f78764\" target=\"_blank\" rel=\"noopener noreferrer\">coolors.co<\/a> for a colour palette, and then wrote a bunch of things about myself.<\/p>\n<p style=\"text-align: center;\"><strong>Result<\/strong><\/p>\n<p>Like I said, it&#8217;s not perfect, but it&#8217;s close. And at past-bedtime-o&#8217;clock, I&#8217;m happy with it.<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/ashleychiasson.com\/Samples\/ELH_199\/story_html5.html\">Click Here<\/a> to view the full interaction.<\/p>\n<p><center><iframe loading=\"lazy\" src=\"https:\/\/giphy.com\/embed\/LmrHOziLLoz8R8kd23\" width=\"400\" height=\"480\" frameBorder=\"0\" class=\"giphy-embed\" allowFullScreen><\/iframe><\/center><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tonight I was feeling a little nostalgic for the E-Learning Heroes Challenges. For that reason, and the fact that David Anderson is probably going to nag me to participate more when we see each other this week (I KID!), I whipped something up in my evening wind down. Challenge This challenge was to create one [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","jetpack_post_was_ever_published":false,"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[15],"tags":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p4s3cq-NA","_links":{"self":[{"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/posts\/3074"}],"collection":[{"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/comments?post=3074"}],"version-history":[{"count":1,"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/posts\/3074\/revisions"}],"predecessor-version":[{"id":3075,"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/posts\/3074\/revisions\/3075"}],"wp:attachment":[{"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/media?parent=3074"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/categories?post=3074"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/tags?post=3074"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}