將CSS懸停菜單轉換爲點擊以進行響應式設計

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