下拉菜單能把導(dǎo)航菜單以分類(lèi)的形式整理起來(lái),是網(wǎng)頁(yè)UI設(shè)計(jì)中不可缺少的一部分。因?yàn)闉g覽器的兼容性問(wèn)題,下拉菜單大部分是通過(guò)js實(shí)現(xiàn)的,而這其中用的最多的jQuery插件是superfish,superfish可以幫助我們實(shí)現(xiàn)多級(jí)下拉菜單,和豐富的視覺(jué)菜單效果,對(duì)于下拉菜單比較復(fù)雜的情況,superfish是一個(gè)不錯(cuò)的選擇。
可是很多情況下,我們用不到superfish這么多豐富的功能,今天我們要說(shuō)的就是簡(jiǎn)單的情況,只有一級(jí)下拉菜單的情況。通過(guò)下面一段jQuery代碼就可以實(shí)現(xiàn)下拉菜單,并且直接支持WordPress默認(rèn)的菜單功能。
$('.menu-item-has-children').mouseenter(function() {
$(this).children('.sub-menu').show();
});
$('.menu-item-has-children').mouseleave(function() {
$(this).children('.sub-menu').hide();
});
代碼中的.menu-item-has-children和.sub-menu都是WordPress給菜單自動(dòng)加上的css類(lèi),通過(guò)鼠標(biāo)的進(jìn)入和離開(kāi)事件來(lái)控制子菜單的顯示和隱藏,實(shí)現(xiàn)非常優(yōu)雅和簡(jiǎn)潔。
當(dāng)然,只有這一段代碼還不夠,還需要一些CSS的支持。
.menu-item-has-children{
position:relative;
}
li.menu-item-has-children .sub-menu{
display:none;
position: absolute;
background: #333;
margin-left: -50%;
left: 50%;
}
上面的css是完成本實(shí)力中的代碼所必須的,各位看官可以根據(jù)自己的需求增加css來(lái)美化下拉菜單。


