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