diff options
| -rw-r--r-- | css/menu-temp.css | 145 | ||||
| -rw-r--r-- | js/menu-temp.js | 28 |
2 files changed, 173 insertions, 0 deletions
diff --git a/css/menu-temp.css b/css/menu-temp.css new file mode 100644 index 0000000..da52209 --- /dev/null +++ b/css/menu-temp.css @@ -0,0 +1,145 @@ +/* Base +-------------------------- */ +body { + background: #fff; + color: #454545; +} + +a { + color: #09f; +} +a:hover { + color: #007acc; +} + +button { + -webkit-font-smoothing: antialiased; + background-color: #09f; + border: none; + border-radius: 0.1875em; + color: white; + display: inline-block; + font-size: 1em; + font-weight: bold; + line-height: 1; + padding: .75em 1em; + text-decoration: none; +} +button:hover { + background-color: #007acc; + color: white; +} + +/* Header +-------------------------- */ +.l-header { + height: 80px; + position: relative; + background: #212121; +} + +.logo { + float: left; +} +.logo__title { + margin: 0; +} +.logo__link { + display: inline-block; + text-decoration: none; + padding: 0 10px; + line-height: 80px; + height: 80px; + color: #fff; + word-wrap: no-wrap; +} + +.menu-btn { + display: none; + position: absolute; + right: 10px; + top: 20px; +} + +@media (max-width: 768px) { + .logo { + float: none; + } + + .menu-btn { + display: block; + } +} +/* Menu +-------------------------- */ +.menu { + float: right; +} +.menu__list { + overflow: hidden; + padding-left: 0; + margin: 0; + list-style: none; +} +.menu__item { + float: left; + text-align: center; + text-align: center; +} +.menu__link { + display: block; + color: #fff; + text-decoration: none; + line-height: 5em; + height: 5em; + padding: 0 1.5em; + word-wrap: no-wrap; + transition: all .3s ease; +} +.menu__link:hover, .menu__link:focus { + background: #09f; + color: #fff; +} + +@media (max-width: 768px) { + .menu { + float: none; + } + .menu__item { + display: block; + float: none; + -webkit-transform: translateX(-100%); + -moz-transform: translateX(-100%); + -ms-transform: translateX(-100%); + -o-transform: translateX(-100%); + transform: translateX(-100%); + transition: all .3s ease-out; + } + .menu__item--play { + display: block; + -webkit-transform: translateX(0); + -moz-transform: translateX(0); + -ms-transform: translateX(0); + -o-transform: translateX(0); + transform: translateX(0); + } + .menu__item + .menu__item { + border-top: 1px solid #008ae6; + } + .menu__link { + background: #09f; + } + .menu__link:hover { + background: #007acc; + } +} +/* Wrap +-------------------------- */ +.wrap { + margin-left: auto; + margin-right: auto; + max-width: 1000px; +} +.l-main .wrap { + padding: 0 10px; +} diff --git a/js/menu-temp.js b/js/menu-temp.js new file mode 100644 index 0000000..12ec864 --- /dev/null +++ b/js/menu-temp.js @@ -0,0 +1,28 @@ +$('.menu-btn').on('click', function() { + + var elem = $(this), + item = $('.menu__item'), + active = 'is-active', + play = 'menu__item--play'; + + if ( elem.hasClass(active) ) { + elem.removeClass(active); + $(item.get().reverse()).each(function(i) { + var row = $(this); + setTimeout(function() { + row.removeClass(play); + }, 50*i); + }); + } + + else { + elem.addClass(active); + item.each(function(i) { + var row = $(this); + setTimeout(function() { + row.addClass(play); + }, 50*i); + }); + } + + });
\ No newline at end of file |