将鼠标悬停在菜单项上时,以下代码会显示子菜单.由于它使用计时器,如果你没有足够快地选择子菜单项,子菜单项就会消失.我宁愿让它高亮显示它所在的菜单选项并保留子菜单项,直到您将鼠标悬停在其上或单击另一个主菜单项:
$(document).ready(function(){Nifty("#menu a","small top transparent"); Nifty("#outcontent","medium bottom transparent");
function hideSubMenu() {
$("#sub-menu-content").fadeOut('slow');
hideSubMenu.timeout = 0;
}
$('#menu a').hover(function() { //start function when any link is clicked
if (hideSubMenu.timeout) clearTimeout(hideSubMenu.timeout);
hideSubMenu.timeout = 0;
$("#sub-menu-content").hide();
var html = '<ul>' + $(this).next('ul.sub-menu').html() + '</ul> ';
$("#sub-menu-content").html(html); //show the html inside .content div
$("#sub-menu-content").fadeIn('fast'); //animation
},function(){
hideSubMenu.timeout = setTimeout(hideSubMenu, 800);
}); //close click(
$('#sub-menu-content').hover(function() {
if (hideSubMenu.timeout) clearTimeout(hideSubMenu.timeout);
hideSubMenu.timeout = 0;
},function(){
hideSubMenu.timeout = setTimeout(hideSubMenu, 800);
}); //close click(
}); //close $(
Run Code Online (Sandbox Code Playgroud)
要看到它的实际效果:
http://cruisecontrolledmarketing.com/test/welcome/login 用户:会员密码:rebmem
谢谢!
| 归档时间: |
|
| 查看次数: |
18550 次 |
| 最近记录: |