see works: http://codepen.io/leoaivy/pen/xzzkxm
when click menu button open menu , narrow window, looks weird, on small widths. know can use media query unfortunately, when don't click menu button , narrow window, have use media query situation.
this leads 2 cases, when menu button clicked , not, rather confusing (i don't want use media queries both 2 cases because of complexity).
do have ideas? thank much!
some codes related problem:
html:
<div class="menu-push-right-to-left"> <nav> <ul> <li><a href="#"><img src="../images/common/icon-logo-quark-3.png" alt=""><span>@ 2015 yescall.com, inc.</span></a> </li> <li><a href="#">- adfasd</a> </li> <li><a href="#">- asdfasdf</a> </li> <li><a href="#">- asdfasdf</a> </li> <li><a href="#">- adsfasdf</a> </li> <li><a href="#">- adfasdf</a> </li> <li><a href="#">- adsfasdf</a> </li> <li><a href="#">- adsfsdfa</a> </li> </ul> </nav> <ul class="block-social"> <li><a href="#"><span class="qa qa-wifi"></span></a> </li> <li><a href="#"><span class="qa qa-social-facebook"></span></a> </li> <li><a href="#"><span class="qa qa-social-twitter"></span></a> </li> <li><a href="#"><span class="qa qa-social-linkedin"></span></a> </li> <li><a href="#"><span class="qa qa-social-google"></span></a> </li> </ul> <div class="block-contact"> <h4><a href="#">(asdfasdf</a> </h4> <p> adfasdf <br> aadssdfasdf: 1644-0000 <br> asdfasdf: <a href="mailto:help@quark.band" title="help@quark.band">help@quark.band</a> </p> </div> </div> scss:
.menu-push-right-to-left { display: none; position: fixed; top: 0; right: -324px; bottom: 0; width: 324px; transition: right .3s ease-out, visibility .3s ease-out; background-color: $black-2; &.changewidth { right: 0; } ul { float: none; } nav li { float: none; padding: px2em(22px) px2em(27px); border-bottom: 1px solid $gray-17; &:first-child { padding: px2em(13px) px2em(21px) px2em(12px); { font-size: px2em(12px); } img { float: left; } span { float: left; color: white; line-height: inherit; margin: px2em(10px, 12px) 0 0 px2em(7px, 12px); } } { color: white; padding: 0 0 0; } } ul.block-social { margin: px2em(29px) 0 0; li { float: none; display: inline-block; margin: 0 0 0 px2em(40px); vertical-align: bottom; span { color: $white-4; &.qa-social-facebook { font-size: px2em(21px, 15px); line-height: px2em(20px, 21px); } &.qa-social-linkedin { font-size: px2em(18px, 15px); } &.qa-social-google { font-size: px2em(19px, 15px); } } } } .block-contact { position: absolute; bottom: 0; left: 0; right: 0; padding: 0 px2em(32px) px2em(27px); h4 { font-size: inherit; line-height: inherit; { color: white; font-size: px2em(12px); line-height: px2em(24px, 12px); } } p { color: $gray-9; font-size: px2em(12px); line-height: px2em(24px, 12px); { color: $gray-9; } } } } // end .menu-push-right-to-left
work this
@media max width here { .menu-push-right-to-left { left:0; right: 0; bottom: auto; width: auto; height:0 transition: height .3s ease-out, visibility .3s ease-out; &.changewidth { height:auto; } } } 
Comments
Post a Comment