今天发现webandpeople的菜单有点小问题,虽然在后台设置最大列数为3,但真正用的时候发现,只有两列,菜单项再多,也只是增加行数。

查看代码,我们使用方法drawCustomMenuItem()绘制菜单,也确实可以绘制出3个DIV,但第三个DIV却排在第一个DIV的下面,查看样式表发现,菜单的宽度和高度都采用MAX MIN的方式设置,调整后发现,菜单的宽度width与设置的min-width恒等,虽然可以修改宽度的值,但却无法自动适应列数。若要自动适应列数,必然需要JS帮忙。查看JS代码,并添加如下代码行:

function wpShowMenuPopup(objMenu, popupId){
    ...
    var count=popup.innerHTML.split("<div class=\"column").length-1;
    popup.style.width=(count*230)+'px';
    ...
}

注意代码最后一行if (CUSTOMMENU_POPUP_WIDTH) popup.style.width = CUSTOMMENU_POPUP_WIDTH + 'px';
若要我们的代码实现,需要在后台将常量设置为0,或者注释掉这一行。

这里还提供了弹出菜单跟随主菜单移动的方法,大家可以尝试一下

function wpShowMenuPopup(objMenu, popupId){
    ...
    var pos = wpPopupPos(objMenu, popupWidth);
    popup.style.top = pos.top+'px';
    ...
}