雖然標(biāo)題這樣寫，但實際上使用 JavaScript + DOM/CSS 組合可以實現(xiàn)很多強(qiáng)大的功能。昨天看到 fisio 提到這種鼠標(biāo)懸停時展開的菜單，我原來也沒有用過，經(jīng)他一提醒覺得還是挺有用處的，尤其在有很多內(nèi)容的頁面上。
廢話最后再說，直接給出代碼先：
JavaScript
<script type="text/javascript">
function popMenu(objId) {
var obj = document.getElementById(objId);
if (obj.style.display == 'none') {
obj.style.display = 'block';
} else {
obj.style.display = 'none';
}
}
</script>
function popMenu(objId) {
var obj = document.getElementById(objId);
if (obj.style.display == 'none') {
obj.style.display = 'block';
} else {
obj.style.display = 'none';
}
}
</script>
在頁面中使用
<div id="menuCaption" onmouseover="popMenu('menuLists');" onmouseout="popMenu('menuLists');">
<!-- 當(dāng)鼠標(biāo)懸停在這里時顯示下面列表的內(nèi)容 -->
<ul id="menuLists" style="display:none;">
<!-- 這里是鼠標(biāo)懸停時顯示的內(nèi)容 -->
<li>菜單列表內(nèi)容</li>
<li>菜單列表內(nèi)容</li>
<li>菜單列表內(nèi)容</li>
</ul>
</div>
<!-- 當(dāng)鼠標(biāo)懸停在這里時顯示下面列表的內(nèi)容 -->
<ul id="menuLists" style="display:none;">
<!-- 這里是鼠標(biāo)懸停時顯示的內(nèi)容 -->
<li>菜單列表內(nèi)容</li>
<li>菜單列表內(nèi)容</li>
<li>菜單列表內(nèi)容</li>
</ul>
</div>
原理
頁面調(diào)用之初，只有 menuCaption 即菜單的標(biāo)題顯示，menuLists 這些菜單列表的內(nèi)容不顯示；但當(dāng)鼠標(biāo)進(jìn)入菜單標(biāo)題區(qū)域后，會激活 popMenu 函數(shù)把 menuLists 的樣式從“display:none”改為“display:block”，這樣 menuLists 的內(nèi)容就顯示出來了；鼠標(biāo)離開菜單標(biāo)題區(qū)域后再次隱藏列表內(nèi)容。
SEO 方面的疑問
由于頁面的代碼中有“display:none”，相當(dāng)于存在隱藏文字，我不敢確定 Google 對這類隱藏文字的態(tài)度，所以各位要使用的時候請務(wù)必小心，做好可能會被 Google 降權(quán)的心理準(zhǔn)備。
