{"id":1843,"date":"2022-03-09T13:29:00","date_gmt":"2022-03-09T18:29:00","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-fall-21\/?p=1843"},"modified":"2022-03-14T09:27:15","modified_gmt":"2022-03-14T13:27:15","slug":"responsive-navigation","status":"publish","type":"post","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/topics\/css\/responsive-navigation\/","title":{"rendered":"Responsive Navigation"},"content":{"rendered":"\n<p>There are a large number of ways to do responsive navigation.&nbsp; This post contains three examples from CodePen and then links to some sites that offer navigation examples that you can copy and paste.&nbsp;<\/p>\n\n\n\n<p>If you use one of these, add links to it in your Designed By page.<\/p>\n\n\n\n<p>NEW EXAMPLES<\/p>\n\n\n\n<p>I&#8217;ve added a couple of new options under Example 0.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Example 0: Smart Navbar<\/h3>\n\n\n\n<p>The two navbars below show and hide themselves as people scroll. They are adopted from:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.jemimaabu.com\/\" target=\"_blank\">Jemima Abu<\/a>\u00a0in her article <a rel=\"noreferrer noopener\" href=\"https:\/\/css-tricks.com\/creating-a-smart-navbar-with-vanilla-javascript\/\" target=\"_blank\">Creating a Smart Navbar With Vanilla JavaScript<\/a><\/li><li>CSS hamburger icon was taken from:\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/codepen.io\/elijahmanor\/pen\/wvvqjR\" target=\"_blank\">Elijah Manor&#8217;s CodePen<\/a><\/li><li>Vanilla JS code for the slide toggle when the hamburger is clicked is taken from\u00a0<a rel=\"noreferrer noopener\" href=\"https:\/\/jsfiddle.net\/gebpjo1L\/18\/\" target=\"_blank\">this JS fiddle<\/a>.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Smart Navbar<\/h4>\n\n\n\n<p>This menu will work if you only have a few nav items. The logo and nav are stacked on screens smaller than 600px and on the same line on larger screens.<\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/codepen.io\/profstein\/pen\/popvJpP\" target=\"_blank\">https:\/\/codepen.io\/profstein\/pen\/popvJpP<\/a><\/p>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"popvJpP\" data-user=\"profstein\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/profstein\/pen\/popvJpP\">\n  Smart Navbar<\/a> by Christopher Stein (<a href=\"https:\/\/codepen.io\/profstein\">@profstein<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<h4 class=\"wp-block-heading\">Smart Navbar with Hamburger Menu<\/h4>\n\n\n\n<p>This example has a hamburger menu for screens under 600px.<\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/codepen.io\/profstein\/pen\/JjMoYPV\" target=\"_blank\">https:\/\/codepen.io\/profstein\/pen\/JjMoYPV<\/a><\/p>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"html,result\" data-slug-hash=\"JjMoYPV\" data-user=\"profstein\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/profstein\/pen\/JjMoYPV\">\n  Smart Navbar with Hamburger Menu<\/a> by Christopher Stein (<a href=\"https:\/\/codepen.io\/profstein\">@profstein<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<h3 class=\"wp-block-heading\">Example 1: Responsive Nav Title and Navigation<\/h3>\n\n\n\n<p>In this example the site title is the first link in the navigation. It is adapted from W3 Schools.<\/p>\n\n\n\n<p><a href=\"https:\/\/codepen.io\/profstein\/pen\/eezWmZ\">https:\/\/codepen.io\/profstein\/pen\/eezWmZ<\/a><\/p>\n\n\n\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"default\" data-default-tab=\"html,result\" data-user=\"profstein\" data-slug-hash=\"eezWmZ\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Responsive Navigation: Title and Nav\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/profstein\/pen\/eezWmZ\">\n  Responsive Navigation: Title and Nav<\/a> by Christopher Stein (<a href=\"https:\/\/codepen.io\/profstein\">@profstein<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<h4 class=\"wp-block-heading\">Alternate Version<\/h4>\n\n\n\n<p>This version separates out the Site title, nav and hamburger menu into separate items and also slides the nav down smoothly.<\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/codepen.io\/profstein\/pen\/VwzbJYE\" target=\"_blank\">https:\/\/codepen.io\/profstein\/pen\/VwzbJYE<\/a> <\/p>\n\n\n\n\n\n<h3 class=\"wp-block-heading\">Example 2: Responsive navigation with menu button<\/h3>\n\n\n\n<p>In this example the menu is a button that reads \u201cmenu\u201d when the screen is small. On larger screens the button is replaced by horizontal navigation.<\/p>\n\n\n\n<p><a href=\"https:\/\/codepen.io\/profstein\/pen\/NOjmgW\">https:\/\/codepen.io\/profstein\/pen\/NOjmgW<\/a><\/p>\n\n\n\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"default\" data-default-tab=\"css,result\" data-user=\"profstein\" data-slug-hash=\"NOjmgW\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Responsive Navigation with Modernizr\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/profstein\/pen\/NOjmgW\">\n  Responsive Navigation with Modernizr<\/a> by Christopher Stein (<a href=\"https:\/\/codepen.io\/profstein\">@profstein<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<h3 class=\"wp-block-heading\">Example 3: Responsive Navigation &#8211; Pin to top -with menu button<\/h3>\n\n\n\n<p>This is just like Example 2 except that the horizontal navigation on large screens is pinned to the top of the screen.<\/p>\n\n\n\n<p><a href=\"https:\/\/codepen.io\/profstein\/pen\/RwNrZXd?editors=0100\">https:\/\/codepen.io\/profstein\/pen\/RwNrZXd?editors=0100<\/a><\/p>\n\n\n\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"default\" data-default-tab=\"css,result\" data-user=\"profstein\" data-slug-hash=\"RwNrZXd\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Responsive Navigation - Pin to Top with Modernizr\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/profstein\/pen\/RwNrZXd\">\n  Responsive Navigation &#8211; Pin to Top with Modernizr<\/a> by Christopher Stein (<a href=\"https:\/\/codepen.io\/profstein\">@profstein<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<h3 class=\"wp-block-heading\">Example 4: Responsive Navigation with Image&nbsp;<\/h3>\n\n\n\n<p>In this example there is an image that serves as both the logo and the link to the home page. This one also has two separate nav elements, one for mobile and one for other screens. You will need to remember to change both navigations if you change either. Having two nav can be useful however if you want to style the mobile navigation list and the larger screen navigation list very differently.&nbsp;<\/p>\n\n\n\n<p><a href=\"https:\/\/codepen.io\/profstein\/pen\/gObOzzw\">https:\/\/codepen.io\/profstein\/pen\/gObOzzw<\/a><\/p>\n\n\n\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"default\" data-default-tab=\"css,result\" data-user=\"profstein\" data-slug-hash=\"gObOzzw\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Responsive Navigation with image\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/profstein\/pen\/gObOzzw\">\n  Responsive Navigation with image<\/a> by Christopher Stein (<a href=\"https:\/\/codepen.io\/profstein\">@profstein<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<h3 class=\"wp-block-heading\">Example 5: Off-Canvas (left) Menu<\/h3>\n\n\n\n<p>This example the menu slides in from the left side of the screen.&nbsp;It is also a pure CSS nav menu with no JavaScript<\/p>\n\n\n\n<p><a href=\"https:\/\/codepen.io\/profstein\/pen\/WdxPWd\">https:\/\/codepen.io\/profstein\/pen\/WdxPWd<\/a><\/p>\n\n\n\n<p class=\"codepen\" data-height=\"265\" data-theme-id=\"default\" data-default-tab=\"css,result\" data-user=\"profstein\" data-slug-hash=\"WdxPWd\" style=\"height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Menu Off-Canvas (Pure CSS)\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/profstein\/pen\/WdxPWd\">\n  Menu Off-Canvas (Pure CSS)<\/a> by Christopher Stein (<a href=\"https:\/\/codepen.io\/profstein\">@profstein<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<h3 class=\"wp-block-heading\">Links to Navigation Sites<\/h3>\n\n\n\n<p>These sites each offer a navigation. They have code you can use and examples that you can see.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Responsive Nav: <a href=\"http:\/\/responsive-nav.com\/\">http:\/\/responsive-nav.com\/<\/a><\/li><li>Flexbox Navigation: <a href=\"https:\/\/css-tricks.com\/flexbox-bar-navigation\/\">https:\/\/css-tricks.com\/flexbox-bar-navigation\/<\/a><\/li><li>Side Navigation: <a href=\"https:\/\/www.berriart.com\/sidr\/\">https:\/\/www.berriart.com\/sidr\/<\/a><ul><li><a href=\"https:\/\/github.com\/artberri\/sidr\">https:\/\/github.com\/artberri\/sidr<\/a><\/li><li><a href=\"https:\/\/github.com\/artberri\/sidr\/tree\/master\/examples\">https:\/\/github.com\/artberri\/sidr\/tree\/master\/examples<\/a><\/li><\/ul><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>There are a large number of ways to do responsive navigation.\u00a0 This post contains three examples from CodePen and then links to some sites that offer navigation examples that you can copy and paste.\u00a0<\/p>\n","protected":false},"author":16,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","openlab_post_visibility":"","footnotes":""},"categories":[19,142,36],"tags":[147,148,104],"coauthors":[87],"class_list":["post-1843","post","type-post","status-publish","format-standard","hentry","category-css","category-responsive-site","category-ux","tag-nav","tag-navigation","tag-responsive","entry"],"featured_image_urls_v2":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":"","post-thumbnail":"","gform-image-choice-sm":"","gform-image-choice-md":"","gform-image-choice-lg":""},"post_excerpt_stackable_v2":"<p>There are a large number of ways to do responsive navigation.\u00a0 This post contains three examples from CodePen and then links to some sites that offer navigation examples that you can copy and paste.\u00a0<\/p>\n","category_list_v2":"<a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/category\/topics\/css\/\" rel=\"category tag\">CSS<\/a>, <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/category\/projects\/responsive-site\/\" rel=\"category tag\">Responsive Site<\/a>, <a href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/category\/ux\/\" rel=\"category tag\">UX<\/a>","author_info_v2":{"name":"Christopher Stein","url":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/author\/cstein\/"},"comments_num_v2":"1 comment","uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"post-thumbnail":false,"gform-image-choice-sm":false,"gform-image-choice-md":false,"gform-image-choice-lg":false},"uagb_author_info":{"display_name":"Christopher Stein","author_link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/author\/cstein\/"},"uagb_comment_info":1,"uagb_excerpt":"There are a large number of ways to do responsive navigation.\u00a0 This post contains three examples from CodePen and then links to some sites that offer navigation examples that you can copy and paste.\u00a0","_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/posts\/1843","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/comments?post=1843"}],"version-history":[{"count":9,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/posts\/1843\/revisions"}],"predecessor-version":[{"id":2723,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/posts\/1843\/revisions\/2723"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/media?parent=1843"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/categories?post=1843"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/tags?post=1843"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-22\/wp-json\/wp\/v2\/coauthors?post=1843"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}