{"id":3490,"date":"2022-07-03T01:52:52","date_gmt":"2022-07-03T01:52:52","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3490"},"modified":"2023-06-10T11:36:45","modified_gmt":"2023-06-10T11:36:45","slug":"css-tutorial-mobile-navigation-concept","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-tutorial-mobile-navigation-concept\/","title":{"rendered":"CSS Tutorial &#8211; Mobile Navigation Concept"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; CSS Tutorial &#8211; Mobile Navigation Concept, Click on tabs to see them in action.<\/p>\n<p><iframe style=\"width: 100%;\" title=\"CSS Tutorial \u2013 Mobile Navigation Concept\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/rNvXZga?default-tab=result&amp;theme-id=dark\" height=\"600\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/rNvXZga\"><br \/>\nCSS Tutorial \u2013 Mobile Navigation Concept<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"scss\">*{\r\n  margin:0;\r\n  padding:0;\r\n  box-sizing:border-box;\r\n}\r\n\r\n$black: #2f3542;\r\n$grey: #a4b0be;\r\n\r\nbody{\r\n  display:flex;\r\n  justify-content:center;\r\n  align-items:center;\r\n  min-height:100vh;\r\n  transition:background .5s cubic-bezier(0.23, 1, 0.32, 1);\r\n}\r\n\r\nnav{\r\n  width:440px;\r\n}\r\n\r\n\/\/ WAVE\r\n.wave-wrap{\r\n  position:relative;\r\n  width:100%;\r\n  height:33px;\r\n  overflow:hidden;\r\n  margin-bottom:0;\r\n  \r\n  #wave{\r\n    position:absolute;\r\n    width:150px;\r\n    transform-origin:bottom;\r\n    transform:scaleY(0.8);\r\n    transition:all .6s cubic-bezier(0.23, 1, 0.32, 1);\r\n    \r\n    .path{\r\n      fill:$black;\r\n    }\r\n  }\r\n}\r\n\r\n\/\/ LIST\r\n.list-wrap{\r\n  display:flex;\r\n  width:100%;\r\n  height:80px;\r\n  background:$black;\r\n  list-style:none;\r\n  justify-content:space-around;\r\n  padding: 0 20px;\r\n  \r\n  li{\r\n    cursor:pointer;\r\n    position:relative;\r\n    width:100%;\r\n    height:100%;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    transition:all .6s cubic-bezier(0.23, 1, 0.32, 1);\r\n    \r\n    i{\r\n      position:relative;\r\n      font-size:1.5em;\r\n      color:$grey;\r\n      z-index:5;\r\n      transition:all .6s cubic-bezier(0.23, 1, 0.32, 1);\r\n    }\r\n    \r\n    &amp;:before{\r\n      content:\"\";\r\n      position:absolute;\r\n      background:green;\r\n      height:80%;\r\n      width:80%;\r\n      left:10%;\r\n      top:10%;\r\n      border-radius:50%;\r\n      z-index:0;\r\n      transform:scale(0);\r\n      transition:all .6s cubic-bezier(0.23, 1, 0.32, 1);\r\n    }\r\n    \r\n    &amp;.active{\r\n      margin-top:-10px;\r\n      \r\n      i{\r\n        color:$black;\r\n      }\r\n      \r\n      &amp;:before{\r\n        transform:scale(1);\r\n      }\r\n    }\r\n    \r\n    &amp;:nth-child(1){&amp;:before{background:#537895}}\r\n    &amp;:nth-child(2){&amp;:before{background:#ff6b81}}\r\n    &amp;:nth-child(3){&amp;:before{background:#7bed9f}}\r\n    &amp;:nth-child(4){&amp;:before{background:#70a1ff}}\r\n    &amp;:nth-child(5){&amp;:before{background:#dfe4ea}}\r\n  }\r\n}\r\n\r\n\r\n\/\/ \u25bc this is not necessary for the navigation \u25bc\r\n\r\n.phone{\r\n  height:300px;\r\n  border:7px solid rgba(0, 0, 0, 0.05);\r\n  border-radius:20px;\r\n  overflow:hidden;\r\n  display:flex;\r\n  align-items:flex-end;\r\n  flex-direction:column;\r\n  font-family: 'Montserrat', sans-serif;\r\n  \r\n  .page{\r\n    height:327px;\r\n    width:100%;\r\n    display:flex;\r\n    justify-content:center;\r\n    align-items:center;\r\n    font-size:3em;\r\n    color:rgba(0, 0, 0, 0.1);\r\n    text-transform:uppercase;\r\n    letter-spacing:5pt;\r\n    padding-top:50px;\r\n  }\r\n}<\/pre>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\/\/ set the first nav item as active\r\nvar dis = $(\".list-wrap li\").eq(0);\r\n\r\n\/\/ align the wave\r\nalign(dis);\r\n\r\n\/\/ align the wave on click\r\n$(\".list-wrap li\").click(function(){\r\n  dis = $(this);\r\n  \r\n  align(dis);\r\n});\r\n\r\n$('body').on('keydown',function(e){\r\n    var code = e.keyCode || e.which;\r\n  \r\n    if(code == 9) {\r\n      \r\n      if(dis.is(':last-child')){\r\n        $(\".list-wrap li:nth-child(1)\").trigger(\"click\");\r\n      }\r\n      else{\r\n        dis.next().trigger(\"click\");\r\n      }\r\n      \r\n    } \r\n});\r\n\r\n$(\"body\").keydown(function(e) {\r\n  if(e.keyCode == 37) { \/\/ left\r\n    $(\"#showroom\").animate({\r\n      left: \"-=980\"\r\n    });\r\n  }\r\n  else if(e.keyCode == 39) { \/\/ right\r\n    $(\"#showroom\").animate({\r\n      left: \"+=980\"\r\n    });\r\n  }\r\n});\r\n\r\nfunction align(dis){\r\n  \r\n  \/\/ get index of item\r\n  var index = dis.index() + 1;\r\n  \r\n  \/\/ add active class to the new item\r\n  $(\".list-wrap li\").removeClass(\"active\");\r\n  dis.delay(100).queue(function() {\r\n    dis.addClass('active').dequeue();\r\n  });\r\n  \r\n  \/\/ move the wave\r\n  var left = index * 80 - 98;\r\n  \r\n  $(\"#wave\").css('left', left);\r\n  \r\n  \/\/ \u25bc this is not necessary for the navigation \u25bc\r\n  \r\n  \/\/ set the background color\r\n  var color = dis.data('color');\r\n  $(\"body\").css('background', color);\r\n  \r\n  \/\/ set the text\r\n  $(\".page\").text(dis.attr(\"title\"));\r\n}<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; CSS Tutorial &#8211; Mobile Navigation Concept, Click on tabs <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/css-tutorial-mobile-navigation-concept\/\" title=\"CSS Tutorial &#8211; Mobile Navigation Concept\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3498,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,2],"tags":[356,355,103,227],"newstopic":[],"class_list":{"0":"post-3490","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-css","8":"category-web-design","9":"tag-mobile-css","10":"tag-mobile-navigation-concept","11":"tag-web-design","12":"tag-web-designer"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3490","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3490"}],"version-history":[{"count":4,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3490\/revisions"}],"predecessor-version":[{"id":3512,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3490\/revisions\/3512"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3498"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3490"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3490"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3490"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3490"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}