javascript - Nav/Hamburger menu won't open on mobile -
i've got responsive site/app running html i'm trying push through phonegap , i've included nav menu here. nav menu works fine through browser can't work on mobile devices, nokia 920 running windows mobile 8.1 , samsung galaxy s6 on android.
can guide me why menu won't work on phone?
here's fiddle sample i've never tried before today hope works.
and jic here's html.
<body> <div class="shy-menu"> <a class="shy-menu-hamburger"> <span class="layer top"></span> <span class="layer mid"></span> <span class="layer btm"></span> </a> <div class="shy-menu-panel"> <ul> <li><a href="index.html">home</a></li> <br/> <li><a href="#">about</a></li> <br/> <li><a href="#">contact</a></li> <br/> <li><a href="#">rate/review</a></li> </ul> </div> </div> <div class="menu open"> <a class="hamburger"> <span class="layer top"></span> <span class="layer mid"></span> <span class="layer btm"></span> </a> </div> <div id="wrapper" > <div id="nav"> <ul> <li class="active"><a href="index.html">home</a></li> <li><a href="#">about</a></li> <li><a href="#">contact</a></li> <li><a href="#">rate/review</a></li> </ul> </div> <h1 class="centersay">... find ...</h1> <div class="searching" ng-view> </div> <footer> <p>connect us</p> </footer> </div> </body> the javascript
$(function() { initdropdowns($("div.shy-menu")); }); function initdropdowns(allmenus) { allmenus.children(".shy-menu-hamburger").on("click", function() { var thistrigger = jquery(this), thismenu = thistrigger.parent(), thispanel = thistrigger.next(); if (thismenu.hasclass("is-open")) { thismenu.removeclass("is-open"); jquery(document).off("click"); thispanel.off("click"); } else { allmenus.removeclass("is-open"); thismenu.addclass("is-open"); jquery(document).on("click", function() { allmenus.removeclass("is-open"); }); thispanel.on("click", function(e) { e.stoppropagation(); }); } return false; }); } and css
body{ background:#a9aea8; font-family:century gothic, sans-serif; font-size: 18px; } h1, h2, h3{ text-align:center; color: #666; } p{ font-size:12px; } img{ border:none; text-align:center; max-width:100%; height:auto; width:auto; } #wrapper{ margin: 0 auto; max-width: 1120px; width: 98%; background: #d3e1cf; border: .5px solid rgba(12, 3, 25, 0.8); border-radius: 3px; box-shadow: 0 0 10px rgba(12, 3, 25, 0.8); } ul { list-style: none; margin: 0 0 0 15px; padding: 0; } * { -moz-transition: .1s cubic-bezier(.1,.7,.3,1); -webkit-transition: .1s cubic-bezier(.1,.7,.3,1); -o-transition: .1s cubic-bezier(.1,.7,.3,1); -ms-transition: .1s cubic-bezier(.1,.7,.3,1); transition: .1s cubic-bezier(.1,.7,.3,1); } .shy-menu { visibility:hidden; position: absolute; margin:0; padding:0; display: block; height: 35px; width: 35px; background-color: rgba(33,40,44,.1); color: #fff; } .shy-menu.is-open, .shy-menu:hover { z-index:20; background-color: rgba(33,40,44,1); } .shy-menu.is-open { height: 40%; width: 200px; } .shy-menu-panel { margin-left: -250px; } .is-open .shy-menu-panel { margin-left: 0; } .is-open .shy-menu-panel ul li a{ color:white; display:block; margin-left:0; font-weight: 900; text-decoration:none; } .shy-menu-hamburger { position: relative; left: 0; top: 0; width: 54px; height: 54px; display: block; overflow: hidden; cursor: pointer; } .shy-menu-hamburger .layer { background-color: #fff; border-radius: 1px; display: block; height: 2px; overflow: hidden; position: absolute; left: 5px; width: 18px; } .shy-menu-hamburger .layer.top { top: 9px; } .is-open .shy-menu-hamburger .layer.top { top: 17px; left: 5px; transform: rotate(45deg); } .shy-menu-hamburger .layer.mid { top: 16px; } .is-open .shy-menu-hamburger .layer.mid { opacity: 0; left: 0; } .shy-menu-hamburger .layer.btm { top: 23px; } .is-open .shy-menu-hamburger .layer.btm { top: 17px; left: 5px; transform: rotate(-45deg); } #head{ text-align:center; width:100%; height:auto; background: #92a38f; overflow:hidden; } #nav ul{ list-style:none; margin:0; padding-left: 3em; } #nav ul li{ float:left; border-top: 1px solid white; border-left: 1px solid white; border-right: 1px solid white; width: 23%; text-align:center; } #nav ul li a{ background:#005406; color:white; display:block; padding: 5% 12%; font-weight:bold; text-decoration:none; } #nav ul li a:hover, #nav ul li.active a{ background:#6aba6f; text-decoration:none; } .section{ width: 29%; float:left; margin-right:4%; margin-top: 2%; margin-bottom:0; padding:0; text-align:center; } footer{ background:#005406; width:100%; overflow:hidden; } footer h3, footer p{ color:#6aba6f; font-weight:100; } ul { list-style-type:none; margin:0; padding:0; } li{ display:inline; text-align:center; } ul li img { height: 3em; } /*-------begin media query-------*/ @media screen , (max-width:740px){ body{ padding:0; margin:0; background:#92a38f; } #wrapper{ width:100%; border-radius: 3px; box-shadow: 0 0 0 rgba(2, 3, 25, 0.8); border:none; } p{ font-size: 12px; } .shy-menu{ padding: 5px; margin:default; visibility:visible; } .searching div{ display: list-item; list-style:none; font-size: 13px; } .section h3{ color:#005406; } #head{ text-align:center; background: #92a38f; border-bottom: 5px solid #99938f; width:100%; height:auto; overflow:hidden; } #nav{ visibility:hidden; width:0; height:0; } .section{ background:#d3e1cf; float:left; width: 100%; margin:0; font-size: 80%; } } @media screen , (max-width:478px){ body{ font-size:13px; } .section ul li img{ width: 20%; height: 20%; } p{ font-size: 11px; } } thanks in advance.
Comments
Post a Comment