diff options
| -rw-r--r-- | public/assets/js/app.js | 7 | ||||
| -rw-r--r-- | public/assets/ok.css | 56 | ||||
| -rw-r--r-- | templates/index.liquid | 15 |
3 files changed, 75 insertions, 3 deletions
diff --git a/public/assets/js/app.js b/public/assets/js/app.js index 974d51e..8f0bfe6 100644 --- a/public/assets/js/app.js +++ b/public/assets/js/app.js @@ -22,4 +22,9 @@ $('.top').flickity({ x3: 15 } -});
\ No newline at end of file +}); + +$('.index').click( function(){ + $('body').toggleClass('navopen'); +}); + diff --git a/public/assets/ok.css b/public/assets/ok.css index 258b0ae..4a73f15 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -26,6 +26,26 @@ overflow: hidden; } + .menu { + position: fixed; + height: 100vh; + width: 30vw; + top: 0; + left: 0; + z-index: 2; + transform: translateX(-30vw); + padding: 30px 5px 5px 5px; + transition: 150ms transform cubic-bezier(0, 0, 0, 1); + } + + .navopen .menu { + transform: translateX(0vw); + } + + .navopen .item { + transform: translateX(30vw); + } + div, span { display: inline-block; @@ -38,6 +58,7 @@ display: flex; -webkit-flex-flow: column wrap; flex-flow: column wrap; + transition: 150ms transform cubic-bezier(0, 0, 0, 1); } nav { @@ -47,6 +68,10 @@ width: 100%; padding: 5px; z-index: 3; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } nav span { @@ -54,6 +79,13 @@ width: 100%; } + .index:hover, + .navopen .index { + color: white; + cursor: pointer; + background: black; + } + nav span div:first-child { float: left; } @@ -254,6 +286,23 @@ } @media (max-width:480px) { + nav { + font-size: 11px; + font-family: 'Roboto'; + font-weight: 400; + } + nav span div:first-child { + font-size: 0; + } + nav span { + border: 0; + } + nav img { + width: 12px; + } + nav span div:nth-child(2) { + display: none; + } .cell, button { height: 50vh; @@ -276,4 +325,11 @@ .headings { display: none; } + .menu { + width: 45vw; + transform: translateX(-45vw); + } + .navopen .item { + transform: translateX(45vw); + } }
\ No newline at end of file diff --git a/templates/index.liquid b/templates/index.liquid index d48e2ea..32a59ae 100644 --- a/templates/index.liquid +++ b/templates/index.liquid @@ -28,10 +28,21 @@ <link href='assets/ok.css' rel='stylesheet' type='text/css'> </head> -<body> +<body class=""> + <div class="menu"> + <ul> + <li>Project Title</li> + <li>Project Title</li> + <li>Project Title</li> + <li>Project Title</li> + <li>Project Title</li> + <li>Project Title</li> + <li>Project Title</li> + </ul> + </div> <nav> <span> - <div><img src="http://i1.wp.com/www.sora.digital/wp-content/uploads/glyphicons-517-menu-hamburger.png?fit=300%2C300" width="8"> INDEX</div> + <div class="index"><img src="http://i1.wp.com/www.sora.digital/wp-content/uploads/glyphicons-517-menu-hamburger.png?fit=300%2C300" width="8"> INDEX</div> <div>OKFocus LLC. 2016</div> <div>SLIDE.1 - PG.1</div> </span> |