Раскрывающееся меню CSS на мобильных устройствах не закрывается - PullRequest
Новая
       8

Раскрывающееся меню CSS на мобильных устройствах не закрывается

0 голосов
/ 31 декабря 2018

Я реализовал выпадающее меню Hoverable, как и в этом примере из w3schools:

https://www.w3schools.com/howto/howto_css_dropdown.asp

На моем ПК это работает отлично, но я попробовал страницу на iPhone с iOS 12.1.2 и меню отображается, но оно не исчезает, когда я касаюсь чего-либо за пределами меню, даже если это кнопка, открывшая меню.Он был протестирован на Safari Mobile и Chrome для iOS.

Я пробовал эту реализацию, но ничего не изменилось:

Раскрывающееся меню мобильного устройства не исчезнет

Моя структура выглядит примерно так: 

<div class="mobile__nav-wrapper>
  <button type="button" class="mobile__nav-button"></button>
  <div class="mobile__nav-content">
    <a href="home">Home</a>
    <a href="page">Page</a>
  </div>
</div>

И я попробовал эту реализацию следующим образом (index.gif = test.gif): 

<div class="mobile__nav-wrapper>
  <button type="button" class="mobile__nav-button"></button>
  <div class="mobile__nav-content">
    <a href="home">Home</a>
    <a href="page">Page</a>
  </div>
  <img class="close" src="img/index.gif" />
</div>

Это мой CSS: 

.mobile__nav-wrapper{
    display: inline-block;
    position: absolute;
    top:1.6em;
    right: 0.2em;
    font-size: 1rem;
}
@-webkit-keyframes mobile__nav__btn-animation{
    0%   {background-color: rgba(244,244,244,0.95);-webkit-box-shadow: none;box-shadow: none; color: #C0B283;}
    25%  {background-color: rgba(190,170,130,0.95);-webkit-box-shadow: 0 0 5px 5px #F4F4F4;box-shadow: 0 0 5px 5px #F4F4F4; color: #F4F4F4;}
    50%  {background-color: rgba(244,244,244,0.95);-webkit-box-shadow: none;box-shadow: none; color: #C0B283;}
    75%  {background-color: rgba(190,170,130,0.95);-webkit-box-shadow: 0 0 5px 5px #F4F4F4;box-shadow: 0 0 5px 5px #F4F4F4; color: #F4F4F4;}
    100% {background-color: rgba(244,244,244,0.95);-webkit-box-shadow: none;box-shadow: none; color: #C0B283;}
}
@keyframes mobile__nav__btn-animation{
    0%   {background-color: rgba(244,244,244,0.95);-webkit-box-shadow: none;box-shadow: none; color: #C0B283;}
    25%  {background-color: rgba(190,170,130,0.95);-webkit-box-shadow: 0 0 5px 5px #F4F4F4;box-shadow: 0 0 5px 5px #F4F4F4; color: #F4F4F4;}
    50%  {background-color: rgba(244,244,244,0.95);-webkit-box-shadow: none;box-shadow: none; color: #C0B283;}
    75%  {background-color: rgba(190,170,130,0.95);-webkit-box-shadow: 0 0 5px 5px #F4F4F4;box-shadow: 0 0 5px 5px #F4F4F4; color: #F4F4F4;}
    100% {background-color: rgba(244,244,244,0.95);-webkit-box-shadow: none;box-shadow: none; color: #C0B283;}
}
.mobile__nav-btn{
    font-size: 1rem;    
    border: none;
    outline: none;
    color: #575757;
    padding: 0.50em 0.70em;
    background-color: rgba(244,244,244,0.95);
    font-family: inherit;
    margin: 0;
    border-radius: 3px;

    -webkit-animation-name: mobile__nav__btn-animation;

            animation-name: mobile__nav__btn-animation;
    -webkit-animation-duration: 3s;
            animation-duration: 3s;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
}
.mobile__nav-content{
    display: none;
    position: absolute;
    right: 0;
    background-color: rgba(255,255,255,0.8);
    -webkit-box-shadow: 2px 2px 8px 2px rgba(0,0,0,0.2);
            box-shadow: 2px 2px 8px 2px rgba(0,0,0,0.2);
    line-height: 2em;
    font-size: 1.3em;
}
.mobile__nav-content a{
    color: #575757;
    background-color: rgba(255,255,255,0.8);
    text-decoration:none;
    display: block;
    padding-left: 0.5em;
    margin-left: -100vw;
}
.mobile__nav-content a:hover{
    background-color: rgba(163,183,108,0.85);
}
/*--------for the safari mobile browser----------*/
div img.close {
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
}

div .mobile__nav-wraper:hover + img {
  display: block;
}
/*-------end of the safari mobile browser----------*/
.mobile__nav-wrapper:hover .mobile__nav-content{
    display: block;
}

Какя могу достичь этого без использования JS?Или это строго необходимо?

----- ОБНОВЛЕНИЕ ---- Как это спросил Viira, вот JSFiddle:

https://jsfiddle.net/9ymj80hw/1/

...