调整大小后如何使菜单可点击?

时间:2017-01-11 17:59:10

标签: html css sass

我正在写我的第一个网站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;
  }

2 个答案:

答案 0 :(得分:0)

:active伪类在iOS中不起作用(很好地解释here)。

如果您不愿意添加一些JavaScript支持,一种解决方法可能是在:focus

:active之外使用.site-nav伪类
.site-nav:active .trigger,
.site-nav:focus .trigger { display: block; padding-bottom: 5px; }

答案 1 :(得分:0)

这并不完全回答您的问题,但您可能需要查看Bootstrap框架。许多这些问题已经解决,包括跨多个设备,浏览器和屏幕尺寸的网站外观。 如果你正在学习HTML和CSS,那么你可以通过一些关于如何使用Bootstrap的教程来学习它,它会教你很多关于Divs和一些聪明的CSS的可能性。  这是链接http://getbootstrap.com/