Как сделать меню доступным после изменения размера?

Я пишу свой первый сайт, здесь, www.shegoesplacesandseesthings.com. При просмотре на маленьком экране верхнее меню навигации становится маленьким значком вместо «svg viewBox», на который можно щелкнуть, чтобы открыть меню. Это отлично работает с мышью на ноутбуке и даже на iPad, иконка можно щелкнуть. Однако на экране iPhone меню меняет размер на значок, но не нажимается. Я пишу только в html и css (я только начал учиться).Как сделать меню доступным после изменения размера?

Вопрос в том, можно ли нажимать значок на iPhone? Я понимаю, что медиа-запросы можно использовать для изменения размера веб-страниц для экранов разного размера, или мне нужно использовать Javascript?

Вот код html и css, который устанавливает строку меню.

<nav class="site-nav"> 
    <span class="menu-icon"> 
    <svg viewBox="0 0 18 15" width="18px" height="15px"> 
     <a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a> 
    </svg> 
    </span> 

    <div class="trigger"> 
    {% for my_page in site.pages %} 
     {% if my_page.title %} 
     <a class="page-link" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a> 
     {% endif %} 
    {% endfor %} 
    </div> 
</nav> 


.site-nav { 
    float: right; 
    line-height: 56px; 

    .menu-icon { 
    display: none; 
    } 


@include media-query($on-palm) { 
    position: absolute; 
    top: 9px; 
    right: $spacing-unit/2; 
    background-color: $background-color; 
    border: 1px solid $grey-color-light; 
    border-radius: 5px; 
    text-align: right; 

    .menu-icon { 
    display: block; 
    float: right; 
    width: 36px; 
    height: 26px; 
    line-height: 0; 
    padding-top: 10px; 
    text-align: center; 

    > svg path { 
     fill: $grey-color-dark; 
    } 
    } 

    .trigger { 
    clear: both; 
    display: none; 
    } 

    &:hover .trigger { 
    display: block; 
    padding-bottom: 5px; 
    }

источник

2017-01-11 Fliss

Это на самом устройстве, использующем мобильный эмулятор Google Chrome? – Roljhon

Пожалуйста, предоставьте весь соответствующий код в [mcve] в самом вопросе, а не на стороннем сайте. –

Добро пожаловать в StackOverflow! Пожалуйста, ознакомьтесь с инструкциями пользователя о том, как задать хороший вопрос перед отправкой вопроса (http://stackoverflow.com/help/how-to-ask) Спасибо –

это не ответ на ваш вопрос точно, но вы могли бы хотите заглянуть в структуру Bootstrap. Многие из этих проблем уже решены, в том числе появление вашего веб-сайта на нескольких устройствах, в браузерах и размерах экрана. Если вы изучаете HTML и CSS, вам будет полезно ознакомиться с некоторыми учебниками о том, как использовать Bootstrap, это научит вас многому о том, что возможно с Divs и некоторым умным CSS. Вот ссылка http://getbootstrap.com/

источник

2017-01-12 00:00:51 Shady

Спасибо, bootstrap позволил мне делать именно то, что я хотел, menu/navbar теперь можно кликать на мобильном телефоне – Fliss

Рад, что я смог помочь :) – Shady

:active псевдо-класс не работает прошивка (хорошо объясняется here).

Один обходной путь, если вы не хотят, чтобы добавить некоторую поддержку JavaScript, может быть использовать класс :focus псевдо в дополнение к :active на .site-nav

.site-nav:active .trigger, 
.site-nav:focus .trigger { display: block; padding-bottom: 5px; }

источник

2017-01-11 18:20:41

Я не против использования Javascript, я просто не знаю, что Мне нужно было бы сделать – Fliss

Как сделать меню доступным после изменения размера?

ответ

Смежные вопросы