javascript - モバイルでナビ/ハンバーガーメニューが開かない

Question

HTML を実行しているレスポンシブサイト/アプリを持っています。Phonegap をプッシュしようとしています。ここからナビゲーションメニューを含めました。ナビゲーションメニューはブラウザーから正常に動作しますが、モバイルデバイス (Windows モバイル 8.1 を実行する Nokia 920 と Android の Samsung Galaxy S6) では動作しません。

電話でメニューが機能しない理由を教えてくれる人はいますか?

これは、今日まで試したことのないフィドルのサンプルです。うまくいくことを願っています。

JIC の 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 something ...</h1>

    <div class="searching" ng-view>
    </div>

    <footer>


            <p>Connect with us</p>


    </footer>
    </div>

</body>

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;
    });
}

そして、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: all .1s cubic-bezier(.1,.7,.3,1);
  -webkit-transition: all .1s cubic-bezier(.1,.7,.3,1);
  -o-transition: all .1s cubic-bezier(.1,.7,.3,1);
  -ms-transition: all .1s cubic-bezier(.1,.7,.3,1);
  transition: all .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 and (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 and (max-width:478px){
 body{
    font-size:13px;
 }

.section ul li a img{
    width: 20%;
    height: 20%;
}


 p{
font-size: 11px;
}
}

前もって感謝します。

javascript - モバイルでナビ/ハンバーガー メニューが開かない

0 に答える 0

Related

Reference

javascript - モバイルでナビ/ハンバーガーメニューが開かない