移動視圖網站菜單

我正在製作一個電子邀請網站。已經做了一切，但只停留在一個地方。桌面視圖的菜單工作正常，但在移動設備上打開時不工作。我點擊菜單按鈕沒有任何反應。請在屏幕截圖下方找到。移動視圖網站菜單

HTML

<body> 

<div id="container" class="container intro-effect-push animsition" style="animation-duration: 1500ms; opacity: 1;"> 

<nav id="main_menu" class="menugray"> 
<div id="menu-button" class="menu-opened"> 

</div>                 


<ul class="open" style="display: none;"> 
     <li><a class="fade-page" href="index2.html"><span data-hover="HOME">HOME</span></a></li> 
     <li> <a class="fade-page" href="knowus.html"><span data-hover="BRIDE & GROOM">BRIDE & GROOM</span></a> 
      </li> 
     <li><a href="events.html" class="fade-page"><span data-hover="EVENTS">EVENTS</span></a></li> 
     <li><a href="rspv.html" class="fade-page"><span data-hover="RSPV">RSPV</span></a></li> 
     <li><a href="photos.html" class="fade-page"><span data-hover="PHOTOS">PHOTOS</span></a></li> 


    </ul> 

</nav>

CSS

#main_menu li a span::before { 
    position: absolute; 
    top: -100%; 
    color:#e76b71; 
    content: attr(data-hover); 
    -webkit-transform: translate3d(0,0,0); 
    -moz-transform: translate3d(0,0,0); 
    transform: translate3d(0,0,0); 
} 

#main_menu:after, 
#main_menu > ul:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 
#menu-button { 
    position: absolute; 
    padding-left: 1.25em; 
    font-size:30px; 
    top:8px; 
    right:8px; 
    display: none; 
    cursor:pointer; 
} 
#menu-button:before { 
    content: ""; 
    position: absolute; 
    top: 0.25em; 
    left: 0; 
    width: 1em; 
    height: 0.125em; 
    border-top: 0.375em double #333; 
    border-bottom: 0.135em solid #333; 
}

截圖

如果我更改代碼以

<ul class="open" style="display: block;">

的初衷是顯示：無

後改變顯示的是：

這個問題可能會要求一些時間。但請求某人幫助我。我會非常感謝。

來源

2017-10-29 Mehul Rastogi

別擔心，我發現你的解決方案.. 見流動代碼：

<div id="container" class="container intro-effect-push animsition" style="animation-duration: 1500ms; opacity: 1;"> 

     <nav id="main_menu" class="menugray"> 
      <label for="open-nav" class="menu-opened" id="menu-button"></label> 
      <input id="open-nav" class="menu-opened" type="checkbox"> 
      <ul class="open" style="display: none;"> 
       <li><a class="fade-page" href="index2.html"><span data-hover="HOME">HOME</span></a></li> 
       <li> <a class="fade-page" href="knowus.html"><span data-hover="BRIDE & GROOM">BRIDE & GROOM</span></a> 
       </li> 
       <li><a href="events.html" class="fade-page"><span data-hover="EVENTS">EVENTS</span></a></li> 
       <li><a href="rspv.html" class="fade-page"><span data-hover="RSPV">RSPV</span></a></li> 
       <li><a href="photos.html" class="fade-page"><span data-hover="PHOTOS">PHOTOS</span></a></li> 


      </ul> 

     </nav> 
    </div>

而CSS是：

#main_menu li a span::before { 
      position: absolute; 
      top: -100%; 
      color: #e76b71; 
      content: attr(data-hover); 
      -webkit-transform: translate3d(0, 0, 0); 
      -moz-transform: translate3d(0, 0, 0); 
      transform: translate3d(0, 0, 0); 
     } 

     #main_menu:after, 
     #main_menu > ul:after { 
      content: "."; 
      display: block; 
      clear: both; 
      visibility: hidden; 
      line-height: 0; 
      height: 0; 
     } 

     #menu-button { 
      position: absolute; 
      padding-left: 1.25em; 
      font-size: 30px; 
      top: 8px; 
      right: 8px; 
      cursor: pointer; 
     } 

     #menu-button:before { 
      content: ""; 
      position: absolute; 
      top: 0.25em; 
      left: 0; 
      width: 1em; 
      height: 0.125em; 
      border-top: 0.375em double #333; 
      border-bottom: 0.135em solid #333; 
     } 

     #open-nav:checked + .open { 
      display: block !important; 
     } 

     #open-nav { 
      display: none; 
     }

Codepen鏈接，您的預覽：https://codepen.io/ziruhel/pen/gXOBVK

來源

2017-10-29 06:40:47

移動視圖網站菜單

回答

相關問題