Проблемы с отзывчивым выпадающим меню - PullRequest
Новая
       14

Проблемы с отзывчивым выпадающим меню

0 голосов
/ 01 февраля 2020

Я начал собирать веб-сайт, который использует выпадающее меню меньших размеров.

это http://www.southmoorac.com/newindex.html

у меня две страницы работают , домашний возраст и страница лиги, но это выпадающее меню, которое вызывает у меня проблемы, или, я должен сказать, просматривая его на iphone.

Я проверил его на ap c, chrome Инструменты разработчика, и он работает нормально, но когда я смотрю на iphone, это вызывает у меня проблему.

Я понял, что это одна строка кода, которая не работает на телефоне это создает мне проблему, так что я ищу работу вокруг. 

.menu {
      position: absolute;
      text-align: left;
      top: 0;
      left: 0;
      background-color: rgba($dgreen, 0.99);
      width: 100%;
      height: 100vh;
      transform: scale(1, 0);
      transition: 400ms;
      transition-timing-function: cubic-bezier(1, 0, 0, 1);
      transform-origin: top;
    
      &__box {
        margin: 0;
        padding: 0;
        list-style: none;
        height: 100vh;
        display: flex;
        flex-direction: column;
        cursor: pointer;
      }
    
      &__list-item {
        @include letterspace(0.3rem);
        width: 100%;
        height: 100%;
        // padding: 6.2vh;
    
        border-bottom: 1px solid rgba(121, 122, 121, 0.301);
      }
    
      &__item-link {
        display: flex;
        align-items: center;
    
        color: $orange;
        font-size: 1rem;
        text-decoration: none;
        text-transform: uppercase;
        height: 100%;
        width: 100%;
        padding: 2.2vh;
        padding-left: 20%;
        padding-right: 0;
    
        &:hover,
        &:focus {
          background-color: $orange;
          color: white;
        }
      }
 <nav class="menu">
    	<ul class="menu__box">
    	    <li class="menu__list-item"><a href="http://www.southmoorac.com/newindex.html"
    		    class="menu__item-link menu__active uncheck"><i
    		        class="fas fa-home   menu__icon"></i>Home</a>
    	    </li>    
    	    <li class="menu__list-item"><a href="#" class="menu__item-link  uncheck"><i
    		        class="fas fa-info menu__icon"></i>About Us</a>
                </li>    
    	    <li class="menu__list-item"><a href="#" class="menu__item-link uncheck"><i
    		        class="far fa-calendar-alt menu__icon uncheck"></i>Matches</a>
                </li>    
    	    <li class="menu__list-item"><a href="http://www.southmoorac.com/new_season_summary.php"
    		    class="menu__item-link uncheck"><i class="fas fa-trophy menu__icon ">
            </i>League
    		    Table</a>
    	    </li>    
    	    <li class="menu__list-item"><a href="#" class="menu__item-link uncheck"><i
    		        class="far fa-envelope-open menu__icon "></i>Contact Us</a>
                </li>
    	</ul>
    </nav>

код, вызывающий проблемы, - это высота: строка 100% в ссылке & __ item-link.

iphone просто делает не так.

Я пытался убрать его и использовать вертикальное заполнение для увеличения высоты ссылки, но это все равно, что пытаться пригвоздить желе к стене между экранами разной высоты. она решает проблему с дисплеем iphone, но не является реальным решением.

Я надеюсь, что вы можете помочь ....

спасибо

Малкольм

...