commit 076b58a9972ac282d5f648232e8c25c18f72990b Author: tripathyr Date: Mon Jun 10 14:27:55 2019 +0530 First Commit diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..0d58527 Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md new file mode 100755 index 0000000..6555598 --- /dev/null +++ b/README.md @@ -0,0 +1,28 @@ +# Expanding Bar Menus + +An experimental tab-like navigation that expands a content area when clicked. + +[Article on Codrops](https://tympanus.net/codrops/?p=30460) + +[Demo](http://tympanus.net/Development/ExpandingBarMenus/) + +## Credits + +- Artwork copyright by [RuleByArt](https://creativemarket.com/RuleByArt). Purchase on [Creative Market](https://creativemarket.com/RuleByArt/468537-Flight). +- [Anime.js](http://anime-js.com/) by Julian Garnier +- [Enquire.js](http://wicky.nillia.ms/enquire.js/) by Nick Williams +- Photography from [https://unsplash.com](Unsplash.com) + +## License +This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used. + +## Misc + +Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/), [Instagram](https://www.instagram.com/codropsss/) + +[© Codrops 2017](http://www.codrops.com) + + + + + diff --git a/contract.html b/contract.html new file mode 100644 index 0000000..0aa86b8 --- /dev/null +++ b/contract.html @@ -0,0 +1,333 @@ + + + + + + Ranchi Mall FLO Explorer + + + + + + + + + + + + + + + + +
+
+
+ +
+
+
+ + + +
+

+ +
+
+ +
+
+
+

03/09/2017

+

velocity

+

gaussian

+

amphiphilic

+

magnitude

+

saponification

+
+
+

07/23/2017

+

hematocrit

+

ionization

+

geocentric

+

neutrophil

+

energetic

+
+
+
+ +
+
+ +
+

Enter Address/Token name

+
+ + +
+ +
+
+

Active Tokens

+ +
+
+
+ +
+

Top Contracts

+ +
+
+

Enter Address/Contract name

+
+ + +
+ + +
+
+ +
+
+ + + + + + + + + + + \ No newline at end of file diff --git a/css/component.css b/css/component.css new file mode 100755 index 0000000..1e9b890 --- /dev/null +++ b/css/component.css @@ -0,0 +1,126 @@ +.tabsnav { + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 1000; +} + +.tabsnav--hidden { + pointer-events: none; + visibility: hidden; +} + +.tabsnav__item { + height: 50px; + position: relative; + cursor: pointer; +} + +.tabsnav__bar { + background: currentColor; + width: 100%; + height: 100%; + position: absolute; + pointer-events: none; +} + +.tabsnav__title { + position: relative; + cursor: pointer; + margin: 0; + height: 100%; + font-weight: normal; + line-height: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + pointer-events: none; +} + +/* Vertical Menu */ +.tabsnav--vertical { + display: flex; + width: auto; + height: 100%; +} + +.tabsnav--vertical .tabsnav__item { + flex: none; + width: 50px; + height: 100%; +} + +.tabsnav--vertical .tabsnav__title { + transform: rotate(-90deg); +} + +/* Individual menu styles (Basque names) */ + +/* Ander */ +.tabsnav--ander { + left: 45px; +} + +.tabsnav--ander .tabsnav__bar { + background: #fff; +} + +.tabsnav--ander .tabsnav__title { + color: #1d48f3; +} + +.tabsnav--ander .tabsnav__item:not(:last-child) { + margin: 0 10px 0 0; +} + +/* Zeru */ +.tabsnav--zeru { + background: #222525; +} + +.tabsnav--zeru .tabsnav__item:first-child .tabsnav__bar { + background: #161919; +} + +.tabsnav--zeru .tabsnav__item:nth-child(2) .tabsnav__bar { + background: #222525; +} + +.tabsnav--zeru .tabsnav__item:nth-child(3) .tabsnav__bar { + background: #2e3131; +} + +.tabsnav--zeru .tabsnav__title { + color: #fff; +} + +/* Ibai */ +.tabsnav--ibai { + top: 50%; + margin-top: -115px; +} + +.tabsnav--ibai .tabsnav__item { + height: 70px; +} + +.tabsnav--ibai .tabsnav__bar { + background: #414a52; +} + +.tabsnav--ibai .tabsnav__title { + color: #fc0; +} + +.tabsnav--ibai .tabsnav__item:not(:last-child) { + margin: 0 0 10px 0; +} + +@media screen and (max-width: 40em) { + /* don't show a background if on mobile */ + .tabsnav { + background: none; + } +} diff --git a/css/demo.css b/css/demo.css new file mode 100644 index 0000000..d127e10 --- /dev/null +++ b/css/demo.css @@ -0,0 +1,594 @@ +*, +*::after, +*::before { + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +body { + font-family: 'Avenir Next', Avenir, Helvetica, Arial, sans-serif; + color: #393a3e; + background: lavender; +} + +a { + text-decoration: none; + color: #000; + outline: none; +} + +a:hover, +a:focus { + color: #1d48f3; +} + +.hidden { + position: absolute; + overflow: hidden; + width: 0; + height: 0; + pointer-events: none; +} + +/* Icons */ +.icon { + display: block; + width: 1.5em; + height: 1.5em; + margin: 0 auto; + fill: currentColor; +} + +.view { + position: relative; + display: flex; + justify-content: flex-end; + overflow: hidden; + height: 100vh; + margin: 0 0 0 215px; +} + +.content { + z-index: 1; + display: flex; + justify-content: space-between; + width: 100%; + height: 100%; + padding: 25px 50px; + background: url(../img/bg_lavender.jpg) no-repeat top left; + background-size: auto 100%; +} + +.deco__text { + font-size: 0.8em; + line-height: 1; + margin: 0; + color: #bcb8e8; +} + +/* Header */ +.codrops-header { + position: relative; + display: flex; + flex-direction: column; + align-items: flex-end; + height: 100%; + text-align: right; +} + +.codrops-header__info { + font-family: 'Playfair Display', serif; + font-size: 2.5em; + font-weight: 700; + /*font-style: italic;*/ + position: relative; + max-width: 400px; + margin: auto; +} + +.codrops-header__info::after { + font-family: 'Avenir Next', Avenir, Helvetica, Arial, sans-serif; + font-size: 8em; + font-weight: bold; + font-style: normal; + position: absolute; + z-index: -1; + top: 0%; + right: 52.5%; + letter-spacing: -0.05em; + color: #fff; +} + +.codrops-header__deco { + font-size: 2em; + line-height: 1; + padding: 1em 0; + color: #1d48f3; + + writing-mode: vertical-rl; +} + +.codrops-header__title { + font-size: 8.5em; + line-height: 0.8; + margin: 0 -7px 0; + padding: 0; +} + +.codrops-header__tagline { + width: 50%; + margin: 0 0 0 auto; + padding: 0; +} + +/* Top Navigation Style */ +.codrops-links { + position: relative; + display: flex; + justify-content: space-between; + align-items: flex-start; + white-space: nowrap; +} + +.codrops-icon { + display: block; +} + +.codrops-icon:last-child { + margin: 0 0 0 2em; +} + +.btn { + border: none; + background: none; +} + +.btn:focus { + outline: none; +} + +.btn--back { + font-size: 1.5em; + position: absolute; + z-index: 1002; + top: 1em; + right: 1em; + opacity: 0; + color: #1d48f3; +} + +.btn--menu { + font-size: 0.85em; + position: absolute; + z-index: 1000; + top: 0; + left: 0; + display: none; + margin: 10px 0 0 6px; +} + +.btn--menu-active .icon--menu, +.icon--cross { + display: none; +} + +.btn--menu-active .icon--cross { + display: block; +} + +/* Demo links */ +.demos { + display: flex; + align-items: center; + margin: 2em 0 0 auto; +} + +.demos__text { + font-size: 0.8em; + display: block; + margin: 0 2em 0 0; + color: #bcb8e8; +} + +.demo { + position: relative; + display: block; + margin: 0 0 0 1.5em; +} + +.demo:hover, +.demo:focus { + outline: none; +} + +.demo--current { + pointer-events: none; + color: #fff; +} + +.demo--current::before { + content: ''; + position: absolute; + z-index: -1; + top: 50%; + left: 50%; + width: 32px; + height: 32px; + margin: -17px 0 0 -16px; + border-radius: 50%; + background: #1d48f3; +} +/* Content */ +.tabscontent { + pointer-events: none; +} + +.tabscontent__item { + position: fixed; + z-index: 1001; + top: 0; + left: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + width: 100%; + height: 100vh; + opacity: 0; +} + +.tabscontent__item--current, +.tabscontent__item--current ~ .btn--back { + pointer-events: auto; +} + +.poster { + position: relative; + height: 80vh; + margin: 10vh auto; + padding: 0 50px; + pointer-events: none; +} + +.poster__img { + position: relative; + display: block; + max-width: 100%; + max-height: 100%; + margin: 0 auto; +} + +.poster__caption { + position: absolute; + top: 0; + left: 0; + display: flex; + width: 100%; + height: 100%; + padding: 0 50px; +} + +.poster__box { + position: absolute; + top: -50px; + left: 0; + width: 50%; + height: 40%; + border: 10px solid; +} + +.poster__number { + font-size: 5em; + font-weight: bold; + line-height: 0.7; + position: absolute; + bottom: 0; + left: calc(100% - 50px + 5px); + color: lavender; +} + +.poster__title { + font-size: 6em; + line-height: 0.7; + display: flex; + flex-direction: column; + justify-content: flex-end; + margin: 0 0 -0.25em 0.15em; + text-indent: -0.75em; +} + +.poster__deco { + font-size: 2em; + line-height: 1; + margin: 0 -1.25em 0 auto; + color: #1d48f3; + + writing-mode: vertical-rl; +} + +.column { + width: 30vw; +} + +.column__title { + color: #ff764b; +} + +.column__text { + font-size: 2em; + font-weight: normal; + margin: 0; + color: #fff4d7; +} + +/* Individual demos */ +.demo-2 { + background: #fff4d7; +} + +.demo-2 .view { + margin-left: 150px; +} + +.demo-2 .content { + background-image: url(../img/bg_yellow.jpg); +} + +.demo-2 .codrops-header__info::after { + color: #fff; +} + +.demo-2 .codrops-header__deco, +.demo-2 a:hover, +.demo-2 a:focus { + color: #ff764b; +} + +.demo-2 .deco__text, +.demo-2 .demos__text { + color: #d8c184; +} + +.demo-2 .demo--current::before { + background: #ff764b; +} + +.demo-2 .btn--back { + color: #ff764b; +} + +.demo-3 { + color: #fc0; + background: #2a3137; +} + +.demo-3 a { + color: #fff; +} + +.demo-3 a:hover, +.demo-3 a:focus, +.demo-3 .btn--menu:hover { + color: #fc0; +} + +.demo-3 .view { + margin: 0; + padding: 5vw 5vw calc(10vw + 1em); +} + +.demo-3 .content { + padding: 0; +} + +.demo-3 .codrops-header { + justify-content: flex-end; + align-items: flex-start; + width: 100%; + height: calc(100% + 3.25em); + text-align: left; +} + +.demo-3 .codrops-header__title { + font-family: 'Poppins', sans-serif; + font-size: 7em; + line-height: 0.6; + margin: auto 0 0 -40px; + padding: 0.2em 0 0 0; +} + +.demo-3 .codrops-header__tagline { + font-size: 1.5em; + margin: 0.25em 0 0 -0.3em; +} + +.demo-3 .btn--menu { + font-size: 1em; + top: auto; + bottom: 0; + left: 50%; + display: block; + margin: 0 -0.75em 1em; + color: #fbf9fa; +} + +.demo-3 .content { + background: url(../img/img4.jpg) no-repeat 50% 20%; + background-size: cover; +} + +.demo-3 .codrops-links { + align-self: flex-end; + margin: 1.5em 1.5em auto; +} + +.demo-3 .demos { + margin: 1em 0 0; +} + +.demo-3 .demo:first-child { + margin: 0; +} + +.demo-3 .demo.demo--current { + color: #2a3137; +} + +.demo-3 .demo--current::before { + background: #fc0; +} + +.demo-3 .btn--back { + color: #6c7d8c; + top: 0.5em; + right: 0.5em; +} + +.demo-3 .btn--back .icon { + transform: rotate(-90deg); +} + +.demo-3 .codrops-header__deco { + font-size: 2.25em; + position: absolute; + right: -0.575em; + bottom: 2em; + color: #fc0; +} + +.demo-3 .codrops-header::after { + content: '03'; + font-size: 5em; + font-weight: bold; + position: absolute; + top: 0; + left: -40px; + color: #fff; +} + +.box { + position: relative; + width: 40vw; + min-width: 300px; + height: calc(90vh - 120px); + margin-top: 40px; + background-size: cover; + background-position: 50% 0; +} + +.box__title { + font-size: 6em; + position: absolute; + bottom: 0; + left: -1em; + margin: 0; + color: #fff; +} + +.tabscontent__item:first-child .box { + background-image: url(../img/portrait1.jpg); +} + +.tabscontent__item:nth-child(2) .box { + background-image: url(../img/portrait2.jpg); +} + +.tabscontent__item:nth-child(3) .box { + background-image: url(../img/portrait3.jpg); +} + +@media screen and (max-width: 40em) { + .view { + overflow: auto; + height: auto; + min-height: calc(100vh - 69px); + margin: 0; + } + .demo-3 .view { + height: calc(100vh - 69px); + } + .content { + flex-direction: column; + padding: 10px; + } + .codrops-header__info { + font-size: 1.15em; + } + .deco__text, + .demos__text { + display: none; + } + .codrops-links { + margin: 0 0 1em; + } + .codrops-icon { + font-size: 1em; + } + .codrops-header__deco { + font-size: 1.25em; + } + .codrops-header__title { + font-size: 5.5em; + margin: 0 -4px; + } + .codrops-header__tagline { + width: auto; + } + .demos { + align-items: flex-start; + margin-top: 1em; + } + .codrops-header__info::after { + font-size: 7em; + } + .poster__box { + top: -20px; + left: 30px; + width: 30%; + height: 30%; + border: 7px solid; + } + .poster__deco { + font-size: 1em; + } + .poster__number { + font-size: 2em; + left: calc(100% - 90px); + } + .poster__title { + font-size: 3em; + } + .btn--back { + top: 0; + right: 0; + } + .btn--menu { + display: block; + } + .demo-2 .btn--menu { + position: relative; + margin: 0 2em 0 0; + } + .demo-2 .tabscontent__item { + font-size: 0.575em; + flex-direction: column; + } + .column__title { + margin: 1em 0 0; + } + .demo-3 .codrops-header__title { + font-size: 2em; + margin: 0; + } + .demo-3 .codrops-header__tagline { + font-size: 1em; + margin-left: 0; + } + .demo-3 .codrops-header::after { + font-size: 3em; + left: 10px; + } + .demo-3 .codrops-header__deco { + font-size: 0.85em; + } +} diff --git a/css/normalize.css b/css/normalize.css new file mode 100644 index 0000000..77feb20 --- /dev/null +++ b/css/normalize.css @@ -0,0 +1 @@ +article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} \ No newline at end of file diff --git a/d3_realui7.html b/d3_realui7.html new file mode 100644 index 0000000..3ed1151 --- /dev/null +++ b/d3_realui7.html @@ -0,0 +1,781 @@ + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..bd8ce02 Binary files /dev/null and b/favicon.ico differ diff --git a/img/.DS_Store b/img/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/img/.DS_Store differ diff --git a/img/bg_lavender.jpg b/img/bg_lavender.jpg new file mode 100644 index 0000000..6fc3599 Binary files /dev/null and b/img/bg_lavender.jpg differ diff --git a/img/bg_yellow.jpg b/img/bg_yellow.jpg new file mode 100644 index 0000000..c5ea24a Binary files /dev/null and b/img/bg_yellow.jpg differ diff --git a/img/img1.jpg b/img/img1.jpg new file mode 100644 index 0000000..f51a91a Binary files /dev/null and b/img/img1.jpg differ diff --git a/img/img2.jpg b/img/img2.jpg new file mode 100644 index 0000000..599824f Binary files /dev/null and b/img/img2.jpg differ diff --git a/img/img3.jpg b/img/img3.jpg new file mode 100644 index 0000000..1372598 Binary files /dev/null and b/img/img3.jpg differ diff --git a/img/img4.jpg b/img/img4.jpg new file mode 100644 index 0000000..6b42674 Binary files /dev/null and b/img/img4.jpg differ diff --git a/img/portrait1.jpg b/img/portrait1.jpg new file mode 100644 index 0000000..40bef2d Binary files /dev/null and b/img/portrait1.jpg differ diff --git a/img/portrait2.jpg b/img/portrait2.jpg new file mode 100644 index 0000000..18b56d6 Binary files /dev/null and b/img/portrait2.jpg differ diff --git a/img/portrait3.jpg b/img/portrait3.jpg new file mode 100644 index 0000000..123eed4 Binary files /dev/null and b/img/portrait3.jpg differ diff --git a/index.html b/index.html new file mode 100755 index 0000000..1b7be5d --- /dev/null +++ b/index.html @@ -0,0 +1,133 @@ + + + + + + Expanding Bar Menus | Demo 1 | Codrops + + + + + + + + + + + + +
+
+
+

elementum recolligo huic commodo locus mihi vestri vox

+
+
+
+ + +
+

India Election 2019
$1800 deposited
20 participants
conditions -> NAMO=WIN
NAMO=LOSE

+

wild

+

expanding bar menus

+ +
+
+ + +
+
+
+ Poster 1 +
+

wild
corn

+

nothing lost

+
+ 01 +
+
+
+
+
+ Poster 1 +
+

blue
gun

+

fingerpaint

+
+ 02 +
+
+
+
+
+ Poster 1 +
+

home
maze

+

binary sun

+
+ 03 +
+
+
+ +
+
+ + + + + + diff --git a/index2.html b/index2.html new file mode 100644 index 0000000..9e95beb --- /dev/null +++ b/index2.html @@ -0,0 +1,425 @@ + + + + + + Ranchi Mall FLO Explorer + + + + + + + + + + + + + + + + +
+
+
+ +
+
+
+ + + +
+

+ +
+
+ +
+
+
+

03/09/2017

+

velocity

+

gaussian

+

amphiphilic

+

magnitude

+

saponification

+
+
+

07/23/2017

+

hematocrit

+

ionization

+

geocentric

+

neutrophil

+

energetic

+
+
+
+ +
+
+ +
+

Active Tokens

+ +
+
+

Enter Address/Token name

+
+ + +
+ +
+
+
+ +
+

Top Contracts

+ +
+
+

Enter Address/Contract name

+
+ + +
+ + +
+
+ +
+
+ + + + + + + + + + + \ No newline at end of file diff --git a/index3.html b/index3.html new file mode 100644 index 0000000..a4a5cba --- /dev/null +++ b/index3.html @@ -0,0 +1,99 @@ + + + + + + Expanding Bar Menus | Demo 3 | Codrops + + + + + + + + + + + + +
+
+
+
+ + +
+

400mm

+ shutter angle +

expanding bar menus

+ +
+
+ + +
+
+
+

Scenic

+
+
+
+
+

Pano

+
+
+
+
+

Depth

+
+
+ +
+
+ + + + + + diff --git a/js/.DS_Store b/js/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/js/.DS_Store differ diff --git a/js/anime.min.js b/js/anime.min.js new file mode 100644 index 0000000..b4f2950 --- /dev/null +++ b/js/anime.min.js @@ -0,0 +1,27 @@ +/* + 2017 Julian Garnier + Released under the MIT license +*/ +var $jscomp$this=this; +(function(u,r){"function"===typeof define&&define.amd?define([],r):"object"===typeof module&&module.exports?module.exports=r():u.anime=r()})(this,function(){function u(a){if(!g.col(a))try{return document.querySelectorAll(a)}catch(b){}}function r(a){return a.reduce(function(a,c){return a.concat(g.arr(c)?r(c):c)},[])}function v(a){if(g.arr(a))return a;g.str(a)&&(a=u(a)||a);return a instanceof NodeList||a instanceof HTMLCollection?[].slice.call(a):[a]}function E(a,b){return a.some(function(a){return a===b})} +function z(a){var b={},c;for(c in a)b[c]=a[c];return b}function F(a,b){var c=z(a),d;for(d in a)c[d]=b.hasOwnProperty(d)?b[d]:a[d];return c}function A(a,b){var c=z(a),d;for(d in b)c[d]=g.und(a[d])?b[d]:a[d];return c}function R(a){a=a.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(a,b,c,h){return b+b+c+c+h+h});var b=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(a);a=parseInt(b[1],16);var c=parseInt(b[2],16),b=parseInt(b[3],16);return"rgb("+a+","+c+","+b+")"}function S(a){function b(a,b,c){0> +c&&(c+=1);1c?b:c<2/3?a+(b-a)*(2/3-c)*6:a}var c=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(a);a=parseInt(c[1])/360;var d=parseInt(c[2])/100,c=parseInt(c[3])/100;if(0==d)d=c=a=c;else{var e=.5>c?c*(1+d):c+d-c*d,k=2*c-e,d=b(k,e,a+1/3),c=b(k,e,a);a=b(k,e,a-1/3)}return"rgb("+255*d+","+255*c+","+255*a+")"}function w(a){if(a=/([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|pc|vw|vh|deg|rad|turn)?/.exec(a))return a[2]}function T(a){if(-1k&&q=m&&(f.began=!0,e("begin")),e("run")):(q<=k&&0!==O&&(d(0),p&&g()),q>=h&&O!==h&&(d(h),p||g()));a>=h&&(f.remaining?(t=n,"alternate"===f.direction&&(f.reversed=!f.reversed)):(f.pause(),P(),Q=b(),f.completed||(f.completed=!0,e("complete"))),l=0);if(f.children)for(a=f.children,h=0;h=b&& +0<=d&&1>=d){var g=new Float32Array(11);if(b!==c||d!==e)for(var h=0;11>h;++h)g[h]=a(.1*h,b,d);return function(h){if(b===c&&d===e)return h;if(0===h)return 0;if(1===h)return 1;for(var k=0,l=1;10!==l&&g[l]<=h;++l)k+=.1;--l;var l=k+(h-g[l])/(g[l+1]-g[l])*.1,n=3*(1-3*d+3*b)*l*l+2*(3*d-6*b)*l+3*b;if(.001<=n){for(k=0;4>k;++k){n=3*(1-3*d+3*b)*l*l+2*(3*d-6*b)*l+3*b;if(0===n)break;var m=a(l,b,d)-h,l=l-m/n}h=l}else if(0===n)h=l;else{var l=k,k=k+.1,f=0;do m=l+(k-l)/2,n=a(m,b,d)-h,0++f);h=m}return a(h,c,e)}}}}(),M=function(){function a(a,b){return 0===a||1===a?a:-Math.pow(2,10*(a-1))*Math.sin(2*(a-1-b/(2*Math.PI)*Math.asin(1))*Math.PI/b)}var b="Quad Cubic Quart Quint Sine Expo Circ Back Elastic".split(" "),c={In:[[.55,.085,.68,.53],[.55,.055,.675,.19],[.895,.03,.685,.22],[.755,.05,.855,.06],[.47,0,.745,.715],[.95,.05,.795,.035],[.6,.04,.98,.335],[.6,-.28,.735,.045],a],Out:[[.25,.46,.45,.94],[.215,.61,.355,1],[.165,.84,.44,1],[.23,1,.32,1],[.39,.575,.565,1],[.19,1,.22,1], +[.075,.82,.165,1],[.175,.885,.32,1.275],function(b,c){return 1-a(1-b,c)}],InOut:[[.455,.03,.515,.955],[.645,.045,.355,1],[.77,0,.175,1],[.86,0,.07,1],[.445,.05,.55,.95],[1,0,0,1],[.785,.135,.15,.86],[.68,-.55,.265,1.55],function(b,c){return.5>b?a(2*b,c)/2:1-a(-2*b+2,c)/2}]},d={linear:x(.25,.25,.75,.75)},e={},k;for(k in c)e.type=k,c[e.type].forEach(function(a){return function(c,e){d["ease"+a.type+b[e]]=g.fnc(c)?c:x.apply($jscomp$this,c)}}(e)),e={type:e.type};return d}(),ha={css:function(a,b,c){return a.style[b]= +c},attribute:function(a,b,c){return a.setAttribute(b,c)},object:function(a,b,c){return a[b]=c},transform:function(a,b,c,d,e){d[e]||(d[e]=[]);d[e].push(b+"("+c+")")}},p=[],y=0,ia=function(){function a(){y=requestAnimationFrame(b)}function b(b){var c=p.length;if(c){for(var e=0;ed&&(b.duration=a.duration);b.children.push(a)});return b};return b};m.random=function(a,b){return Math.floor(Math.random()*(b-a+1))+a};return m}); \ No newline at end of file diff --git a/js/demo1.js b/js/demo1.js new file mode 100644 index 0000000..19bde27 --- /dev/null +++ b/js/demo1.js @@ -0,0 +1,157 @@ +(function() { + // Initialize the TabsNav. + var tnav = new TabsNav(document.querySelector('nav.tabsnav'), { + movable: 'all', + extramovable: '.content', + layout: 'vertical', + animeduration: 700, + animeeasing: 'easeInOutCubic', + animedelay: 100, + onOpenBarsUpdate: openTabCallback, + onOpenTab: function() { + // Show the back button after the tab is open. + anime({ + targets: backCtrl, + duration: 800, + easing: 'easeOutExpo', + scale: [0,1], + opacity: { + value: 1, + duration: 300, + easing: 'linear' + } + }); + } + }), + + // The content items and the back control. + contentItems = [].slice.call(document.querySelectorAll('.tabscontent > .tabscontent__item')), + backCtrl = document.querySelector('.tabscontent > button.btn--back'), + // menu ctrl for smaller screens (the tabs are not initially shown and toggling this button will show/hide the tabs) + menuCtrl = document.querySelector('button.btn--menu'), + isContentShown = false, current; + + function openTabCallback(anim, idx, tab) { + if( anim.progress > 60 && !isContentShown ) { + isContentShown = true; + current = idx; + + var contentItem = contentItems[idx], + content = { + img: contentItem.querySelector('img.poster__img'), + title: contentItem.querySelector('.poster__title'), + deco: contentItem.querySelector('.poster__deco'), + box: contentItem.querySelector('.poster__box'), + number: contentItem.querySelector('.poster__number') + }; + + // Hide the content elements. + content.img.style.opacity = content.title.style.opacity = content.deco.style.opacity = content.box.style.opacity = content.number.style.opacity = 0; + // Show content item. + contentItem.style.opacity = 1; + contentItem.classList.add('tabscontent__item--current'); + + // Animate content elements in. + anime.remove([content.img, content.title, content.box, content.number, content.deco]); + anime({ + targets: [content.img, content.title, content.box, content.number, content.deco], + easing: 'easeOutExpo', + duration: function(t,i) { + return 600 + i*100; + }, + scaleX: function(t,i) { + return i === 0 ? [0,1] : 1; + }, + translateX: function(t,i) { + return [-80-i*150,0]; + }, + rotate: function(t,i) { + return i === 2 ? [-40,0] : 0; + }, + opacity: { + value: 1, + duration: 300, + easing: 'linear' + } + }); + } + } + + backCtrl.addEventListener('click', closeTabs); + + function closeTabs() { + if( !tnav.isOpen ) return; + + var contentItem = contentItems[current], + content = { + img: contentItem.querySelector('img.poster__img'), + title: contentItem.querySelector('.poster__title'), + deco: contentItem.querySelector('.poster__deco'), + box: contentItem.querySelector('.poster__box'), + number: contentItem.querySelector('.poster__number') + }; + + // Hide the content elements. + anime.remove([content.img, content.title, content.box, content.number, content.deco]); + // Animate content elements out. + anime({ + targets: [content.deco, content.number, content.box, content.title, content.img], + easing: 'easeInOutCubic', + duration: function(t,i) { + return 600 + i*100; + }, + delay: function(t,i,c) { + return (c-i-1)*35; + }, + translateX: function(t,i) { + return [0,-200-i*150]; + }, + rotate: function(t,i) { + return i === 2 ? [0,-40] : 0; + }, + opacity: { + value: 0, + duration: 450 + }, + update: function(anim) { + if( anim.progress > 20 && isContentShown ) { + isContentShown = false; + // Close tab. + tnav.close(); + } + }, + complete: function() { + // Hide content item. + contentItem.style.opacity = 0; + contentItem.classList.remove('tabscontent__item--current'); + } + }); + + // Hide back ctrl + anime.remove(backCtrl); + anime({ + targets: backCtrl, + duration: 800, + easing: 'easeOutExpo', + scale: [1,0], + opacity: { + value: 0, + duration: 200, + easing: 'linear' + } + }); + } + + menuCtrl.addEventListener('click', toggleTabs); + + function toggleTabs() { + var state = tnav.toggleVisibility(); + if( state === 0 ) { + menuCtrl.classList.remove('btn--menu-active'); + } + else if( state === 1 ) { + menuCtrl.classList.add('btn--menu-active'); + } + } + +})(); \ No newline at end of file diff --git a/js/demo2.js b/js/demo2.js new file mode 100644 index 0000000..de4b848 --- /dev/null +++ b/js/demo2.js @@ -0,0 +1,133 @@ +(function() { + var tnav = new TabsNav(document.querySelector('nav.tabsnav'), { + movable: 'all', + layout: 'vertical', + animeduration: 1000, + animeeasing: 'easeOutExpo', + onOpenBarsUpdate: openTabCallback, + onOpenTab: function() { + // Show the back button after the tab is open. + anime({ + targets: backCtrl, + duration: 600, + easing: 'easeOutExpo', + scale: [0,1], + opacity: { + value: 1, + duration: 300, + easing: 'linear' + } + }); + } + }), + + // The content items and the back control. + contentItems = [].slice.call(document.querySelectorAll('.tabscontent > .tabscontent__item')), + backCtrl = document.querySelector('.tabscontent > button.btn--back'), + // menu ctrl for smaller screens (the tabs are not initially shown and toggling this button will show/hide the tabs) + menuCtrl = document.querySelector('button.btn--menu'), + isContentShown = false, current; + + function openTabCallback(anim, idx, tab) { + if( anim.progress > 10 && !isContentShown ) { + isContentShown = true; + current = idx; + + var contentItem = contentItems[idx], + content = [].slice.call(contentItem.querySelectorAll('.column > *')); + + // Hide the content elements. + content.forEach(function(el) { el.style.opacity = 0; }); + // Show content item. + contentItem.style.opacity = 1; + contentItem.classList.add('tabscontent__item--current'); + + // Animate content elements in. + anime.remove(content); + anime({ + targets: content, + easing: 'easeOutExpo', + duration: 600, + delay: function(t,i) { + return i*30; + }, + translateY: function(t,i) { + return [50+10*i,0]; + }, + opacity: { + value: 1, + duration: 600, + easing: 'linear' + } + }); + } + } + + backCtrl.addEventListener('click', closeTabs); + + function closeTabs() { + if( !tnav.isOpen ) return; + + var contentItem = contentItems[current], + content = [].slice.call(contentItem.querySelectorAll('.column > *')); + + // Hide the content elements. + anime.remove(content); + // Animate content elements out. + anime({ + targets: content, + easing: 'easeOutExpo', + duration: 600, + delay: function(t,i,c) { + return (c-i-1)*20; + }, + translateY: function(t,i) { + return [0,50+10*i]; + }, + opacity: { + value: 0, + duration: 100, + easing: 'linear' + }, + update: function(anim) { + if( anim.progress > 20 && isContentShown ) { + isContentShown = false; + // Close tab. + tnav.close(); + } + }, + complete: function() { + // Hide content item. + contentItem.style.opacity = 0; + contentItem.classList.remove('tabscontent__item--current'); + } + }); + + // Hide back ctrl + anime.remove(backCtrl); + anime({ + targets: backCtrl, + duration: 300, + easing: 'easeOutExpo', + scale: [1,0], + opacity: { + value: 0, + duration: 100, + easing: 'linear' + } + }); + } + + menuCtrl.addEventListener('click', toggleTabs); + + function toggleTabs() { + var state = tnav.toggleVisibility(); + if( state === 0 ) { + menuCtrl.classList.remove('btn--menu-active'); + } + else if( state === 1 ) { + menuCtrl.classList.add('btn--menu-active'); + } + } + +})(); \ No newline at end of file diff --git a/js/demo3.js b/js/demo3.js new file mode 100644 index 0000000..7d0b748 --- /dev/null +++ b/js/demo3.js @@ -0,0 +1,142 @@ +(function() { + var tnav = new TabsNav(document.querySelector('nav.tabsnav'), { + movable: 'all', + layout: 'horizontal', + animeduration: 600, + animeeasing: [0.2,1,0.3,1], + animedelay: 50, + onOpenBarsUpdate: openTabCallback, + onOpenTab: function() { + // Show the back button after the tab is open. + anime({ + targets: backCtrl, + duration: 600, + easing: 'easeOutExpo', + scale: [0,1], + opacity: { + value: 1, + duration: 300, + easing: 'linear' + } + }); + } + }), + // The content items and the back control. + contentItems = [].slice.call(document.querySelectorAll('.tabscontent > .tabscontent__item')), + backCtrl = document.querySelector('.tabscontent > button.btn--back'), + // menu ctrl for smaller screens (the tabs are not initially shown and toggling this button will show/hide the tabs) + menuCtrl = document.querySelector('button.btn--menu'), + isContentShown = false, current; + + function openTabCallback(anim, idx, tab) { + if( anim.progress > 40 && !isContentShown ) { + isContentShown = true; + current = idx; + + var contentItem = contentItems[idx], + content = contentItem.querySelector('.box'); + + // Hide the content elements. + content.style.opacity = 0; + // Show content item. + contentItem.style.opacity = 1; + contentItem.classList.add('tabscontent__item--current'); + + // Animate content elements in. + anime.remove(content); + anime({ + targets: content, + easing: [0.2,1,0.3,1], + duration: 600, + translateY: [400,0], + opacity: { + value: 1, + duration: 600, + easing: 'linear' + } + }); + } + } + + backCtrl.addEventListener('click', closeTabs); + + function closeTabs() { + if( !tnav.isOpen ) return; + + var contentItem = contentItems[current], + content = contentItem.querySelector('.box'); + + // Hide the content elements. + anime.remove(content); + // Animate content elements out. + anime({ + targets: content, + duration: 600, + easing: [0.2,1,0.3,1], + translateY: [0,400], + opacity: { + value: 0, + duration: 100, + easing: 'linear' + }, + update: function(anim) { + if( anim.progress > 30 && isContentShown ) { + isContentShown = false; + // Close tab. + tnav.close(); + } + }, + complete: function() { + // Hide content item. + contentItem.style.opacity = 0; + contentItem.classList.remove('tabscontent__item--current'); + } + }); + + // Hide back ctrl + anime.remove(backCtrl); + anime({ + targets: backCtrl, + duration: 300, + easing: 'easeOutExpo', + scale: [1,0], + opacity: { + value: 0, + duration: 100, + easing: 'linear' + } + }); + } + + menuCtrl.addEventListener('click', toggleTabs); + + function toggleTabs() { + var state = tnav.toggleVisibility(); + if( state === 0 ) { + menuCtrl.classList.remove('btn--menu-active'); + + // Scale up content + anime.remove('.content'); + anime({ + targets: '.content', + duration: 600, + easing: [0.2,1,0.7,1], + opacity: 1, + scale: 1 + }); + } + else if( state === 1 ) { + menuCtrl.classList.add('btn--menu-active'); + + // Scale down content + anime.remove('.content'); + anime({ + targets: '.content', + duration: 600, + easing: [0.2,1,0.7,1], + opacity: 0.2, + scale: 0.9 + }); + } + } +})(); \ No newline at end of file diff --git a/js/enquire.min.js b/js/enquire.min.js new file mode 100755 index 0000000..57cdb3b --- /dev/null +++ b/js/enquire.min.js @@ -0,0 +1,6 @@ +/*! + * enquire.js v2.1.6 - Awesome Media Queries in JavaScript + * Copyright (c) 2017 Nick Williams - http://wicky.nillia.ms/enquire.js + * License: MIT */ + +!function(a){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=a();else if("function"==typeof define&&define.amd)define([],a);else{var b;b="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,b.enquire=a()}}(function(){return function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};b[g][0].call(k.exports,function(a){var c=b[g][1][a];return e(c?c:a)},k,k.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g= middle ) { + return index <= self.current ? index * self.options.animedelay : (total - index - 1) * self.options.animedelay; + } + else { + return index < self.current ? index * self.options.animedelay : (total - index - 1) * self.options.animedelay; + } + } + }, + animeTabsTranslation = function(target, index, cnt) { + if( index === self.current || cnt === 1 ) { + return -1 * self.dim.position; + } + else { + var pixels = 1; // adding an extra pixel for the translation due to the fuzzy rendering. + return index > self.current ? self.dim.win - (self.dim.position + self.dim.measure) - pixels : -1 * self.dim.position + pixels; + } + }, + animeBarsScale = function(target, index, cnt) { + return index === self.current || cnt === 1 ? self.dim.win/self.dim.measure : 1; + } + + animeTabs.duration = animeBars.duration = this.options.animeduration; + animeTabs.easing = animeBars.easing = this.options.animeeasing; + animeTabs.delay = animeBars.delay = animeTabsDelay; + animeTabs[this.options.layout === 'vertical' ? 'translateX' : 'translateY'] = animeTabsTranslation; + animeBars[this.options.layout === 'vertical' ? 'scaleX' : 'scaleY'] = animeBarsScale; + animeTabs.complete = function() { + self.isAnimating = false; + self.isOpen = true; + // Callback + self.options.onOpenTab(self.current, tab); + }; + animeBars.update = function(anim) { + self.options.onOpenBarsUpdate(anim, self.current, tab); + } + + anime(animeTabs); + anime(animeBars); + + // Animate extramovable elements. + if( this.extraEl ) { + var animeExtra = { + targets: this.extraEl, + duration: this.options.animeduration, + easing: this.options.animeeasing, + delay: 0 + }, + extraBounds = this.extraEl.getBoundingClientRect(), + animeExtraTranslation = this.options.layout === 'vertical' ? this.dim.win - (this.dim.position + this.dim.measure) + Math.abs(extraBounds.left - this.dim.position) + this.dim.measure : -1 * this.dim.position; + + animeExtra[this.options.layout === 'vertical' ? 'translateX' : 'translateY'] = animeExtraTranslation; + anime(animeExtra); + } + }; + + /** + * Closes a tab/page. + */ + TabsNav.prototype._closeTab = function(tab) { + // If animating do nothing. + if( this.isAnimating ) { + return false; + } + this.isAnimating = true; + + // Animate tabs and bars. + var self = this, + animeTabs = { targets: this.options.movable === 'all' ? this.DOM.tabs : this.DOM.tabs[this.current] }, + animeBars = { targets: this.options.movable === 'all' ? this.DOM.bars : this.DOM.bars[this.current] }, + animeTabsDelay = function(target, index, cnt) { + return cnt === 1 || self.options.animedelay === 0 ? 0 : Math.abs(self.current - index) * self.options.animedelay; + }; + + animeTabs.duration = animeBars.duration = this.options.animeduration; + animeTabs.easing = animeBars.easing = this.options.animeeasing; + animeTabs.delay = animeBars.delay = animeTabsDelay; + animeTabs[this.options.layout === 'vertical' ? 'translateX' : 'translateY'] = 0; + animeBars[this.options.layout === 'vertical' ? 'scaleX' : 'scaleY'] = 1; + animeTabs.complete = function() { + // Reset z-indexes. + tab.style.zIndex = 1; + self.isAnimating = false; + self.isOpen = false; + // Callback + self.options.onCloseTab(self.current, tab); + }; + + anime(animeTabs); + anime(animeBars); + + // Animate extramovable elements. + if( this.extraEl ) { + var animeExtra = { + targets: this.extraEl, + duration: this.options.animeduration, + easing: this.options.animeeasing, + delay: Math.abs(this.current - this.totalTabs) * this.options.animedelay + }; + + animeExtra[this.options.layout === 'vertical' ? 'translateX' : 'translateY'] = 0; + anime(animeExtra); + } + }; + + /** + * Closes the tabs. + */ + TabsNav.prototype.close = function(tab) { + this._closeTab(tab || this.DOM.tabs[this.current]); + } + + /** + * Shows the TabsNav element. + */ + TabsNav.prototype.show = function(callback) { + var self = this; + + this.isVisible = true; + + this.DOM.tabs.forEach(function(tab) { + var bar = tab.querySelector('.tabsnav__bar'), + title = tab.querySelector('.tabsnav__title'); + + // Set transform origin. + bar.style.transformOrigin = '50% 50%'; + bar.style.transform = self.options.layout === 'vertical' ? 'scaleX(0)' : 'scaleY(0)'; + + title.style.opacity = 0; + title.style.transform = self.options.layout === 'vertical' ? 'translateX(10) rotate(-90)' : 'translateY(10)'; + }); + + this.DOM.el.classList.remove('tabsnav--hidden'); + + // Animate bars. + anime.remove(this.DOM.bars); + var animeBars = { + targets: this.DOM.bars, + duration: 500, + delay: function(t,i) { + return i*50; + }, + easing: 'easeOutExpo', + complete: function() { + if( typeof callback === 'function' ) { + callback.call(); + } + } + }; + animeBars[this.options.layout === 'vertical' ? 'scaleX' : 'scaleY'] = [0,1]; + anime(animeBars); + + // Animate titles. + var titles = this.DOM.el.querySelectorAll('.tabsnav__title'); + anime.remove(titles); + var animeTitles = { + targets: titles, + duration: 500, + delay: function(t,i) { + return i*50; + }, + easing: 'easeOutExpo', + opacity: [0,1] + }; + animeTitles[this.options.layout === 'vertical' ? 'translateX' : 'translateY'] = [10,0]; + animeTitles.rotate = self.options.layout === 'vertical' ? [-90,-90] : 0; + anime(animeTitles); + } + /** + * Hides the TabsNav element. + */ + TabsNav.prototype.hide = function(callback) { + var self = this; + + this.isVisible = false; + + this.DOM.bars.forEach(function(bar) { + // Set transform origin. + bar.style.transformOrigin = '50% 50%'; + }); + + // Animate bars. + anime.remove(this.DOM.bars); + var animeBars = { + targets: this.DOM.bars, + duration: 500, + easing: 'easeOutExpo', + delay: function(t,i,c) { + return (c-i-1)*50; + }, + complete: function() { + self.DOM.el.classList.add('tabsnav--hidden'); + // reset all values. + self.DOM.tabs.forEach(function(tab) { + var bar = tab.querySelector('.tabsnav__bar'), + title = tab.querySelector('.tabsnav__title'); + + bar.style.transform = self.options.layout === 'vertical' ? 'scaleX(1)' : 'scaleY(1)'; + + title.style.opacity = 1; + title.style.transform = self.options.layout === 'vertical' ? 'translateX(0) rotate(-90)' : 'translateY(0)'; + }); + + if( typeof callback === 'function' ) { + callback.call(); + } + } + }; + animeBars[this.options.layout === 'vertical' ? 'scaleX' : 'scaleY'] = [1,0]; + anime(animeBars); + + // Animate titles. + var titles = this.DOM.el.querySelectorAll('.tabsnav__title'); + anime.remove(titles); + var animeTitles = { + targets: titles, + duration: 100, + delay: function(t,i,c) { + return (c-i-1)*50; + }, + easing: 'linear', + opacity: [1,0] + }; + anime(animeTitles); + } + + /** + * Toggle visibility. + */ + TabsNav.prototype.toggleVisibility = function() { + // If animating do nothing. + if( this.isAnimating ) { + return false; + } + this.isAnimating = true; + + var self = this, endAnimation = function() { self.isAnimating = false; }; + + if( this.isVisible ) { + this.hide(endAnimation); + return 0; + } + else { + this.show(endAnimation); + return 1; + } + }; + + /** + * Resizing the window. + */ + TabsNav.prototype._resize = function() { + var self = this; + win = {width: window.innerWidth, height: window.innerHeight}; + + // If tabs are open then update translate & scale values taking in consideration the new window sizes. + if( this.isOpen ) { + // Update dim.win value. + this.dim.win = this.options.layout === 'vertical' ? win.width : win.height; + + var currentTab = this.DOM.tabs[this.current], + translateStr = this.options.layout === 'vertical' ? 'translateX' : 'translateY', + scaleStr = this.options.layout === 'vertical' ? 'scaleX' : 'scaleY'; + + // Reset tabs/bars translation and scale values. + this.DOM.tabs.forEach(function(tab, idx) { + if( self.options.movable === 'all' || self.options.movable === 'single' && idx === self.current ) { + var bar = self.DOM.bars[idx], tVal, sVal; + + if( idx === self.current ) { + tVal = -1 * self.dim.position; + sVal = self.dim.win/self.dim.measure; + } + else { + tVal = idx > self.current ? self.dim.win - (self.dim.position + self.dim.measure) : -1 * self.dim.position; + sVal = 1; + } + + tab.style.transform = translateStr + '(' + tVal + 'px)'; + bar.style.transform = scaleStr + '(' + sVal + ')'; + } + }); + + // Reset extramovable elements + if( this.extraEl ) { + this.extraEl.style.transform = translateStr + '(' + (this.options.layout === 'vertical' ? this.dim.win - (this.dim.position + this.dim.measure) : -1 * this.dim.position) + 'px)'; + } + } + }; + + window.TabsNav = TabsNav; + +})(window);