Question

我想制作移动视图菜单，而在移动设备上没有使用鼠标悬停菜单，如果用户触摸或点击该菜单，我需要传播子菜单。

HTML：

<div id="cssmenubox">
<ul id="cssmenu">
<li><a href="#">Home</a></li>
<li><a href="#">Gallery</a>
<ul>
<li><a href="#">Single</a></li>
<li><a href="#">Story</a></li>
<li><a href="#">Monotone</a></li>
</ul>
</li>
<li><a href="#">Post</a>
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Quotes</a></li>
</ul></li>
<li><a href="#">About</a></li>
</ul>
</div>

这是我的CSS示例，我需要将“悬停”更改为“点击”移动视图。

#cssmenubox { width: auto; height:auto; }
ul#cssmenu {
list-style: none !important;
margin: auto;
padding: 0;
width: 100%;
height: 75px;
display: block;
background-color: #fff !important;
}
ul#cssmenu ul { 
display: block; 
}
ul#cssmenu li {
font-size: 32px;
margin: auto;
list-style: none !important;
height: 75px;
display: block;
width:100%;
display:block;
}
ul#cssmenu li:first-child {
}

ul#cssmenu a {
display: block;
text-decoration: none;
font-weight:normal;
height: 75px;
color: #000;
}
ul#cssmenu a:hover {
color: #0090D3;
height: 75px;
}
ul#cssmenu li > ul { display:none; }
ul#cssmenu li:hover ul { 
display: block;
font-size: 14px;
}
ul#cssmenu li:hover ul li {
display:block;
width:auto;
height:auto;
}
ul#cssmenu li > ul > li { 
display:block;
}
ul#cssmenu li > ul > li {
background-color:#fff;
z-index:2;
position:relative;
height:75px;
}
ul#cssmenu li:first-child {
}

样品： http://jsfiddle.net/mVBXM/

Answer 1

为什么不尝试媒体查询？使用

@media only screen and (max-width: 480px) {
     /* Your CSS code comes here */
}

确保覆盖移动视图中不需要的所有属性。这样，桌面视图的CSS不会影响移动视图。

据我所知，CSS中没有可用的点击伪类。所以你需要使用Javascript来做到这一点。请查看此链接以获取更多详细信息。

http://www.w3.org/TR/CSS2/selector.html

转换CSS悬停菜单以单击以进行响应式设计

1 个答案: